Refactor/remove draggable state (#112)

* refactor(Resizable): remove draggable state

This must have been a vestigal bit of state from before the Resizable/ResizableBox
refactor years ago. It is not actually needed and with the React 16.9 refactor
to remove CWRP, it became obvious it was actually not useful.

Fixes #99
Supersedes #100
Partially fixes #107, #110

* fix(ResizableBox): Fix 16.9 CWRP deprecation

Author: STRML

lib/Resizable.js

@@ -8,9 +8,7 @@ import type {Element as ReactElement, Node as ReactNode} from 'react';
 type Axis = 'both' | 'x' | 'y' | 'none';
 type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 type State = {
-  resizing: boolean,
-  width: number, height: number,
-  slackW: number, slackH: number
+  slackW: number, slackH: number,
 };
 type DragCallbackData = {
   node: HTMLElement,
@@ -109,22 +107,9 @@ export default class Resizable extends React.Component<Props, State> {
   };
 
   state: State = {
-    resizing: false,
-    width: this.props.width, height: this.props.height,
     slackW: 0, slackH: 0
   };
 
-  componentWillReceiveProps(nextProps: 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)) {
-      this.setState({
-        width: nextProps.width,
-        height: nextProps.height
-      });
-    }
-  }
-
   lockAspectRatio(width: number, height: number, aspectRatio: number): [number, number] {
     height = width / aspectRatio;
     width = height * aspectRatio;
@@ -134,23 +119,23 @@ export default class Resizable extends React.Component<Props, State> {
   // If you do this, be careful of constraints
   runConstraints(width: number, height: number): [number, number] {
     const [min, max] = [this.props.minConstraints, this.props.maxConstraints];
+    if (!min && !max) return [width, height];
 
+    // Fit width & height to aspect ratio
     if (this.props.lockAspectRatio) {
-      if (height === this.state.height) {
-        const ratio = this.state.width / this.state.height;
+      if (height === this.props.height) {
+        const ratio = this.props.width / this.props.height;
         height = width / ratio;
         width = height * ratio;
       } else {
         // Take into account vertical resize with N/S handles on locked aspect
         // ratio. Calculate the change height-first, instead of width-first
-        const ratio = this.state.height / this.state.width;
+        const ratio = this.props.height / this.props.width;
         width = height / ratio;
         height = width * ratio;
       }
     }
 
-    if (!min && !max) return [width, height];
-
     const [oldW, oldH] = [width, height];
 
     // Add slack to the values used to calculate bound position. This will ensure that if
@@ -201,27 +186,24 @@ export default class Resizable extends React.Component<Props, State> {
       }
 
       // Update w/h
-      let width = this.state.width + (canDragX ? deltaX : 0);
-      let height = this.state.height + (canDragY ? deltaY : 0);
+      let width = this.props.width + (canDragX ? deltaX : 0);
+      let height = this.props.height + (canDragY ? deltaY : 0);
 
       // Early return if no change
-      const widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
+      const widthChanged = width !== this.props.width, heightChanged = height !== this.props.height;
       if (handlerName === 'onResize' && !widthChanged && !heightChanged) return;
 
       [width, height] = this.runConstraints(width, height);
 
       // Set the appropriate state for this handler.
       const newState = {};
       if (handlerName === 'onResizeStart') {
-        newState.resizing = true;
+        // nothing
       } else if (handlerName === 'onResizeStop') {
-        newState.resizing = false;
         newState.slackW = newState.slackH = 0;
       } else {
         // Early return if no change after constraints
-        if (width === this.state.width && height === this.state.height) return;
-        newState.width = width;
-        newState.height = height;
+        if (width === this.props.width && height === this.props.height) return;
       }
 
       const hasCb = typeof this.props[handlerName] === 'function';

lib/ResizableBox.js

@@ -5,7 +5,10 @@ import Resizable from './Resizable';
 import type {Props as ResizableProps, ResizeCallbackData} from './Resizable';
 import type {Node as ReactNode} from 'react';
 
-type State = {width: number, height: number};
+type State = {
+  width: number, height: number,
+  propsWidth: number, propsHeight: number,
+};
 
 // An example use of Resizable.
 export default class ResizableBox extends React.Component<ResizableProps, State> {
@@ -21,8 +24,22 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
   state: State = {
     width: this.props.width,
     height: this.props.height,
+    propsWidth: this.props.width,
+    propsHeight: this.props.height,
   };
 
+  static getDerivedStateFromProps(props: ResizableProps, state: State) {
+    // If parent changes height/width, set that in our state.
+    if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
+      return {
+        width: props.width,
+        height: props.height,
+        propsWidth: props.width,
+        propsHeight: props.height,
+      };
+    }
+  }
+
   onResize = (e: SyntheticEvent<>, data: ResizeCallbackData) => {
     const {size} = data;
     const {width, height} = size;
@@ -35,15 +52,6 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
     }
   };
 
-  componentWillReceiveProps(nextProps: ResizableProps) {
-    if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
-      this.setState({
-        width: nextProps.width,
-        height: nextProps.height
-      });
-    }
-  }
-
   render(): ReactNode {
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the child component