Rearchitecture of how modifiers are maintained and updated

Instead of passing down an object of modifier string => modifiers functions to each CalendarDay component and expecting the CalendarDay component to take care of updating itself, we now put the burden on the top of the tree instead of on the leaves. The previous model basically ended up meaning that whenever an interaction happened on an individual day, even a hover interaction, every single CalendarDay would have to recalculate its modifiers and rerender as a result. This was, as you can imagine, really god damn slow.

In this new model, the DayPickerRangeController maintains a map with the following structure:
```
{
  MONTH_ISO_1: {
    DAY_ISO_1: Set(['modifer_1', 'modifier_2', ...]),
    DAY_ISO_2: Set(['modifer_1', 'modifier_2', ...]),
    ...
  },
  ...
}
```
It passes this down the tree such that each `CalendarMonth` and each `CalendarDay` only gets the information that pertains to it. This means that the updating of these modifiers is also handled at the top-level and is done in the `componentWillReceiveProps`, `onDayMouseEnter`, and `onDayMouseLeave` methods of the `DayPickerRangeController`. Fortunately, this allows us to more finely tune which days get updated and speeds up the rerendering/updating process dramatically.

Author: Maja Wichrowska

constants.js

@@ -1,6 +1,7 @@
 module.exports = {
   DISPLAY_FORMAT: 'L',
   ISO_FORMAT: 'YYYY-MM-DD',
+  ISO_MONTH_FORMAT: 'YYYY-MM',
 
   START_DATE: 'startDate',
   END_DATE: 'endDate',

package.json

@@ -103,7 +103,6 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.4.1",
-    "array-includes": "^3.0.2",
     "classnames": "^2.2.5",
     "consolidated-events": "^1.0.1",
     "lodash.throttle": "^4.1.1",

src/components/CalendarDay.jsx

@@ -16,7 +16,7 @@ const propTypes = forbidExtraProps({
   day: momentPropTypes.momentObj,
   daySize: nonNegativeInteger,
   isOutsideDay: PropTypes.bool,
-  modifiers: PropTypes.object,
+  modifiers: PropTypes.instanceOf(Set),
   isFocused: PropTypes.bool,
   tabIndex: PropTypes.oneOf([0, -1]),
   onDayClick: PropTypes.func,
@@ -32,7 +32,7 @@ const defaultProps = {
   day: moment(),
   daySize: DAY_SIZE,
   isOutsideDay: false,
-  modifiers: {},
+  modifiers: new Set(),
   isFocused: false,
   tabIndex: -1,
   onDayClick() {},
@@ -44,10 +44,6 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-export function getModifiersForDay(modifiers, day) {
-  return day ? Object.keys(modifiers).filter(key => modifiers[key](day)) : [];
-}
-
 export default class CalendarDay extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
@@ -93,12 +89,9 @@ export default class CalendarDay extends React.Component {
 
     if (!day) return <td />;
 
-    const modifiersForDay = getModifiersForDay(modifiers, day);
-
     const className = cx('CalendarDay', {
       'CalendarDay--outside': isOutsideDay,
-    }, modifiersForDay.map(mod => `CalendarDay--${mod}`));
-
+    }, Array.from(modifiers, mod => `CalendarDay--${mod}`));
 
     const formattedDate = `${day.format('dddd')}, ${day.format('LL')}`;
 

src/components/CalendarMonth.jsx

@@ -15,6 +15,7 @@ import CalendarDay from './CalendarDay';
 
 import getCalendarMonthWeeks from '../utils/getCalendarMonthWeeks';
 import isSameDay from '../utils/isSameDay';
+import toISODateString from '../utils/toISODateString';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 
@@ -132,13 +133,13 @@ export default class CalendarMonth extends React.Component {
                     isOutsideDay={!day || day.month() !== month.month()}
                     tabIndex={isVisible && isSameDay(day, focusedDate) ? 0 : -1}
                     isFocused={isFocused}
-                    modifiers={modifiers}
                     key={dayOfWeek}
                     onDayMouseEnter={onDayMouseEnter}
                     onDayMouseLeave={onDayMouseLeave}
                     onDayClick={onDayClick}
                     renderDay={renderDay}
                     phrases={phrases}
+                    modifiers={modifiers[toISODateString(day)]}
                   />
                 ))}
               </tr>

src/components/CalendarMonthGrid.jsx

@@ -15,6 +15,8 @@ import CalendarMonth from './CalendarMonth';
 import isTransitionEndSupported from '../utils/isTransitionEndSupported';
 import getTransformStyles from '../utils/getTransformStyles';
 import getCalendarMonthWidth from '../utils/getCalendarMonthWidth';
+import toISOMonthString from '../utils/toISOMonthString';
+import isAfterDay from '../utils/isAfterDay';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 
@@ -113,7 +115,7 @@ export default class CalendarMonthGrid extends React.Component {
     let newMonths = months;
 
     if (hasMonthChanged && !hasNumberOfMonthsChanged) {
-      if (initialMonth.isAfter(this.props.initialMonth)) {
+      if (isAfterDay(initialMonth, this.props.initialMonth)) {
         newMonths = months.slice(1);
         newMonths.push(months[months.length - 1].clone().add(1, 'month'));
       } else {
@@ -208,13 +210,14 @@ export default class CalendarMonthGrid extends React.Component {
         {months.map((month, i) => {
           const isVisible =
             (i >= firstVisibleMonthIndex) && (i < firstVisibleMonthIndex + numberOfMonths);
+          const monthString = toISOMonthString(month);
           return (
             <CalendarMonth
-              key={month.format('YYYY-MM')}
+              key={monthString}
               month={month}
               isVisible={isVisible}
               enableOutsideDays={enableOutsideDays}
-              modifiers={modifiers}
+              modifiers={modifiers[monthString]}
               monthFormat={monthFormat}
               orientation={orientation}
               onDayMouseEnter={onDayMouseEnter}

src/components/DayPicker.jsx

@@ -23,6 +23,7 @@ import getTransformStyles from '../utils/getTransformStyles';
 import getCalendarMonthWidth from '../utils/getCalendarMonthWidth';
 import isTouchDevice from '../utils/isTouchDevice';
 import getActiveElement from '../utils/getActiveElement';
+import isDayVisible from '../utils/isDayVisible';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 
@@ -382,10 +383,6 @@ export default class DayPicker extends React.Component {
 
     if (e) e.preventDefault();
 
-    if (this.props.onPrevMonthClick) {
-      this.props.onPrevMonthClick(e);
-    }
-
     let translationValue =
       this.isVertical() ? this.getMonthHeightByIndex(0) : this.dayPickerWidth;
 
@@ -414,10 +411,6 @@ export default class DayPicker extends React.Component {
 
     if (e) e.preventDefault();
 
-    if (this.props.onNextMonthClick) {
-      this.props.onNextMonthClick(e);
-    }
-
     let translationValue =
       this.isVertical() ? -this.getMonthHeightByIndex(1) : -this.dayPickerWidth;
 
@@ -434,14 +427,14 @@ export default class DayPicker extends React.Component {
   }
 
   getFocusedDay(newMonth) {
-    const { getFirstFocusableDay } = this.props;
+    const { getFirstFocusableDay, numberOfMonths } = this.props;
 
     let focusedDate;
     if (getFirstFocusableDay) {
       focusedDate = getFirstFocusableDay(newMonth);
     }
 
-    if (newMonth && (!focusedDate || !this.isDayVisible(focusedDate, newMonth))) {
+    if (newMonth && (!focusedDate || !isDayVisible(focusedDate, newMonth, numberOfMonths))) {
       focusedDate = newMonth.clone().startOf('month');
     }
 
@@ -453,11 +446,13 @@ export default class DayPicker extends React.Component {
   }
 
   maybeTransitionNextMonth(newFocusedDate) {
-    const { focusedDate } = this.state;
+    const { numberOfMonths } = this.props;
+    const { currentMonth, focusedDate } = this.state;
 
     const newFocusedDateMonth = newFocusedDate.month();
     const focusedDateMonth = focusedDate.month();
-    if (newFocusedDateMonth !== focusedDateMonth && !this.isDayVisible(newFocusedDate)) {
+    const isNewFocusedDateVisible = isDayVisible(newFocusedDate, currentMonth, numberOfMonths);
+    if (newFocusedDateMonth !== focusedDateMonth && !isNewFocusedDateVisible) {
       this.onNextMonthClick(newFocusedDate);
       return true;
     }
@@ -466,11 +461,13 @@ export default class DayPicker extends React.Component {
   }
 
   maybeTransitionPrevMonth(newFocusedDate) {
-    const { focusedDate } = this.state;
+    const { numberOfMonths } = this.props;
+    const { currentMonth, focusedDate } = this.state;
 
     const newFocusedDateMonth = newFocusedDate.month();
     const focusedDateMonth = focusedDate.month();
-    if (newFocusedDateMonth !== focusedDateMonth && !this.isDayVisible(newFocusedDate)) {
+    const isNewFocusedDateVisible = isDayVisible(newFocusedDate, currentMonth, numberOfMonths);
+    if (newFocusedDateMonth !== focusedDateMonth && !isNewFocusedDateVisible) {
       this.onPrevMonthClick(newFocusedDate);
       return true;
     }
@@ -486,17 +483,6 @@ export default class DayPicker extends React.Component {
     });
   }
 
-  isDayVisible(day, newMonth) {
-    const { numberOfMonths } = this.props;
-    const { currentMonth } = this.state;
-
-    const month = newMonth || currentMonth;
-    const firstDayOfFirstMonth = month.clone().startOf('month');
-    const lastDayOfLastMonth = month.clone().add(numberOfMonths - 1, 'months').endOf('month');
-
-    return !day.isBefore(firstDayOfFirstMonth) && !day.isAfter(lastDayOfLastMonth);
-  }
-
   isHorizontal() {
     return this.props.orientation === HORIZONTAL_ORIENTATION;
   }
@@ -516,6 +502,11 @@ export default class DayPicker extends React.Component {
   }
 
   updateStateAfterMonthTransition() {
+    const {
+      onPrevMonthClick,
+      onNextMonthClick,
+    } = this.props;
+
     const {
       currentMonth,
       monthTransition,
@@ -528,8 +519,10 @@ export default class DayPicker extends React.Component {
 
     const newMonth = currentMonth.clone();
     if (monthTransition === PREV_TRANSITION) {
+      if (onPrevMonthClick) onPrevMonthClick();
       newMonth.subtract(1, 'month');
     } else if (monthTransition === NEXT_TRANSITION) {
+      if (onNextMonthClick) onNextMonthClick();
       newMonth.add(1, 'month');
     }