chore: update API and API docs

README.md

@@ -212,6 +212,18 @@ http://react-component.github.io/calendar/examples/index.html
           <td></td>
           <td>date input's placeholder</td>
         </tr>
+        <tr>
+          <td>mode</td>
+          <td>enum('time', 'date', 'month', 'year', 'decade')</td>
+          <td>'date'</td>
+          <td>controll which kind of panel should be shown</td>
+        </tr>
+        <tr>
+          <td>onPanelChange</td>
+          <td>Function(date: moment, mode)</td>
+          <td></td>
+          <td>called when panel changed</td>
+        </tr>
     </tbody>
 </table>
 
@@ -348,6 +360,18 @@ http://react-component.github.io/calendar/examples/index.html
           <td>both</td>
           <td>whether fix start or end selected value. check start-end-range example</td>
         </tr>
+        <tr>
+          <td>mode</td>
+          <td>enum('date', 'month', 'year', 'decade')[]</td>
+          <td>['date', 'date']</td>
+          <td>controll which kind of panels should be shown</td>
+        </tr>
+        <tr>
+          <td>onPanelChange</td>
+          <td>Function(date: moment[], mode)</td>
+          <td></td>
+          <td>called when panels changed</td>
+        </tr>
     </tbody>
 </table>
 

src/Calendar.jsx

@@ -56,7 +56,7 @@ const Calendar = createReactClass({
     defaultValue: PropTypes.object,
     value: PropTypes.object,
     selectedValue: PropTypes.object,
-    mode: PropTypes.oneOf(['date', 'month', 'year', 'decade']),
+    mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']),
     locale: PropTypes.object,
     showDateInput: PropTypes.bool,
     showWeekNumber: PropTypes.bool,
@@ -90,7 +90,6 @@ const Calendar = createReactClass({
   getInitialState() {
     return {
       mode: this.props.mode || 'date',
-      showTimePicker: false,
     };
   },
   componentWillReceiveProps(nextProps) {
@@ -198,24 +197,20 @@ const Calendar = createReactClass({
     });
   },
   onPanelChange(mode) {
-    const { props } = this;
+    const { props, state } = this;
     if (!('mode' in props)) {
       this.setState({ mode });
     }
-    props.onPanelChange(mode);
+    props.onPanelChange(state.value, mode);
   },
   getRootDOMNode() {
     return ReactDOM.findDOMNode(this);
   },
   openTimePicker() {
-    this.setState({
-      showTimePicker: true,
-    });
+    this.onPanelChange('time');
   },
   closeTimePicker() {
-    this.setState({
-      showTimePicker: false,
-    });
+    this.onPanelChange('date');
   },
   render() {
     const props = this.props;
@@ -225,7 +220,8 @@ const Calendar = createReactClass({
       disabledTime,
     } = props;
     const state = this.state;
-    const { value, selectedValue, mode, showTimePicker } = state;
+    const { value, selectedValue, mode } = state;
+    const showTimePicker = mode === 'time';
     const disabledTimeConfig = showTimePicker && disabledTime && timePicker ?
       getTimeConfig(selectedValue, disabledTime) : null;
 

src/RangeCalendar.js

@@ -255,7 +255,7 @@ const RangeCalendar = createReactClass({
         mode: newMode,
       });
     }
-    props.onPanelChange(newMode);
+    props.onPanelChange(state.value, newMode);
   },
 
   onEndPanelChange(mode) {
@@ -266,7 +266,7 @@ const RangeCalendar = createReactClass({
         mode: newMode,
       });
     }
-    props.onPanelChange(newMode);
+    props.onPanelChange(state.value, newMode);
   },
 
   getStartValue() {

src/calendar/CalendarHeader.jsx

@@ -49,7 +49,7 @@ const CalendarHeader = createReactClass({
     this.previousMonth = goMonth.bind(this, -1);
     this.nextYear = goYear.bind(this, 1);
     this.previousYear = goYear.bind(this, -1);
-    return null;
+    return { yearPanelReferer: null };
   },
 
   onMonthSelect(value) {
@@ -58,8 +58,8 @@ const CalendarHeader = createReactClass({
   },
 
   onYearSelect(value) {
-    const referer = this.yearPanelReferer;
-    this.yearPanelReferer = null;
+    const referer = this.state.yearPanelReferer;
+    this.setState({ yearPanelReferer: null });
     this.props.onPanelChange(referer);
     this.props.onValueChange(value);
   },
@@ -118,7 +118,7 @@ const CalendarHeader = createReactClass({
   },
 
   showYearPanel(referer) {
-    this.yearPanelReferer = referer;
+    this.setState({ yearPanelReferer: referer });
     this.props.onPanelChange('year');
   },
 

tests/Calendar.spec.jsx

@@ -102,19 +102,31 @@ describe('Calendar', () => {
     });
 
     it('support controlled mode', () => {
+      const timePicker = <TimePickerPanel defaultValue={moment('00:00:00', 'HH:mm:ss')} />;
       class ControlledCalendar extends React.Component {
         state = { mode: 'date' };
 
-        handlePanelChange = (mode) => {
+        handlePanelChange = (value, mode) => {
           this.setState({ mode });
         }
 
         render() {
-          return <Calendar mode={this.state.mode} onPanelChange={this.handlePanelChange} />;
+          return (
+            <Calendar
+              mode={this.state.mode}
+              onPanelChange={this.handlePanelChange}
+              timePicker={timePicker}
+            />
+          );
         }
       }
       const wrapper = mount(<ControlledCalendar />);
 
+      wrapper.find('.rc-calendar-time-picker-btn').simulate('click');
+      expect(wrapper.find('.rc-calendar-time-picker').length).toBe(1);
+      wrapper.find('.rc-calendar-time-picker-btn').simulate('click');
+      expect(wrapper.find('.rc-calendar-time-picker').length).toBe(0);
+
       wrapper.find('.rc-calendar-month-select').simulate('click');
       expect(wrapper.find('.rc-calendar-month-panel').length).toBe(1);
       wrapper.find('.rc-calendar-month-panel-year-select').simulate('click');

tests/RangeCalendar.spec.jsx

@@ -279,7 +279,7 @@ describe('RangeCalendar', () => {
       class ControlledRangeCalendar extends React.Component {
         state = { mode: ['date', 'date'] };
 
-        handlePanelChange = (mode) => {
+        handlePanelChange = (value, mode) => {
           this.setState({ mode });
         }