feat: make DatePicker's mode and onPanelChange works

react-component · Jul 28, 2017 · 84dd923 · 84dd923
1 parent f51ed13
commit 84dd923
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 53 deletions.
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -50,27 +50,28 @@ function goDay(direction) {
 
 const Calendar = createReactClass({
   propTypes: {
-    disabledDate: PropTypes.func,
-    disabledTime: PropTypes.any,
+    prefixCls: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    defaultValue: PropTypes.object,
     value: PropTypes.object,
     selectedValue: PropTypes.object,
-    defaultValue: PropTypes.object,
-    className: PropTypes.string,
+    mode: PropTypes.oneOf(['data', 'month', 'year', 'decade']),
     locale: PropTypes.object,
+    showDateInput: PropTypes.bool,
     showWeekNumber: PropTypes.bool,
-    style: PropTypes.object,
     showToday: PropTypes.bool,
-    showDateInput: PropTypes.bool,
-    visible: PropTypes.bool,
+    showOk: PropTypes.bool,
     onSelect: PropTypes.func,
     onOk: PropTypes.func,
-    showOk: PropTypes.bool,
-    prefixCls: PropTypes.string,
     onKeyDown: PropTypes.func,
     timePicker: PropTypes.element,
     dateInputPlaceholder: PropTypes.any,
     onClear: PropTypes.func,
     onChange: PropTypes.func,
+    onPanelChange: PropTypes.func,
+    disabledDate: PropTypes.func,
+    disabledTime: PropTypes.any,
     renderFooter: PropTypes.func,
     renderSidebar: PropTypes.func,
   },
@@ -83,10 +84,12 @@ const Calendar = createReactClass({
       showDateInput: true,
       timePicker: null,
       onOk: noop,
+      onPanelChange: noop,
     };
   },
   getInitialState() {
     return {
+      mode: this.props.mode || 'date',
       showTimePicker: false,
     };
   },
@@ -189,6 +192,13 @@ const Calendar = createReactClass({
       source: 'todayButton',
     });
   },
+  onPanelChange(mode) {
+    const { props } = this;
+    if (!('mode' in props)) {
+      this.setState({ mode });
+    }
+    props.onPanelChange(mode);
+  },
   getRootDOMNode() {
     return ReactDOM.findDOMNode(this);
   },
@@ -210,7 +220,7 @@ const Calendar = createReactClass({
       disabledTime,
     } = props;
     const state = this.state;
-    const { value, selectedValue, showTimePicker } = state;
+    const { value, selectedValue, mode, showTimePicker } = state;
     const disabledTimeConfig = showTimePicker && disabledTime && timePicker ?
       getTimeConfig(selectedValue, disabledTime) : null;
 
@@ -248,8 +258,10 @@ const Calendar = createReactClass({
         <div className={`${prefixCls}-date-panel`}>
           <CalendarHeader
             locale={locale}
-            onValueChange={this.setValue}
+            mode={mode}
             value={value}
+            onValueChange={this.setValue}
+            onPanelChange={this.onPanelChange}
             showTimePicker={showTimePicker}
             prefixCls={prefixCls}
           />

diff --git a/src/calendar/CalendarHeader.jsx b/src/calendar/CalendarHeader.jsx
@@ -49,43 +49,26 @@ const CalendarHeader = createReactClass({
     this.previousMonth = goMonth.bind(this, -1);
     this.nextYear = goYear.bind(this, 1);
     this.previousYear = goYear.bind(this, -1);
-    return {};
+    return null;
   },
 
   onMonthSelect(value) {
-    this.triggerPanelChange({ showMonthPanel: 0 });
+    this.props.onPanelChange('date');
     this.props.onValueChange(value);
   },
 
   onYearSelect(value) {
-    this.triggerPanelChange({ showYearPanel: 0 });
+    const referer = this.yearPanelReferer;
+    this.yearPanelReferer = null;
+    this.props.onPanelChange(referer);
     this.props.onValueChange(value);
   },
 
   onDecadeSelect(value) {
-    this.triggerPanelChange({ showDecadePanel: 0 });
+    this.props.onPanelChange('year');
     this.props.onValueChange(value);
   },
 
-  triggerPanelChange(panelStatus) {
-    const { showMonthPanel, showYearPanel, showDecadePanel } = {
-      ...this.state,
-      ...panelStatus,
-    };
-    let mode = 'date';
-    if (showMonthPanel) {
-      mode = 'month';
-    }
-    if (showYearPanel) {
-      mode = 'year';
-    }
-    if (showDecadePanel) {
-      mode = 'decade';
-    }
-    this.setState(panelStatus);
-    this.props.onPanelChange(mode);
-  },
-
   monthYearElement(showTimePicker) {
     const props = this.props;
     const prefixCls = props.prefixCls;
@@ -97,7 +80,7 @@ const CalendarHeader = createReactClass({
     const year = (<a
       className={`${prefixCls}-year-select`}
       role="button"
-      onClick={showTimePicker ? null : this.showYearPanel}
+      onClick={showTimePicker ? null : () => this.showYearPanel('date')}
       title={locale.yearSelect}
     >
       {value.format(locale.yearFormat)}
@@ -131,31 +114,24 @@ const CalendarHeader = createReactClass({
   },
 
   showMonthPanel() {
-    this.triggerPanelChange({
-      showMonthPanel: 1,
-      showYearPanel: 0,
-      showDecadePanel: 0,
-    });
+    this.props.onPanelChange('month');
   },
 
-  showYearPanel() {
-    this.triggerPanelChange({
-      showYearPanel: 1,
-      showDecadePanel: 0,
-    });
+  showYearPanel(referer) {
+    this.yearPanelReferer = referer;
+    this.props.onPanelChange('year');
   },
 
   showDecadePanel() {
-    this.triggerPanelChange({
-      showDecadePanel: 1,
-    });
+    this.props.onPanelChange('decade');
   },
 
   render() {
-    const { props, state } = this;
+    const { props } = this;
     const {
       prefixCls,
       locale,
+      mode,
       value,
       showTimePicker,
       enableNext,
@@ -164,19 +140,19 @@ const CalendarHeader = createReactClass({
     } = props;
 
     let panel = null;
-    if (state.showMonthPanel) {
+    if (mode === 'month') {
       panel = (
         <MonthPanel
           locale={locale}
           defaultValue={value}
           rootPrefixCls={prefixCls}
           onSelect={this.onMonthSelect}
-          onYearPanelShow={this.showYearPanel}
+          onYearPanelShow={() => this.showYearPanel('month')}
           disabledDate={disabledMonth}
         />
       );
     }
-    if (state.showYearPanel) {
+    if (mode === 'year') {
       panel = (
         <YearPanel
           locale={locale}
@@ -187,7 +163,7 @@ const CalendarHeader = createReactClass({
         />
       );
     }
-    if (state.showDecadePanel) {
+    if (mode === 'decade') {
       panel = (
         <DecadePanel
           locale={locale}