Merge pull request #6 from wojtekmaj/react-17

Implement compatibility with React 17

Author: wojtekmaj

package.json

@@ -40,7 +40,8 @@
     "lodash.once": "^4.1.1",
     "merge-class-names": "^1.1.1",
     "prop-types": "^15.6.0",
-    "react-clock": "^2.2.1"
+    "react-clock": "^2.2.1",
+    "react-lifecycles-compat": "^1.1.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

src/TimeInput.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import Divider from './Divider';
@@ -60,30 +60,46 @@ const removeUnwantedCharacters = str => str
   ))
   .join('');
 
-export default class TimeInput extends Component {
-  state = {
-    hour: null,
-    minute: null,
-    second: null,
-  }
-
-  componentWillMount() {
-    this.updateValues();
-  }
+export default class TimeInput extends PureComponent {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const nextState = {};
 
-  componentWillReceiveProps(nextProps) {
-    const { value: nextValue } = nextProps;
-    const { value } = this.props;
+    /**
+     * If isClockOpen flag has changed, we have to update it.
+     * It's saved in state purely for use in getDerivedStateFromProps.
+     */
+    if (nextProps.isClockOpen !== prevState.isClockOpen) {
+      nextState.isClockOpen = nextProps.isClockOpen;
+    }
 
+    /**
+     * If the next value is different from the current one  (with an exception of situation in
+     * which values provided are limited by minDate and maxDate so that the dates are the same),
+     * get a new one.
+     */
+    const nextValue = nextProps.value;
     if (
-      // Toggling clock visibility resets values
-      (nextProps.isClockOpen !== this.props.isClockOpen) ||
-      hoursAreDifferent(nextValue, value)
+      // Toggling calendar visibility resets values
+      nextState.isClockOpen || // Flag was toggled
+      hoursAreDifferent(nextValue, prevState.value)
     ) {
-      this.updateValues(nextProps);
+      if (nextValue) {
+        nextState.hour = getHours(nextValue);
+        nextState.minute = getMinutes(nextValue);
+        nextState.second = getSeconds(nextValue);
+      } else {
+        nextState.hour = null;
+        nextState.minute = null;
+        nextState.second = null;
+      }
+      nextState.value = nextValue;
     }
+
+    return nextState;
   }
 
+  state = {};
+
   /**
    * Gets current value in a desired format.
    */
@@ -97,8 +113,7 @@ export default class TimeInput extends Component {
    * Returns value type that can be returned with currently applied settings.
    */
   get valueType() {
-    const { maxDetail } = this.props;
-    return maxDetail;
+    return this.props.maxDetail;
   }
 
   get nativeValueParser() {
@@ -158,16 +173,6 @@ export default class TimeInput extends Component {
     };
   }
 
-  updateValues(props = this.props) {
-    const { value } = props;
-
-    this.setState({
-      hour: value ? getHours(value) : null,
-      minute: value ? getMinutes(value) : null,
-      second: value ? getSeconds(value) : null,
-    });
-  }
-
   onKeyDown = (event) => {
     switch (event.key) {
       case 'ArrowLeft': {

src/TimePicker.jsx

@@ -12,10 +12,19 @@ import { isTime } from './shared/propTypes';
 const allViews = ['hour', 'minute', 'second'];
 
 export default class TimePicker extends PureComponent {
-  state = {
-    isOpen: this.props.isOpen,
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isOpen !== prevState.propsIsOpen) {
+      return {
+        isOpen: nextProps.isOpen,
+        propsIsOpen: nextProps.isOpen,
+      };
+    }
+
+    return null;
   }
 
+  state = {};
+
   componentDidMount() {
     document.addEventListener('mousedown', this.onClick);
   }
@@ -24,14 +33,6 @@ export default class TimePicker extends PureComponent {
     document.removeEventListener('mousedown', this.onClick);
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { props } = this;
-
-    if (nextProps.isOpen !== props.isOpen) {
-      this.setState({ isOpen: nextProps.isOpen });
-    }
-  }
-
   onClick = (event) => {
     if (this.wrapper && !this.wrapper.contains(event.target)) {
       this.closeClock();

yarn.lock

@@ -3699,6 +3699,10 @@ react-dom@^16.3.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-lifecycles-compat@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.1.0.tgz#6641d0709bd5505329b5c90322147ef2d343485c"
+
 react-reconciler@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"