Revert "Merge pull request #1335 from getaroom/PureComponent-Upgrade"

This reverts commit f2536b6, reversing
changes made to ebf83a1.

.storybook/config.js

@@ -1,9 +1,4 @@
 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,14 +65,6 @@ 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 (Make sure when you import said file to your `app.js`, you import it after the `react-dates` styles):
 

package.json

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

src/components/CalendarDay.jsx

@@ -1,5 +1,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, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -9,7 +10,6 @@ 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,14 +48,17 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-/** @extends React.Component */
-class CalendarDay extends BaseClass {
+class CalendarDay extends React.Component {
   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) {
@@ -340,4 +343,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-}), { pureComponent: pureComponentAvailable })(CalendarDay);
+}))(CalendarDay);

src/components/CalendarMonth.jsx

@@ -2,6 +2,7 @@
 
 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';
@@ -21,7 +22,6 @@ 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,8 +90,7 @@ const defaultProps = {
   verticalBorderSpacing: undefined,
 };
 
-/** @extends React.Component */
-class CalendarMonth extends BaseClass {
+class CalendarMonth extends React.Component {
   constructor(props) {
     super(props);
 
@@ -133,6 +132,10 @@ class CalendarMonth extends BaseClass {
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentWillUnmount() {
     if (this.setMonthTitleHeightTimeout) {
       clearTimeout(this.setMonthTitleHeightTimeout);
@@ -274,4 +277,4 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingTop: 12,
     paddingBottom: 7,
   },
-}), { pureComponent: pureComponentAvailable })(CalendarMonth);
+}))(CalendarMonth);

src/components/CalendarMonthGrid.jsx

@@ -1,5 +1,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';
@@ -21,7 +22,6 @@ 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,8 +114,7 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
   return months;
 }
 
-/** @extends React.Component */
-class CalendarMonthGrid extends BaseClass {
+class CalendarMonthGrid extends React.Component {
   constructor(props) {
     super(props);
     const withoutTransitionMonths = props.orientation === VERTICAL_SCROLLABLE;
@@ -181,6 +180,10 @@ class CalendarMonthGrid extends BaseClass {
     });
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentDidUpdate() {
     const {
       isAnimating,
@@ -422,4 +425,4 @@ export default withStyles(({
   CalendarMonthGrid_month__hidden: {
     visibility: 'hidden',
   },
-}), { pureComponent: pureComponentAvailable })(CalendarMonthGrid);
+}))(CalendarMonthGrid);

src/components/CustomizableCalendarDay.jsx

@@ -1,5 +1,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, nonNegativeInteger, or } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -8,7 +9,6 @@ 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';
@@ -216,8 +216,7 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-/** @extends React.Component */
-class CustomizableCalendarDay extends BaseClass {
+class CustomizableCalendarDay extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -228,6 +227,10 @@ class CustomizableCalendarDay extends BaseClass {
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -370,4 +373,4 @@ export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-}), { pureComponent: pureComponentAvailable })(CustomizableCalendarDay);
+}))(CustomizableCalendarDay);

src/components/DateInput.jsx

@@ -7,7 +7,6 @@ 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,
@@ -78,8 +77,7 @@ const defaultProps = {
   isFocused: false,
 };
 
-/** @extends React.Component */
-class DateInput extends BaseClass {
+class DateInput extends React.Component {
   constructor(props) {
     super(props);
 
@@ -381,4 +379,4 @@ export default withStyles(({
     stroke: color.core.border,
     fill: 'transparent',
   },
-}), { pureComponent: pureComponentAvailable })(DateInput);
+}))(DateInput);

src/components/DateRangePicker.jsx

@@ -1,4 +1,5 @@
 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';
@@ -15,7 +16,6 @@ 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,8 +118,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-/** @extends React.Component */
-class DateRangePicker extends BaseClass {
+class DateRangePicker extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -164,6 +163,10 @@ class DateRangePicker extends BaseClass {
     this.isTouchDevice = isTouchDevice();
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentDidUpdate(prevProps) {
     const { focusedInput } = this.props;
     if (!prevProps.focusedInput && focusedInput && this.isOpened()) {
@@ -671,4 +674,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable })(DateRangePicker);
+}))(DateRangePicker);

src/components/DateRangePickerInput.jsx

@@ -10,7 +10,6 @@ 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';
@@ -397,4 +396,4 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable })(DateRangePickerInput);
+}))(DateRangePickerInput);

src/components/DateRangePickerInputController.jsx

@@ -20,8 +20,6 @@ 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,
@@ -133,8 +131,7 @@ const defaultProps = {
   isRTL: false,
 };
 
-/** @extends React.Component */
-export default class DateRangePickerInputController extends BaseClass {
+export default class DateRangePickerInputController extends React.Component {
   constructor(props) {
     super(props);
 

src/components/DayPicker.jsx

@@ -1,5 +1,6 @@
 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';
 
@@ -29,7 +30,6 @@ 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,8 +163,7 @@ export const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-/** @extends React.Component */
-class DayPicker extends BaseClass {
+class DayPicker extends React.Component {
   constructor(props) {
     super(props);
 
@@ -300,6 +299,10 @@ class DayPicker extends BaseClass {
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentWillUpdate() {
     const { transitionDuration } = this.props;
 
@@ -1239,4 +1242,4 @@ export default withStyles(({
       },
     }),
   },
-}), { pureComponent: pureComponentAvailable })(DayPicker);
+}))(DayPicker);

src/components/DayPickerKeyboardShortcuts.jsx

@@ -5,7 +5,6 @@ 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';
@@ -73,8 +72,7 @@ function getKeyboardShortcuts(phrases) {
   ];
 }
 
-/** @extends React.Component */
-class DayPickerKeyboardShortcuts extends BaseClass {
+class DayPickerKeyboardShortcuts extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -396,4 +394,4 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
       fill: color.core.grayLight,
     },
   },
-}), { pureComponent: pureComponentAvailable })(DayPickerKeyboardShortcuts);
+}))(DayPickerKeyboardShortcuts);

src/components/DayPickerNavigation.jsx

@@ -5,7 +5,6 @@ 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';
@@ -303,4 +302,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 42,
     fill: color.text,
   },
-}), { pureComponent: pureComponentAvailable })(DayPickerNavigation);
+}))(DayPickerNavigation);

src/components/DayPickerRangeController.jsx

@@ -28,7 +28,6 @@ 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,
@@ -174,8 +173,7 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   return phrases.chooseAvailableDate;
 };
 
-/** @extends React.Component */
-export default class DayPickerRangeController extends BaseClass {
+export default class DayPickerRangeController extends React.Component {
   constructor(props) {
     super(props);