Merge pull request #3 from RSEnergyGroup/task/update-life-cycles

update lifecycle methods

Author: benheb

build/Resizable.js

@@ -48,12 +48,12 @@ var Resizable = function (_React$Component) {
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
-  Resizable.prototype.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+  Resizable.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
     // If parent changes height/width, set that in our state.
-    if (!this.state.resizing && (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {
+    if (!this.state.resizing && (prevProps.width !== this.props.width || prevProps.height !== this.props.height)) {
       this.setState({
-        width: nextProps.width,
-        height: nextProps.height
+        width: this.props.width,
+        height: this.props.height
       });
     }
   };
@@ -151,7 +151,7 @@ var Resizable = function (_React$Component) {
       }
       var prevClient = _this2.state.prevClient;
 
-      // Calculate true deltas, this is needed to fix an issue with react-draggable not providing 
+      // Calculate true deltas, this is needed to fix an issue with react-draggable not providing
       // correct deltas on move
 
       deltaX = prevClient[0] ? inverted ? prevClient[0] - clientX : clientX - prevClient[0] : deltaX;

build/ResizableBox.js

@@ -59,11 +59,11 @@ var ResizableBox = function (_React$Component) {
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
-  ResizableBox.prototype.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
+  ResizableBox.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.width !== this.props.width || prevProps.height !== this.props.height) {
       this.setState({
-        width: nextProps.width,
-        height: nextProps.height
+        width: this.props.width,
+        height: this.props.height
       });
     }
   };

lib/Resizable.js

@@ -116,13 +116,12 @@ export default class Resizable extends React.Component<Props, State> {
     prevClient: [null, null]
   };
 
-  UNSAFE_componentWillReceiveProps(nextProps: Object) {
+  componentDidUpdate(prevProps: Object) {
     // If parent changes height/width, set that in our state.
-    if (!this.state.resizing &&
-        (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {
+    if (!this.state.resizing && (prevProps.width !== this.props.width || prevProps.height !== this.props.height)) {
       this.setState({
-        width: nextProps.width,
-        height: nextProps.height
+        width: this.props.width,
+        height: this.props.height
       });
     }
   }
@@ -200,7 +199,7 @@ export default class Resizable extends React.Component<Props, State> {
       }
       const { prevClient } = this.state;
 
-      // Calculate true deltas, this is needed to fix an issue with react-draggable not providing 
+      // Calculate true deltas, this is needed to fix an issue with react-draggable not providing
       // correct deltas on move
       deltaX = prevClient[0] ? (inverted ? prevClient[0] - clientX : clientX - prevClient[0]) : deltaX;
       deltaY = prevClient[1] ? clientY - prevClient[1] : deltaY;
@@ -230,7 +229,7 @@ export default class Resizable extends React.Component<Props, State> {
         if (width === this.state.width && height === this.state.height) return;
         newState.width = width;
         newState.height = height;
-        
+
         // record client for next iteration
         newState.prevClient = [clientX, clientY];
       }

lib/ResizableBox.js

@@ -35,11 +35,11 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
     }
   };
 
-  UNSAFE_componentWillReceiveProps(nextProps: ResizableProps) {
-    if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
+  componentDidUpdate(prevProps: ResizableProps) {
+    if (prevProps.width !== this.props.width || prevProps.height !== this.props.height) {
       this.setState({
-        width: nextProps.width,
-        height: nextProps.height
+        width: this.props.width,
+        height: this.props.height
       });
     }
   }