react-resizable - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

build/Resizable.js

@@ -19,4 +19,2 @@ 'use strict';
 
-var _reactDraggable2 = _interopRequireDefault(_reactDraggable);
-
 var _cloneElement = require('./cloneElement');
@@ -50,6 +48,4 @@
       resizing: false,
-      initialHeight: _this.props.height,
-      initialWidth: _this.props.width,
-      height: _this.props.height,
-      width: _this.props.width
+      width: _this.props.width, height: _this.props.height,
+      slackW: 0, slackH: 0
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -65,32 +61,7 @@ }
           width: nextProps.width,
-          height: nextProps.height,
-          initialWidth: nextProps.width,
-          initialHeight: nextProps.height
+          height: nextProps.height
         });
       }
     }
-
-    /**
-     * Convert our constraints into bounds for the <Draggable>.
-     * We have to use initialHeight/Width here because that's where the <Draggable>'s `0` is.
-     */
-
   }, {
-    key: 'constraintsToBounds',
-    value: function constraintsToBounds() {
-      var _props = this.props;
-      var minConstraints = _props.minConstraints;
-      var maxConstraints = _props.maxConstraints;
-      var _state = this.state;
-      var initialHeight = _state.initialHeight;
-      var initialWidth = _state.initialWidth;
-
-      return {
-        left: minConstraints[0] - initialWidth,
-        top: minConstraints[1] - initialHeight,
-        right: maxConstraints[0] - initialWidth,
-        bottom: maxConstraints[1] - initialHeight
-      };
-    }
-  }, {
     key: 'lockAspectRatio',
@@ -103,2 +74,52 @@ value: function lockAspectRatio(width, height, aspectRatio) {
 
+    // If you do this, be careful of constraints
+
+  }, {
+    key: 'runConstraints',
+    value: function runConstraints(width, height) {
+      var min = this.props.minConstraints;
+      var max = this.props.maxConstraints;
+
+
+      if (this.props.lockAspectRatio) {
+        var ratio = this.state.width / this.state.height;
+        height = width / ratio;
+        width = height * ratio;
+      }
+
+      if (!min && !max) return [width, height];
+
+      var oldW = width;
+      var oldH = height;
+
+      // Add slack to the values used to calculate bound position. This will ensure that if
+      // we start removing slack, the element won't react to it right away until it's been
+      // completely removed.
+
+      var _state = this.state;
+      var slackW = _state.slackW;
+      var slackH = _state.slackH;
+
+      width += slackW;
+      height += slackH;
+
+      if (min) {
+        width = Math.max(min[0], width);
+        height = Math.max(min[1], height);
+      }
+      if (max) {
+        width = Math.min(max[0], width);
+        height = Math.min(max[1], height);
+      }
+
+      // If the numbers changed, we must have introduced some slack. Record it for the next iteration.
+      slackW += oldW - width;
+      slackH += oldH - height;
+      if (slackW !== this.state.slackW || slackH !== this.state.slackH) {
+        this.setState({ slackW: slackW, slackH: slackH });
+      }
+
+      return [width, height];
+    }
+
     /**
@@ -118,4 +139,5 @@ * Wrapper around drag events to provide more useful data.
         var node = _ref.node;
-        var deltaX = _ref.deltaX;
-        var deltaY = _ref.deltaY;
+        var position = _ref.position;
+        var deltaX = position.deltaX;
+        var deltaY = position.deltaY;
 
@@ -125,2 +147,3 @@ var width = _this2.state.width + deltaX,
 
+        // Early return if no change
         var widthChanged = width !== _this2.state.width,
@@ -130,11 +153,13 @@ heightChanged = height !== _this2.state.height;
 
-        if (_this2.props.lockAspectRatio) {
-          var _lockAspectRatio = _this2.lockAspectRatio(width, height, _this2.state.width / _this2.state.height);
+        console.log({ width: width, height: height, slackW: _this2.state.slackW, slackH: _this2.state.slackH });
 
-          var _lockAspectRatio2 = _slicedToArray(_lockAspectRatio, 2);
+        var _runConstraints = _this2.runConstraints(width, height);
 
-          width = _lockAspectRatio2[0];
-          height = _lockAspectRatio2[1];
-        }
+        var _runConstraints2 = _slicedToArray(_runConstraints, 2);
 
+        width = _runConstraints2[0];
+        height = _runConstraints2[1];
+
+        console.log({ width: width, height: height, slackW: _this2.state.slackW, slackH: _this2.state.slackH });
+
         // Set the appropriate state for this handler.
@@ -147,2 +172,4 @@ var newState = {};
         } else {
+          // Early return if no change after constraints
+          if (width === _this2.state.width && height === _this2.state.height) return;
           newState.width = width;
@@ -170,10 +197,8 @@ newState.height = height;
         children: [p.children.props.children, _react2.default.createElement(
-          _reactDraggable2.default,
+          _reactDraggable.DraggableCore,
           _extends({}, p.draggableOpts, {
             ref: 'draggable',
-            axis: 'none',
             onStop: this.resizeHandler('onResizeStop'),
             onStart: this.resizeHandler('onResizeStart'),
-            onDrag: this.resizeHandler('onResize'),
-            bounds: this.constraintsToBounds()
+            onDrag: this.resizeHandler('onResize')
           }),
@@ -180,0 +205,0 @@ _react2.default.createElement('span', { className: 'react-resizable-handle' })

package.json

 {
   "name": "react-resizable",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "A component that is resizable with handles.",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

104591

increased by0.72%

Lines of code

2186

increased by0.69%

No dependency changes