Remove Outdated react lifecycle components & updated the react version to 16.4.1 (patw0929#227)

* Bumping React version to 16.4.1 & removing deprecated lifecycle events

Author: superhit0

example/0.js

@@ -81,9 +81,9 @@
     "node-sass": "^4.2.0",
     "pre-commit": "^1.2.2",
     "raf": "^3.4.0",
-    "react": "^16.2.0",
+    "react": "^16.4.1",
     "react-dev-utils": "^0.4.2",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.4.1",
     "react-hot-loader": "^1.3.0",
     "recursive-readdir": "2.1.0",
     "rimraf": "2.5.4",

example/example.js

@@ -16,15 +16,15 @@ class CountryList extends Component {
     this.setDropdownPosition = this.setDropdownPosition.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.showDropdown) {
+  shouldComponentUpdate(nextProps) {
+    const shouldUpdate = !utils.shallowEquals(this.props, nextProps);
+
+    if (shouldUpdate && nextProps.showDropdown) {
       this.listElement.setAttribute('class', 'country-list v-hide');
       this.setDropdownPosition();
     }
-  }
 
-  shouldComponentUpdate(nextProps) {
-    return !utils.shallowEquals(this.props, nextProps);
+    return shouldUpdate;
   }
 
   setDropdownPosition() {

example/main.js

@@ -13,6 +13,25 @@ const mobileUserAgentRegexp =
   /Android.+Mobile|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
 
 class IntlTelInputApp extends Component {
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    let newState = null;
+
+    if (nextProps.value && prevState.value !== nextProps.value) {
+      newState = {
+        value: nextProps.value,
+      };
+    }
+
+    if (nextProps.disabled && prevState.disabled !== nextProps.disabled) {
+      newState = {
+        disabled: nextProps.disabled,
+      };
+    }
+
+    return newState;
+  }
+
   constructor(props) {
     super(props);
 
@@ -152,41 +171,29 @@ class IntlTelInputApp extends Component {
     document.addEventListener('keydown', this.handleDocumentKeyDown);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value) {
-      this.setState({
-        value: nextProps.value,
-      });
-    }
-
-    if (this.props.disabled !== nextProps.disabled) {
-      this.setState({
-        disabled: nextProps.disabled,
-      });
-    }
-
-    if (
-      typeof nextProps.customPlaceholder === 'function' &&
-      this.props.customPlaceholder !== nextProps.customPlaceholder
-    ) {
-      this.updatePlaceholder(nextProps);
-    }
-  }
-
-  componentWillUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     if (nextState.showDropdown) {
       document.addEventListener('keydown', this.handleDocumentKeyDown);
       this.bindDocumentClick();
     } else {
       document.removeEventListener('keydown', this.handleDocumentKeyDown);
       this.unbindDocumentClick();
     }
+
+    return true;
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.value !== prevProps.value) {
       this.updateFlagFromNumber(this.props.value);
     }
+
+    if (
+      typeof this.props.customPlaceholder === 'function' &&
+      prevProps.customPlaceholder !== this.props.customPlaceholder
+    ) {
+      this.updatePlaceholder(this.props);
+    }
   }
 
   componentWillUnmount() {

package.json

@@ -10,8 +10,10 @@ class RootModal extends Component {
     this._render();
   }
 
-  componentWillUpdate() {
+  shouldComponentUpdate() {
     this._render();
+
+    return false;
   }
 
   componentWillUnmount() {

src/components/CountryList.js

@@ -36,9 +36,6 @@ class DemoComponent extends Component {
       phone1: '',
       phone2: '',
     };
-  }
-
-  componentWillMount() {
     this.changePhone1 = this.changeHandler.bind(this, 'phone1');
     this.changePhone2 = this.changeHandler.bind(this, 'phone2');
     this.blurHandler1 = this.blurHandler.bind(this, 'phone1');