Merge pull request mui#1905 from oliviertassinari/date-picker-perf

[DatePicker] Drastically improve perf
tyfoo · Oct 20, 2015 · c5e82ee · c5e82ee
2 parents 294071f + e72772b
commit c5e82ee
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 35 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -16,6 +16,7 @@
     "codemirror": "^5.5.0",
     "history": "^1.11.1",
     "react-addons-create-fragment": "^0.14.0",
+    "react-addons-perf": "^0.14.0",
     "react-addons-pure-render-mixin": "^0.14.0",
     "react-addons-transition-group": "^0.14.0",
     "react-addons-update": "^0.14.0",

diff --git a/docs/src/app/app.jsx b/docs/src/app/app.jsx
@@ -5,8 +5,9 @@ const AppRoutes = require('./app-routes.jsx');
 const injectTapEventPlugin = require('react-tap-event-plugin');
 const createHistory = require('history/lib/createHashHistory');
 
-//Needed for React Developer Tools
+//Helpers for debugging
 window.React = React;
+window.Perf = require('react-addons-perf');
 
 //Needed for onTouchTap
 //Can go away when react 1.0 release

diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx
@@ -41,7 +41,6 @@ const Calendar = React.createClass({
     maxDate: React.PropTypes.object,
     onDayTouchTap: React.PropTypes.func,
     shouldDisableDate: React.PropTypes.func,
-    shouldShowMonthDayPickerFirst: React.PropTypes.bool,
   },
 
   windowListeners: {
@@ -54,15 +53,14 @@ const Calendar = React.createClass({
       initialDate: new Date(),
       minDate: DateTime.addYears(new Date(), -100),
       maxDate: DateTime.addYears(new Date(), 100),
-      shouldShowMonthDayPickerFirst: true,
     };
   },
 
   getInitialState() {
     return {
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
       displayDate: DateTime.getFirstDayOfMonth(this.props.initialDate),
-      displayMonthDay: this.props.shouldShowMonthDayPickerFirst || true,
+      displayMonthDay: true,
       selectedDate: this.props.initialDate,
       transitionDirection: 'left',
       transitionEnter: true,
@@ -82,10 +80,6 @@ const Calendar = React.createClass({
         selectedDate: d,
       });
     }
-
-    if (nextProps.shouldShowMonthDayPickerFirst) {
-      this.setState({displayMonthDay: nextProps.shouldShowMonthDayPickerFirst});
-    }
   },
 
   render() {
@@ -138,18 +132,10 @@ const Calendar = React.createClass({
       },
     };
 
-    if (this.state.displayMonthDay) {
-      styles.yearContainer.display = 'none';
-    }
-    else {
-      styles.calendarContainer.display = 'none';
-    }
-
     const weekTitleDayStyle = this.prepareStyles(styles.weekTitleDay);
 
     return (
       <ClearFix style={this.mergeStyles(styles.root)}>
-
         <DateDisplay
           disableYearSelection={this.props.disableYearSelection}
           style={styles.dateDisplay}
@@ -159,14 +145,13 @@ const Calendar = React.createClass({
           monthDaySelected={this.state.displayMonthDay}
           mode={this.props.mode}
           weekCount={weekCount} />
-
+        {this.state.displayMonthDay &&
         <div style={this.prepareStyles(styles.calendarContainer)}>
           <CalendarToolbar
             displayDate={this.state.displayDate}
             onMonthChange={this._handleMonthChange}
             prevMonth={toolbarInteractions.prevMonth}
             nextMonth={toolbarInteractions.nextMonth} />
-
           <ClearFix
             elementType="ul"
             style={styles.weekTitle}>
@@ -178,7 +163,6 @@ const Calendar = React.createClass({
             <li style={weekTitleDayStyle}>F</li>
             <li style={weekTitleDayStyle}>S</li>
           </ClearFix>
-
           <SlideInTransitionGroup
             direction={this.state.transitionDirection}>
             <CalendarMonth
@@ -191,12 +175,11 @@ const Calendar = React.createClass({
               maxDate={this.props.maxDate}
               shouldDisableDate={this.props.shouldDisableDate} />
           </SlideInTransitionGroup>
-        </div>
-
+        </div>}
+        {!this.state.displayMonthDay &&
         <div style={this.prepareStyles(styles.yearContainer)}>
           {this._yearSelector()}
-        </div>
-
+        </div>}
       </ClearFix>
     );
   },
@@ -291,11 +274,15 @@ const Calendar = React.createClass({
   },
 
   _handleMonthDayClick() {
-    this.setState({displayMonthDay: true});
+    this.setState({
+      displayMonthDay: true,
+    });
   },
 
   _handleYearClick() {
-    this.setState({displayMonthDay: false});
+    this.setState({
+      displayMonthDay: false,
+    });
   },
 
   _handleWindowKeyDown(e) {

diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx
@@ -1,5 +1,6 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
+const ContextPure = require('../mixins/context-pure');
 const StylePropable = require('../mixins/style-propable');
 const WindowListenable = require('../mixins/window-listenable');
 const CssEvent = require('../utils/css-event');
@@ -12,7 +13,25 @@ const ThemeManager = require('../styles/theme-manager');
 
 const DatePickerDialog = React.createClass({
 
-  mixins: [StylePropable, WindowListenable],
+  mixins: [
+    StylePropable,
+    WindowListenable,
+    ContextPure,
+  ],
+
+  statics: {
+    getRelevantContextKeys(muiTheme) {
+      return {
+        buttonColor: muiTheme.datePicker.calendarTextColor,
+      };
+    },
+    getChildrenClasses() {
+      return [
+        Calendar,
+        Dialog,
+      ];
+    },
+  },
 
   contextTypes: {
     muiTheme: React.PropTypes.object,
@@ -49,7 +68,6 @@ const DatePickerDialog = React.createClass({
   getInitialState() {
     return {
       isCalendarActive: false,
-      showMonthDayPicker: true,
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
   },
@@ -69,10 +87,14 @@ const DatePickerDialog = React.createClass({
       ...other,
     } = this.props;
 
+    const {
+      calendarTextColor,
+    } = this.constructor.getRelevantContextKeys(this.state.muiTheme);
+
     let styles = {
       root: {
         fontSize: 14,
-        color: this.state.muiTheme.datePicker.calendarTextColor,
+        color: calendarTextColor,
       },
 
       dialogContent: {
@@ -128,7 +150,6 @@ const DatePickerDialog = React.createClass({
           minDate={this.props.minDate}
           maxDate={this.props.maxDate}
           shouldDisableDate={this.props.shouldDisableDate}
-          shouldShowMonthDayPickerFirst={this.state.showMonthDayPicker}
           showYearSelector={this.props.showYearSelector}
           mode={this.props.mode} />
       </Dialog>
@@ -173,7 +194,6 @@ const DatePickerDialog = React.createClass({
     CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this.refs.dialog), () => {
       this.setState({
         isCalendarActive: false,
-        showMonthDayPicker: true,
       });
     });
 
@@ -184,7 +204,6 @@ const DatePickerDialog = React.createClass({
     CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this.refs.dialog), () => {
       this.setState({
         isCalendarActive: false,
-        showMonthDayPicker: true,
       });
     });
 

diff --git a/src/date-picker/index.js b/src/date-picker/index.js
@@ -1,6 +1,4 @@
-
-
 module.exports = {
-      DatePicker: require('./date-picker'),
-      DatePickerDialog: require('./date-picker-dialog'),
+  DatePicker: require('./date-picker'),
+  DatePickerDialog: require('./date-picker-dialog'),
 };