support className and orient prop. Fixes #9 #8

react-component · Dec 30, 2014 · 8b3a1ee · 8b3a1ee
1 parent 1a08933
commit 8b3a1ee
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,9 @@ calendar ui component for react, port from https://github.com/kissyteam/date-pic
 
 ## Screenshots
 
-![rc-calendar](http://gtms04.alicdn.com/tps/i4/TB1WifJGVXXXXa3XXXX6tFy4VXX-328-742.png)
+![rc-calendar](http://gtms01.alicdn.com/tps/i1/TB1cC0cHXXXXXbOXpXX06lmNXXX-684-684.png)
+
+![rc-calendar-input](http://gtms03.alicdn.com/tps/i3/TB1lmz_GFXXXXbEXVXXbMpwQXXX-692-732.png)
 
 ## Feature
 

diff --git a/assets/bootstrap/picker.less b/assets/bootstrap/picker.less
@@ -1,3 +1,5 @@
+// http://eternicode.github.io/bootstrap-datepicker/
+
 .rc-calendar {
   box-sizing: border-box;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@@ -22,21 +24,8 @@
   cursor: pointer;
 }
 
-.rc-calendar-orient-bottom:before {
-  display: inline-block;
-  bottom: -7px;
-  border-bottom: 0;
-  border-top: 7px solid #999;
-}
-
-.rc-calendar-orient-left:before {
-  display: inline-block;
-  left: 6px;
-}
-
 .rc-calendar:before {
   display: none;
-  box-sizing: border-box;
   content: '';
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
@@ -45,22 +34,8 @@
   border-bottom-color: rgba(0, 0, 0, 0.2);
   position: absolute;
 }
-
-.rc-calendar-orient-bottom:after {
-  display: inline-block;
-  bottom: -6px;
-  border-bottom: 0;
-  border-top: 6px solid #fff;
-}
-
-.rc-calendar-orient-left:after {
-  display: inline-block;
-  left: 7px;
-}
-
 .rc-calendar:after {
   display: none;
-  box-sizing: border-box;
   content: '';
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
@@ -69,6 +44,43 @@
   position: absolute;
 }
 
+.rc-calendar.rc-calendar-orient-left:before {
+  display: inline-block;
+  left: 6px;
+}
+.rc-calendar.rc-calendar-orient-left:after {
+  display: inline-block;
+  left: 7px;
+}
+.rc-calendar.rc-calendar-orient-right:before {
+  display: inline-block;
+  right: 6px;
+}
+.rc-calendar.rc-calendar-orient-right:after {
+  display: inline-block;
+  right: 7px;
+}
+.rc-calendar.rc-calendar-orient-top:before {
+  display: inline-block;
+  top: -7px;
+}
+.rc-calendar.rc-calendar-orient-top:after {
+  display: inline-block;
+  top: -6px;
+}
+.rc-calendar.rc-calendar-orient-bottom:before {
+  display: inline-block;
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid #999;
+}
+.rc-calendar.rc-calendar-orient-bottom:after {
+  display: inline-block;
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #fff;
+}
+
 .rc-calendar-header {
   height: 30px;
   line-height: 30px;

diff --git a/examples/CalendarInput.js b/examples/CalendarInput.js
@@ -7,6 +7,7 @@ var DateTimeFormat = require('gregorian-calendar-format');
 var GregorianCalendar = require('gregorian-calendar');
 var formatter = new DateTimeFormat('yyyy-MM-dd', zhCn);
 var CalendarLocale = require('../lib/locale/zh-cn');
+require('./calendar-input.css');
 
 var CalendarInput = React.createClass({
   getInitialState: function () {
@@ -59,13 +60,11 @@ var CalendarInput = React.createClass({
     var state = this.state;
     var calendar;
     if (state.showCalendar) {
-      calendar = (<div style={{position: "absolute", left: 0, top: 24, zIndex: 99}}>
-        <Calendar locale={CalendarLocale} value={state.calendarValue} focused="1" onBlur={this.onCalendarBlur} onSelect={this.onCalendarSelect}/>
-      </div>);
+      calendar = (<Calendar className="rc-popup-calendar" orient={['left','bottom']} locale={CalendarLocale} value={state.calendarValue} focused="1" onBlur={this.onCalendarBlur} onSelect={this.onCalendarSelect}/>);
     }
     return (
-      <span style={{display: "inline-block", position: "relative"}}>
-        <input value={state.value} style={{height: 21}} onFocus={this.onFocus} onChange={this.onChange} ref='input' onKeyDown={this.onKeyDown}/>
+      <span className='rc-calendar-input'>
+        <input value={state.value} onFocus={this.onFocus} onChange={this.onChange} ref='input' onKeyDown={this.onKeyDown}/>
       {calendar}
       </span>)
   }

diff --git a/lib/Calendar.js b/lib/Calendar.js
@@ -92,6 +92,7 @@ var Calendar = React.createClass({
       value.setTime(Date.now());
     }
     return {
+      orient: this.props.orient,
       value: value
     };
   },
@@ -105,6 +106,7 @@ var Calendar = React.createClass({
   getDefaultProps: function () {
     return {
       locale: require('./locale/en-us'),
+      className: '',
       showToday: 1,
       onSelect: noop,
       onFocus: noop,
@@ -363,7 +365,8 @@ var Calendar = React.createClass({
     var showWeekNumberEl;
     var props = this.props;
     var locale = props.locale;
-    var value = this.state.value;
+    var state = this.state;
+    var value = state.value;
     var dateLocale = value.getLocale();
     var veryShortWeekdays = [];
     var weekDays = [];
@@ -401,13 +404,24 @@ var Calendar = React.createClass({
     }
 
     var monthPanel;
-    if (this.state.showMonthPanel) {
+    if (state.showMonthPanel) {
       monthPanel = <MonthPanel locale={locale} value={value} onSelect={this.onMonthPanelSelect}/>;
     }
+
+    var className = "rc-calendar";
+    if (props.className) {
+      className += ' ' + props.className;
+    }
     // TODO need focusin focusout
     // https://github.com/facebook/react/issues/2011
+    var orient = state.orient;
+    if (orient) {
+      orient.forEach(function (o) {
+        className += ' rc-calendar-orient-' + o;
+      });
+    }
     return (
-      <div className = "rc-calendar" tabIndex="0" onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown}>
+      <div className = {className} tabIndex="0" onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown}>
         <div style={{outline: 'none'}}>
           <div className = "rc-calendar-header">
             <a className = "rc-calendar-prev-year-btn"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-calendar",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "calendar ui component for react",
   "keywords": [
     "react",