refactor: simply relation between header and panels

react-component · Jul 28, 2017 · f51ed13 · f51ed13
1 parent 4f9d518
commit f51ed13
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 87 deletions.
diff --git a/src/RangeCalendar.js b/src/RangeCalendar.js
@@ -243,12 +243,12 @@ const RangeCalendar = createReactClass({
     return this.fireValueChange(value);
   },
 
-  onStartPanelChange({ showMonthPanel, showYearPanel }) {
-    this.setState({ isStartMonthYearPanelShow: showMonthPanel || showYearPanel });
+  onStartPanelChange(mode) {
+    this.setState({ isStartMonthYearPanelShow: mode === 'month' || mode === 'year' });
   },
 
-  onEndPanelChange({ showMonthPanel, showYearPanel }) {
-    this.setState({ isEndMonthYearPanelShow: showMonthPanel || showYearPanel });
+  onEndPanelChange(mode) {
+    this.setState({ isEndMonthYearPanelShow: mode === 'month' || mode === 'year' });
   },
 
   getStartValue() {

diff --git a/src/calendar/CalendarHeader.jsx b/src/calendar/CalendarHeader.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
+import toFragment from 'rc-util/lib/Children/mapSelf';
 import MonthPanel from '../month/MonthPanel';
 import YearPanel from '../year/YearPanel';
-import toFragment from 'rc-util/lib/Children/mapSelf';
+import DecadePanel from '../decade/DecadePanel';
 
 function goMonth(direction) {
   const next = this.props.value.clone();
@@ -27,8 +28,6 @@ const CalendarHeader = createReactClass({
     value: PropTypes.object,
     onValueChange: PropTypes.func,
     showTimePicker: PropTypes.bool,
-    showMonthPanel: PropTypes.bool,
-    showYearPanel: PropTypes.bool,
     onPanelChange: PropTypes.func,
     locale: PropTypes.object,
     enablePrev: PropTypes.any,
@@ -50,36 +49,41 @@ const CalendarHeader = createReactClass({
     this.previousMonth = goMonth.bind(this, -1);
     this.nextYear = goYear.bind(this, 1);
     this.previousYear = goYear.bind(this, -1);
-    const { showMonthPanel, showYearPanel } = this.props;
-    return { showMonthPanel, showYearPanel };
+    return {};
   },
 
-  componentWillReceiveProps() {
-    const props = this.props;
-    if ('showMonthpanel' in props) {
-      this.setState({ showMonthPanel: props.showMonthPanel });
-    }
-    if ('showYearpanel' in props) {
-      this.setState({ showYearPanel: props.showYearPanel });
-    }
+  onMonthSelect(value) {
+    this.triggerPanelChange({ showMonthPanel: 0 });
+    this.props.onValueChange(value);
   },
 
-  onSelect(value) {
-    this.triggerPanelChange({
-      showMonthPanel: 0,
-      showYearPanel: 0,
-    });
+  onYearSelect(value) {
+    this.triggerPanelChange({ showYearPanel: 0 });
+    this.props.onValueChange(value);
+  },
+
+  onDecadeSelect(value) {
+    this.triggerPanelChange({ showDecadePanel: 0 });
     this.props.onValueChange(value);
   },
 
   triggerPanelChange(panelStatus) {
-    if (!('showMonthPanel' in this.props)) {
-      this.setState({ showMonthPanel: panelStatus.showMonthPanel });
+    const { showMonthPanel, showYearPanel, showDecadePanel } = {
+      ...this.state,
+      ...panelStatus,
+    };
+    let mode = 'date';
+    if (showMonthPanel) {
+      mode = 'month';
     }
-    if (!('showYearPanel' in this.props)) {
-      this.setState({ showYearPanel: panelStatus.showYearPanel });
+    if (showYearPanel) {
+      mode = 'year';
     }
-    this.props.onPanelChange(panelStatus);
+    if (showDecadePanel) {
+      mode = 'decade';
+    }
+    this.setState(panelStatus);
+    this.props.onPanelChange(mode);
   },
 
   monthYearElement(showTimePicker) {
@@ -130,13 +134,20 @@ const CalendarHeader = createReactClass({
     this.triggerPanelChange({
       showMonthPanel: 1,
       showYearPanel: 0,
+      showDecadePanel: 0,
     });
   },
 
   showYearPanel() {
     this.triggerPanelChange({
-      showMonthPanel: 0,
       showYearPanel: 1,
+      showDecadePanel: 0,
+    });
+  },
+
+  showDecadePanel() {
+    this.triggerPanelChange({
+      showDecadePanel: 1,
     });
   },
 
@@ -159,17 +170,30 @@ const CalendarHeader = createReactClass({
           locale={locale}
           defaultValue={value}
           rootPrefixCls={prefixCls}
-          onSelect={this.onSelect}
+          onSelect={this.onMonthSelect}
+          onYearPanelShow={this.showYearPanel}
           disabledDate={disabledMonth}
         />
       );
-    } else if (state.showYearPanel) {
+    }
+    if (state.showYearPanel) {
       panel = (
         <YearPanel
           locale={locale}
           defaultValue={value}
           rootPrefixCls={prefixCls}
-          onSelect={this.onSelect}
+          onSelect={this.onYearSelect}
+          onDecadePanelShow={this.showDecadePanel}
+        />
+      );
+    }
+    if (state.showDecadePanel) {
+      panel = (
+        <DecadePanel
+          locale={locale}
+          defaultValue={value}
+          rootPrefixCls={prefixCls}
+          onSelect={this.onDecadeSelect}
         />
       );
     }

diff --git a/src/month/MonthPanel.jsx b/src/month/MonthPanel.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import YearPanel from '../year/YearPanel';
 import MonthTable from './MonthTable';
 
 function goYear(direction) {
@@ -47,14 +46,6 @@ const MonthPanel = createReactClass({
     }
   },
 
-  onYearPanelSelect(current) {
-    this.setState({
-      showYearPanel: 0,
-    });
-    this.setAndChangeValue(current);
-  },
-
-
   setAndChangeValue(value) {
     this.setValue(value);
     this.props.onChange(value);
@@ -73,12 +64,6 @@ const MonthPanel = createReactClass({
     }
   },
 
-  showYearPanel() {
-    this.setState({
-      showYearPanel: 1,
-    });
-  },
-
   render() {
     const props = this.props;
     const value = this.state.value;
@@ -87,15 +72,6 @@ const MonthPanel = createReactClass({
     const locale = props.locale;
     const year = value.year();
     const prefixCls = this.prefixCls;
-    let yearPanel;
-    if (this.state.showYearPanel) {
-      yearPanel = (<YearPanel
-        locale={locale}
-        value={value}
-        rootPrefixCls={props.rootPrefixCls}
-        onSelect={this.onYearPanelSelect}
-      />);
-    }
     return (
       <div className={prefixCls} style={props.style}>
         <div>
@@ -110,7 +86,7 @@ const MonthPanel = createReactClass({
             <a
               className={`${prefixCls}-year-select`}
               role="button"
-              onClick={this.showYearPanel}
+              onClick={props.onYearPanelShow}
               title={locale.yearSelect}
             >
               <span className={`${prefixCls}-year-select-content`}>{year}</span>
@@ -136,7 +112,6 @@ const MonthPanel = createReactClass({
             />
           </div>
         </div>
-        {yearPanel}
       </div>);
   },
 });

diff --git a/src/year/YearPanel.jsx b/src/year/YearPanel.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import DecadePanel from '../decade/DecadePanel';
 const ROW = 4;
 const COL = 3;
 
@@ -30,16 +29,6 @@ class YearPanel extends React.Component {
     };
     this.nextDecade = goYear.bind(this, 10);
     this.previousDecade = goYear.bind(this, -10);
-    ['showDecadePanel', 'onDecadePanelSelect'].forEach(method => {
-      this[method] = this[method].bind(this);
-    });
-  }
-
-  onDecadePanelSelect(current) {
-    this.setState({
-      value: current,
-      showDecadePanel: 0,
-    });
   }
 
   years() {
@@ -64,13 +53,6 @@ class YearPanel extends React.Component {
     }
     return years;
   }
-
-  showDecadePanel() {
-    this.setState({
-      showDecadePanel: 1,
-    });
-  }
-
   render() {
     const props = this.props;
     const value = this.state.value;
@@ -115,16 +97,6 @@ class YearPanel extends React.Component {
       return (<tr key={index} role="row">{tds}</tr>);
     });
 
-    let decadePanel;
-    if (this.state.showDecadePanel) {
-      decadePanel = (<DecadePanel
-        locale={locale}
-        value={value}
-        rootPrefixCls={props.rootPrefixCls}
-        onSelect={this.onDecadePanelSelect}
-      />);
-    }
-
     return (
       <div className={this.prefixCls}>
         <div>
@@ -138,7 +110,7 @@ class YearPanel extends React.Component {
             <a
               className={`${prefixCls}-decade-select`}
               role="button"
-              onClick={this.showDecadePanel}
+              onClick={props.onDecadePanelShow}
               title={locale.decadeSelect}
             >
               <span className={`${prefixCls}-decade-select-content`}>
@@ -162,7 +134,6 @@ class YearPanel extends React.Component {
             </table>
           </div>
         </div>
-        {decadePanel}
       </div>);
   }
 }