Move off of react-draggable fork.

Uses new `bounds` option in react-draggable.
Also moved to React.cloneElement with cloneElement wrapper.

Author: STRML

README.md

@@ -12,9 +12,8 @@ See the example and associated code in [TestLayout](/test/TestLayout.jsx) and
 Make sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have
 problems with handle placement and visibility.
 
-This module depends on a fork of [mzabriskie's react-draggable](https://github.com/mzabriskie/react-draggable),
-hosted [here](https://github.com/strml/react-draggable). You can pass options directly to the underlying `Draggable`
-instance by using the prop `draggableOpts`. See the demo for more on this.
+You can pass options directly to the underlying `Draggable` instance by using the prop `draggableOpts`.
+See the [demo](/test/TestLayout.jsx) for more on this.
 
 
 ### Usage

css/styles.css

@@ -1,22 +1,24 @@
 .react-resizable {
   position: relative;
 }
-.react-draggable-active {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
 .react-resizable-handle.react-draggable {
   position: absolute;
   width: 20px;
   height: 20px;
+  bottom: 0;
+  right: 0;
   background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
   background-position: bottom right;
   padding: 0 3px 3px 0;
   background-repeat: no-repeat;
   background-origin: content-box;
   box-sizing: border-box;
   cursor: se-resize;
+  /* Since this handle is absolutely positioned, we don't want the
+     draggable transforms to actually move it */
+  transform: none !important;
+  -webkit-transform: none !important;
+  -ms-transform: none !important;
+  -o-transform: none !important;
+  -moz-transform: none !important;
 }

lib/Resizable.jsx

@@ -3,7 +3,7 @@ var React = require('react');
 var Draggable = require('react-draggable');
 var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
 var assign = require('object-assign');
-var cloneWithProps = require('react/lib/cloneWithProps');
+var cloneElement = require('./cloneElement');
 
 var Resizable = module.exports = React.createClass({
   displayName: 'Resizable',
@@ -31,12 +31,24 @@ var Resizable = module.exports = React.createClass({
     };
   },
 
-  minConstraints() {
-    return parseConstraints(this.props.minConstraints, this.props.handleSize) || this.props.handleSize;
+  getInitialState: function() {
+    return {
+      bounds: this.constraintsToBounds(),
+      initialWidth: this.props.width,
+      initialHeight: this.props.height
+    };
   },
 
-  maxConstraints() {
-    return parseConstraints(this.props.maxConstraints, this.props.handleSize);
+  constraintsToBounds() {
+    var p = this.props;
+    var mins = p.minConstraints || p.handleSize;
+    var maxes = p.maxConstraints || [Infinity, Infinity];
+    return {
+      left: mins[0] - p.width,
+      top: mins[1] - p.height,
+      right: maxes[0] - p.width,
+      bottom: maxes[1] - p.height
+    };
   },
 
 
@@ -48,8 +60,8 @@ var Resizable = module.exports = React.createClass({
    */
   resizeHandler(handlerName) {
     var me = this;
-    return function(e, {element, position}) {
-      me.props[handlerName] && me.props[handlerName](e, {element, size: calcWH(position, me.props.handleSize)});
+    return function(e, {node, position}) {
+      me.props[handlerName] && me.props[handlerName](e, {node, size: calcWH(me.state, position)});
     };
   },
 
@@ -60,18 +72,15 @@ var Resizable = module.exports = React.createClass({
     // We are then defining its children as:
     // Its original children (resizable's child's children), and
     // A draggable handle.
-    return cloneWithProps(p.children, assign({}, p, {
+    return cloneElement(p.children, assign({}, p, {
       children: [
         p.children.props.children,
         <Draggable
           {...p.draggableOpts}
-          start={{x: p.width - 20, y: p.height - 20}}
-          moveOnStartChange={true}
           onStop={this.resizeHandler('onResizeStop')}
           onStart={this.resizeHandler('onResizeStart')}
           onDrag={this.resizeHandler('onResize')}
-          minConstraints={this.minConstraints()}
-          maxConstraints={this.maxConstraints()}
+          bounds={this.state.bounds}
           >
           <span className="react-resizable-handle" />
         </Draggable>
@@ -81,27 +90,11 @@ var Resizable = module.exports = React.createClass({
 });
 
 /**
- * Parse left and top coordinates; we have to add the handle size to get the full picture.
+ * Parse left and top coordinates.
  * @param  {Number} options.left Left coordinate.
  * @param  {Number} options.top  Top coordinate.
- * @param  {Array}  handleSize   Handle data.
  * @return {Object}              Coordinates
  */
-function calcWH({left, top}, handleSize) {
-  return {width: left + handleSize[0], height: top + handleSize[1]};
-}
-
-/**
- * Constraints must be subtracted by the size of the handle to work properly.
- * This has a side-effect of effectively limiting the minimum size to the handleSize,
- * which IMO is fine.
- * @param  {Array} constraints Constraints array.
- * @param  {Array} handleSize  Handle size array.
- * @return {Array}             Transformed constraints.
- */
-function parseConstraints(constraints, handleSize) {
-  if (!constraints) return;
-  return constraints.map(function(c, i) {
-    return c - handleSize[i];
-  });
+function calcWH({initialWidth, initialHeight}, {left, top}) {
+  return {width: initialWidth + left, height: initialHeight + top};
 }

lib/ResizableBox.jsx

@@ -15,8 +15,7 @@ var ResizableBox = module.exports = React.createClass({
   getDefaultProps() {
     return {
       lockAspectRatio: false,
-      handleSize: [20,20],
-      minConstraints: [20,20]
+      handleSize: [20,20]
     };
   },
 
@@ -37,10 +36,7 @@ var ResizableBox = module.exports = React.createClass({
       [width, height] = this.preserveAspectRatio(width, height);
     }
 
-    this.setState({
-      width: width,
-      height: height
-    });
+    this.setState({width, height});
   },
 
   // If you do this, be careful of constraints

lib/cloneElement.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var assign = require('object-assign');
+var React = require('react');
+
+module.exports = function cloneElement(element, props) {
+  if (props.style && element.props.style) {
+    props.style = assign({}, element.props.style, props.style);
+  }
+  if (props.className && element.props.className) {
+    props.className  = element.props.className + ' ' + props.className;
+  }
+  return React.cloneElement(element, props);
+}

package.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "object-assign": "^2.0.0",
-    "react-draggable": "strml/react-draggable#v0.3.1"
+    "react-draggable": "^0.7.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"