Conditionally use PureComponent instead of Component

.storybook/config.js

@@ -1,4 +1,9 @@
 import React from 'react';
+if (process.env.NODE_ENV !== 'production') {
+  const { whyDidYouUpdate } = require('why-did-you-update');
+  whyDidYouUpdate(React);
+}
+
 import moment from 'moment';
 import aphroditeInterface from 'react-with-styles-interface-aphrodite';
 

README.md

@@ -65,6 +65,14 @@ Create a CSS file with the contents of `require.resolve('react-dates/lib/css/_da
 
 To see this in action, you can check out https://github.com/majapw/react-dates-demo which adds `react-dates` on top of a simple `create-react-app` setup.
 
+#### Overriding Base Class
+By default `react-dates` will use `PureComponent` conditionally if it is available.  However, it is possible to override this setting and use `Component` and `shouldComponentUpdate` instead. It is also possible to override the logic in `build/util/baseClass` if you know that you are using a React version with `PureComponent`.
+  ```javascript
+    import React from 'react';
+    export default React.PureComponent;
+    export const pureComponentAvailable = true;
+  ```
+
 #### Overriding styles
 Right now, the easiest way to tweak `react-dates` to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents:
 

package.json

@@ -107,7 +107,8 @@
     "sinon": "^6.1.5",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
-    "webpack": "^2.6.1"
+    "webpack": "^2.6.1",
+    "why-did-you-update": "^0.1.1"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",

src/components/CalendarDay.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -10,6 +9,7 @@ import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 import ModifiersShape from '../shapes/ModifiersShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 
@@ -48,17 +48,14 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-class CalendarDay extends React.Component {
+/** @extends React.Component */
+class CalendarDay extends BaseClass {
   constructor(...args) {
     super(...args);
 
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -339,4 +336,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-}))(CalendarDay);
+}), { pureComponent: pureComponentAvailable })(CalendarDay);

src/components/CalendarMonth.jsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -22,6 +21,7 @@ import toISODateString from '../utils/toISODateString';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -90,7 +90,8 @@ const defaultProps = {
   verticalBorderSpacing: undefined,
 };
 
-class CalendarMonth extends React.Component {
+/** @extends React.Component */
+class CalendarMonth extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -132,10 +133,6 @@ class CalendarMonth extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentWillUnmount() {
     if (this.setMonthTitleHeightTimeout) {
       clearTimeout(this.setMonthTitleHeightTimeout);
@@ -277,4 +274,4 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingTop: 12,
     paddingBottom: 7,
   },
-}))(CalendarMonth);
+}), { pureComponent: pureComponentAvailable })(CalendarMonth);

src/components/CalendarMonthGrid.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -22,6 +21,7 @@ import isNextMonth from '../utils/isNextMonth';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -114,7 +114,8 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
   return months;
 }
 
-class CalendarMonthGrid extends React.Component {
+/** @extends React.Component */
+class CalendarMonthGrid extends BaseClass {
   constructor(props) {
     super(props);
     const withoutTransitionMonths = props.orientation === VERTICAL_SCROLLABLE;
@@ -180,10 +181,6 @@ class CalendarMonthGrid extends React.Component {
     });
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate() {
     const {
       isAnimating,
@@ -425,4 +422,4 @@ export default withStyles(({
   CalendarMonthGrid_month__hidden: {
     visibility: 'hidden',
   },
-}))(CalendarMonthGrid);
+}), { pureComponent: pureComponentAvailable })(CalendarMonthGrid);

src/components/CustomizableCalendarDay.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -9,6 +8,7 @@ import moment from 'moment';
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 import DefaultTheme from '../theme/DefaultTheme';
@@ -212,7 +212,8 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-class CustomizableCalendarDay extends React.Component {
+/** @extends React.Component */
+class CustomizableCalendarDay extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -223,10 +224,6 @@ class CustomizableCalendarDay extends React.Component {
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -369,4 +366,4 @@ export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-}))(CustomizableCalendarDay);
+}), { pureComponent: pureComponentAvailable })(CustomizableCalendarDay);

src/components/DateInput.jsx

@@ -7,6 +7,7 @@ import isTouchDevice from 'is-touch-device';
 
 import getInputHeight from '../utils/getInputHeight';
 import openDirectionShape from '../shapes/OpenDirectionShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 import {
   OPEN_DOWN,
   OPEN_UP,
@@ -77,7 +78,8 @@ const defaultProps = {
   isFocused: false,
 };
 
-class DateInput extends React.Component {
+/** @extends React.Component */
+class DateInput extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -379,4 +381,4 @@ export default withStyles(({
     stroke: color.core.border,
     fill: 'transparent',
   },
-}))(DateInput);
+}), { pureComponent: pureComponentAvailable })(DateInput);

src/components/DateRangePicker.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import moment from 'moment';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
@@ -16,6 +15,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
@@ -118,7 +118,8 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-class DateRangePicker extends React.Component {
+/** @extends React.Component */
+class DateRangePicker extends BaseClass {
   constructor(props) {
     super(props);
     this.state = {
@@ -163,10 +164,6 @@ class DateRangePicker extends React.Component {
     this.isTouchDevice = isTouchDevice();
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { focusedInput } = this.props;
     if (!prevProps.focusedInput && focusedInput && this.isOpened()) {
@@ -674,4 +671,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}))(DateRangePicker);
+}), { pureComponent: pureComponentAvailable })(DateRangePicker);

src/components/DateRangePickerInput.jsx

@@ -10,6 +10,7 @@ import openDirectionShape from '../shapes/OpenDirectionShape';
 import DateInput from './DateInput';
 import IconPositionShape from '../shapes/IconPositionShape';
 import DisabledShape from '../shapes/DisabledShape';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 import RightArrow from './RightArrow';
 import LeftArrow from './LeftArrow';
@@ -396,4 +397,4 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}))(DateRangePickerInput);
+}), { pureComponent: pureComponentAvailable })(DateRangePickerInput);

src/components/DateRangePickerInputController.jsx

@@ -20,6 +20,8 @@ import toLocalizedDateString from '../utils/toLocalizedDateString';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
 
+import BaseClass from '../utils/baseClass';
+
 import {
   START_DATE,
   END_DATE,
@@ -131,7 +133,8 @@ const defaultProps = {
   isRTL: false,
 };
 
-export default class DateRangePickerInputController extends React.Component {
+/** @extends React.Component */
+export default class DateRangePickerInputController extends BaseClass {
   constructor(props) {
     super(props);
 

src/components/DayPicker.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
@@ -30,6 +29,7 @@ import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -163,7 +163,8 @@ export const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-class DayPicker extends React.Component {
+/** @extends React.Component */
+class DayPicker extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -299,10 +300,6 @@ class DayPicker extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentWillUpdate() {
     const { transitionDuration } = this.props;
 
@@ -1241,4 +1238,4 @@ export default withStyles(({
       },
     }),
   },
-}))(DayPicker);
+}), { pureComponent: pureComponentAvailable })(DayPicker);

src/components/DayPickerKeyboardShortcuts.jsx

@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import KeyboardShortcutRow from './KeyboardShortcutRow';
 import CloseButton from './CloseButton';
@@ -72,7 +73,8 @@ function getKeyboardShortcuts(phrases) {
   ];
 }
 
-class DayPickerKeyboardShortcuts extends React.Component {
+/** @extends React.Component */
+class DayPickerKeyboardShortcuts extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -394,4 +396,4 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
       fill: color.core.grayLight,
     },
   },
-}))(DayPickerKeyboardShortcuts);
+}), { pureComponent: pureComponentAvailable })(DayPickerKeyboardShortcuts);

src/components/DayPickerNavigation.jsx

@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 import LeftArrow from './LeftArrow';
 import RightArrow from './RightArrow';
@@ -302,4 +303,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     fill: color.text,
     display: 'block',
   },
-}))(DayPickerNavigation);
+}), { pureComponent: pureComponentAvailable })(DayPickerNavigation);

src/components/DayPickerRangeController.jsx

@@ -28,6 +28,7 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import BaseClass from '../utils/baseClass';
 
 import {
   START_DATE,
@@ -173,7 +174,8 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   return phrases.chooseAvailableDate;
 };
 
-export default class DayPickerRangeController extends React.Component {
+/** @extends React.Component */
+export default class DayPickerRangeController extends BaseClass {
   constructor(props) {
     super(props);