Fix inconsistencies caused by external mutations to element size.

Added example. TODO test suite

Author: STRML

lib/Resizable.jsx

@@ -39,6 +39,16 @@ var Resizable = module.exports = React.createClass({
     };
   },
 
+  componentWillReceiveProps: function(props) {
+    if (!this.state.resizing) {
+      this.setState({
+        initialWidth: props.width,
+        initialHeight: props.height
+      });
+      this.refs.draggable.resetState();
+    }
+  },
+
   constraintsToBounds() {
     var p = this.props;
     var mins = p.minConstraints || p.handleSize;
@@ -62,11 +72,17 @@ var Resizable = module.exports = React.createClass({
     var me = this;
     return function(e, {node, position}) {
       me.props[handlerName] && me.props[handlerName](e, {node, size: calcWH(me.state, position)});
+
+      if (handlerName === 'onResizeStart') {
+        me.setState({resizing: true});
+      } else if (handlerName === 'onResizeStop') {
+        me.setState({resizing: false});
+      }
     };
   },
 
   render() {
-    var p = this.props;
+    var p = this.props, s = this.state;
 
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
@@ -77,6 +93,7 @@ var Resizable = module.exports = React.createClass({
         p.children.props.children,
         <Draggable
           {...p.draggableOpts}
+          ref="draggable"
           onStop={this.resizeHandler('onResizeStop')}
           onStart={this.resizeHandler('onResizeStart')}
           onDrag={this.resizeHandler('onResize')}

package.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "object-assign": "^2.0.0",
-    "react-draggable": "^0.8.0"
+    "react-draggable": "^0.8.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

test/TestLayout.jsx

@@ -4,16 +4,35 @@ typeof window !== "undefined" && (window.React = React); // for devtools
 typeof window !== "undefined" && (window.Perf = React.addons.Perf); // for devtools
 var _ = require('lodash');
 var ResizableBox = require('../lib/ResizableBox.jsx');
+var Resizable = require('../lib/Resizable.jsx');
 require('style!css!../css/styles.css');
 
 var TestLayout = module.exports = React.createClass({
   displayName: 'TestLayout',
 
+  getInitialState() {
+    return {width: 200, height: 200};
+  },
+
+  onClick() {
+    this.setState({width: 200, height: 200})
+  },
+
+  onResize(event, {element, size}) {
+    this.setState({width: size.width, height: size.height});
+  },
+
   render() {
     return (
       <div>
+        <button onClick={this.onClick} style={{'marginBottom': '10px'}}>Reset first element's width/height</button>
+        <Resizable className="box" height={this.state.height} width={this.state.width} onResize={this.onResize}>
+          <div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
+            <span className="text">{"Raw use of <Resizable> element. 200x200, no constraints."}</span>
+          </div>
+        </Resizable>
         <ResizableBox className="box" width={200} height={200}>
-          <span className="text">Resizable box, starting at 200x200, no constraints</span>
+          <span className="text">{"<ResizableBox>, same as above."}</span>
         </ResizableBox>
         <ResizableBox className="box" width={200} height={200} draggableOpts={{grid: [25, 25]}}>
           <span className="text">Resizable box that snaps to even intervals of 25px.</span>
@@ -30,6 +49,7 @@ var TestLayout = module.exports = React.createClass({
         <ResizableBox className="box" width={200} height={120} lockAspectRatio={true}>
           <span className="text">Resizable rectangle with a locked aspect ratio.</span>
         </ResizableBox>
+
       </div>
     );
   }