react-resizable - npm Package Compare versions

Comparing version 1.10.1 to 2.0.0

build/Resizable.js

@@ -8,4 +8,2 @@ "use strict";
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactDraggable = require("react-draggable");
@@ -15,2 +13,4 @@
 
+var _propTypes = require("./propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,8 +20,2 @@
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -33,5 +27,3 @@
 
-var Resizable =
-/*#__PURE__*/
-function (_React$Component) {
+var Resizable = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Resizable, _React$Component);
@@ -48,7 +40,8 @@
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      slackW: 0,
-      slackH: 0
-    });
+    _defineProperty(_assertThisInitialized(_this), "state", undefined);
 
+    _defineProperty(_assertThisInitialized(_this), "lastHandleRect", null);
+
+    _defineProperty(_assertThisInitialized(_this), "slack", null);
+
     return _this;
@@ -59,2 +52,6 @@ }
 
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.resetData();
+  };
+
   _proto.lockAspectRatio = function lockAspectRatio(width, height, aspectRatio) {
@@ -64,3 +61,7 @@ height = width / aspectRatio;
     return [width, height];
-  } // If you do this, be careful of constraints
+  };
+
+  _proto.resetData = function resetData() {
+    this.lastHandleRect = this.slack = null;
+  } // Clamp width and height within provided constraints
   ;
@@ -72,6 +73,8 @@
         max = _ref[1];
-    if (!min && !max) return [width, height]; // Fit width & height to aspect ratio
+    if (!min && !max) return [width, height]; // If constraining to min and max, we need to also fit width and height to aspect ratio.
 
     if (this.props.lockAspectRatio) {
-      if (height === this.props.height) {
+      var resizingHorizontally = height === this.props.height;
+
+      if (resizingHorizontally) {
         var ratio = this.props.width / this.props.height;
@@ -95,5 +98,6 @@ height = width / ratio;
 
-    var _this$state = this.state,
-        slackW = _this$state.slackW,
-        slackH = _this$state.slackH;
+    var _ref2 = this.slack || [0, 0],
+        slackW = _ref2[0],
+        slackH = _ref2[1];
+
     width += slackW;
@@ -110,15 +114,6 @@ height += slackH;
       height = Math.min(max[1], height);
-    } // If the numbers changed, we must have introduced some slack. Record it for the next iteration.
+    } // If the width or height 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
-      });
-    }
-
+    this.slack = [slackW + (oldW - width), slackH + (oldH - height)];
     return [width, height];
@@ -137,28 +132,46 @@ }
 
-    return function (e, _ref2) {
-      var node = _ref2.node,
-          deltaX = _ref2.deltaX,
-          deltaY = _ref2.deltaY;
-      deltaX /= _this2.props.transformScale;
-      deltaY /= _this2.props.transformScale; // Axis restrictions
+    return function (e, _ref3) {
+      var node = _ref3.node,
+          deltaX = _ref3.deltaX,
+          deltaY = _ref3.deltaY;
+      // Reset data in case it was left over somehow (should not be possible)
+      if (handlerName === 'onResizeStart') _this2.resetData(); // Axis restrictions
 
-      var canDragX = (_this2.props.axis === 'both' || _this2.props.axis === 'x') && ['n', 's'].indexOf(axis) === -1;
-      var canDragY = (_this2.props.axis === 'both' || _this2.props.axis === 'y') && ['e', 'w'].indexOf(axis) === -1; // reverse delta if using top or left drag handles
+      var canDragX = (_this2.props.axis === 'both' || _this2.props.axis === 'x') && axis !== 'n' && axis !== 's';
+      var canDragY = (_this2.props.axis === 'both' || _this2.props.axis === 'y') && axis !== 'e' && axis !== 'w'; // No dragging possible.
 
-      if (canDragX && axis[axis.length - 1] === 'w') {
-        deltaX = -deltaX;
-      }
+      if (!canDragX && !canDragY) return; // Decompose axis for later use
 
-      if (canDragY && axis[0] === 'n') {
-        deltaY = -deltaY;
-      } // Update w/h
+      var axisV = axis[0];
+      var axisH = axis[axis.length - 1]; // intentionally not axis[1], so that this catches axis === 'w' for example
+      // Track the element being dragged to account for changes in position.
+      // If a handle's position is changed between callbacks, we need to factor this in to the next callback.
+      // Failure to do so will cause the element to "skip" when resized upwards or leftwards.
 
+      var handleRect = node.getBoundingClientRect();
 
-      var width = _this2.props.width + (canDragX ? deltaX : 0);
-      var height = _this2.props.height + (canDragY ? deltaY : 0); // Early return if no change
+      if (_this2.lastHandleRect != null) {
+        // If the handle has repositioned on either axis since last render,
+        // we need to increase our callback values by this much.
+        // Only checking 'n', 'w' since resizing by 's', 'w' won't affect the overall position on page,
+        if (axisH === 'w') {
+          var deltaLeftSinceLast = handleRect.left - _this2.lastHandleRect.left;
+          deltaX += deltaLeftSinceLast;
+        }
 
-      var widthChanged = width !== _this2.props.width,
-          heightChanged = height !== _this2.props.height;
-      if (handlerName === 'onResize' && !widthChanged && !heightChanged) return;
+        if (axisV === 'n') {
+          var deltaTopSinceLast = handleRect.top - _this2.lastHandleRect.top;
+          deltaY += deltaTopSinceLast;
+        }
+      } // Storage of last rect so we know how much it has really moved.
 
+
+      _this2.lastHandleRect = handleRect; // Reverse delta if using top or left drag handles.
+
+      if (axisH === 'w') deltaX = -deltaX;
+      if (axisV === 'n') deltaY = -deltaY; // Update w/h by the deltas. Also factor in transformScale.
+
+      var width = _this2.props.width + (canDragX ? deltaX / _this2.props.transformScale : 0);
+      var height = _this2.props.height + (canDragY ? deltaY / _this2.props.transformScale : 0); // Run user-provided constraints.
+
       var _this2$runConstraints = _this2.runConstraints(width, height);
@@ -168,36 +181,26 @@
       height = _this2$runConstraints[1];
-      // Set the appropriate state for this handler.
-      var newState = {};
+      var dimensionsChanged = width !== _this2.props.width || height !== _this2.props.height; // Call user-supplied callback if present.
 
-      if (handlerName === 'onResizeStart') {// nothing
-      } else if (handlerName === 'onResizeStop') {
-        newState.slackW = newState.slackH = 0;
-      } else {
-        // Early return if no change after constraints
-        if (width === _this2.props.width && height === _this2.props.height) return;
-      }
+      var cb = typeof _this2.props[handlerName] === 'function' ? _this2.props[handlerName] : null; // Don't call 'onResize' if dimensions haven't changed.
 
-      var hasCb = typeof _this2.props[handlerName] === 'function';
+      var shouldSkipCb = handlerName === 'onResize' && !dimensionsChanged;
 
-      if (hasCb) {
-        // $FlowIgnore isn't refining this correctly to SyntheticEvent
+      if (cb && !shouldSkipCb) {
         if (typeof e.persist === 'function') e.persist();
+        cb(e, {
+          node: node,
+          size: {
+            width: width,
+            height: height
+          },
+          handle: axis
+        });
+      } // Reset internal data
 
-        _this2.setState(newState, function () {
-          return _this2.props[handlerName](e, {
-            node: node,
-            size: {
-              width: width,
-              height: height
-            },
-            handle: axis
-          });
-        });
-      } else {
-        _this2.setState(newState);
-      }
+
+      if (handlerName === 'onResizeStop') _this2.resetData();
     };
   };
 
-  _proto.renderResizeHandle = function renderResizeHandle(resizeHandle) {
+  _proto.renderResizeHandle = function renderResizeHandle(resizeHandleAxis) {
     var handle = this.props.handle;
@@ -207,3 +210,3 @@
       if (typeof handle === 'function') {
-        return handle(resizeHandle);
+        return handle(resizeHandleAxis);
       }
@@ -214,4 +217,4 @@
 
-    return _react.default.createElement("span", {
-      className: "react-resizable-handle react-resizable-handle-" + resizeHandle
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "react-resizable-handle react-resizable-handle-" + resizeHandleAxis
     });
@@ -223,21 +226,7 @@ };
 
-    // eslint-disable-next-line no-unused-vars
     var _this$props = this.props,
         children = _this$props.children,
         draggableOpts = _this$props.draggableOpts,
-        width = _this$props.width,
-        height = _this$props.height,
-        handleSize = _this$props.handleSize,
-        lockAspectRatio = _this$props.lockAspectRatio,
-        axis = _this$props.axis,
-        minConstraints = _this$props.minConstraints,
-        maxConstraints = _this$props.maxConstraints,
-        onResize = _this$props.onResize,
-        onResizeStop = _this$props.onResizeStop,
-        onResizeStart = _this$props.onResizeStart,
         resizeHandles = _this$props.resizeHandles,
-        transformScale = _this$props.transformScale,
-        p = _objectWithoutPropertiesLoose(_this$props, ["children", "draggableOpts", "width", "height", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"]);
-
-    var className = p.className ? p.className + " react-resizable" : 'react-resizable'; // What we're doing here is getting the child of this element, and cloning it with this element's props.
+        className = _this$props.className; // 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:
@@ -247,13 +236,13 @@ // Its original children (resizable's child's children), and
 
-    return (0, _utils.cloneElement)(children, _objectSpread({}, p, {
-      className: className,
-      children: [children.props.children, resizeHandles.map(function (h) {
-        return _react.default.createElement(_reactDraggable.DraggableCore, _extends({}, draggableOpts, {
-          key: "resizableHandle-" + h,
-          onStop: _this3.resizeHandler('onResizeStop', h),
-          onStart: _this3.resizeHandler('onResizeStart', h),
-          onDrag: _this3.resizeHandler('onResize', h)
-        }), _this3.renderResizeHandle(h));
-      })]
-    }));
+    return (0, _utils.cloneElement)(children, {
+      className: (className ? className + " " : '') + "react-resizable",
+      children: [].concat(children.props.children, resizeHandles.map(function (handleAxis) {
+        return /*#__PURE__*/_react.default.createElement(_reactDraggable.DraggableCore, _extends({}, draggableOpts, {
+          key: "resizableHandle-" + handleAxis,
+          onStop: _this3.resizeHandler('onResizeStop', handleAxis),
+          onStart: _this3.resizeHandler('onResizeStart', handleAxis),
+          onDrag: _this3.resizeHandler('onResize', handleAxis)
+        }), _this3.renderResizeHandle(handleAxis));
+      }))
+    });
   };
@@ -266,48 +255,3 @@
 
-_defineProperty(Resizable, "propTypes", {
-  //
-  // Required Props
-  //
-  // Require that one and only one child be present.
-  children: _propTypes.default.element.isRequired,
-  // Initial w/h
-  width: _propTypes.default.number.isRequired,
-  height: _propTypes.default.number.isRequired,
-  //
-  // Optional props
-  //
-  // Custom resize handle
-  handle: _propTypes.default.element,
-  // If you change this, be sure to update your css
-  handleSize: _propTypes.default.array,
-  // Defines which resize handles should be rendered (default: 'se')
-  // Allows for any combination of:
-  // 's' - South handle (bottom-center)
-  // 'w' - West handle (left-center)
-  // 'e' - East handle (right-center)
-  // 'n' - North handle (top-center)
-  // 'sw' - Southwest handle (bottom-left)
-  // 'nw' - Northwest handle (top-left)
-  // 'se' - Southeast handle (bottom-right)
-  // 'ne' - Northeast handle (top-center)
-  resizeHandles: _propTypes.default.arrayOf(_propTypes.default.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
-  transformScale: _propTypes.default.number,
-  // If true, will only allow width/height to move in lockstep
-  lockAspectRatio: _propTypes.default.bool,
-  // Restricts resizing to a particular axis (default: 'both')
-  // 'both' - allows resizing by width or height
-  // 'x' - only allows the width to be changed
-  // 'y' - only allows the height to be changed
-  // 'none' - disables resizing altogether
-  axis: _propTypes.default.oneOf(['both', 'x', 'y', 'none']),
-  // Min/max size
-  minConstraints: _propTypes.default.arrayOf(_propTypes.default.number),
-  maxConstraints: _propTypes.default.arrayOf(_propTypes.default.number),
-  // Callbacks
-  onResizeStop: _propTypes.default.func,
-  onResizeStart: _propTypes.default.func,
-  onResize: _propTypes.default.func,
-  // These will be passed wholesale to react-draggable's DraggableCore
-  draggableOpts: _propTypes.default.object
-});
+_defineProperty(Resizable, "propTypes", _propTypes.resizableProps);
 
@@ -314,0 +258,0 @@ _defineProperty(Resizable, "defaultProps", {

build/ResizableBox.js

@@ -6,12 +6,20 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Resizable = _interopRequireDefault(require("./Resizable"));
 
+var _propTypes = require("./propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -25,6 +33,3 @@
 
-// An example use of Resizable.
-var ResizableBox =
-/*#__PURE__*/
-function (_React$Component) {
+var ResizableBox = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ResizableBox, _React$Component);
@@ -50,4 +55,2 @@
       var size = data.size;
-      var width = size.width,
-          height = size.height;
 
@@ -102,38 +105,34 @@ if (_this.props.onResize) {
         resizeHandles = _this$props.resizeHandles,
-        props = _objectWithoutPropertiesLoose(_this$props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles"]);
+        style = _this$props.style,
+        transformScale = _this$props.transformScale,
+        props = _objectWithoutPropertiesLoose(_this$props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"]);
 
-    return _react.default.createElement(_Resizable.default, {
+    return /*#__PURE__*/React.createElement(_Resizable.default, {
+      axis: axis,
+      draggableOpts: draggableOpts,
       handle: handle,
       handleSize: handleSize,
-      width: this.state.width,
       height: this.state.height,
+      lockAspectRatio: lockAspectRatio,
+      maxConstraints: maxConstraints,
+      minConstraints: minConstraints,
       onResizeStart: onResizeStart,
       onResize: this.onResize,
       onResizeStop: onResizeStop,
-      draggableOpts: draggableOpts,
-      minConstraints: minConstraints,
-      maxConstraints: maxConstraints,
-      lockAspectRatio: lockAspectRatio,
-      axis: axis,
-      resizeHandles: resizeHandles
-    }, _react.default.createElement("div", _extends({
-      style: {
+      resizeHandles: resizeHandles,
+      transformScale: transformScale,
+      width: this.state.width
+    }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+      style: _objectSpread(_objectSpread({}, style), {}, {
         width: this.state.width + 'px',
         height: this.state.height + 'px'
-      }
-    }, props)));
+      })
+    })));
   };
 
   return ResizableBox;
-}(_react.default.Component);
+}(React.Component);
 
 exports.default = ResizableBox;
 
-_defineProperty(ResizableBox, "propTypes", {
-  height: _propTypes.default.number,
-  width: _propTypes.default.number
-});
-
-_defineProperty(ResizableBox, "defaultProps", {
-  handleSize: [20, 20]
-});
+_defineProperty(ResizableBox, "propTypes", _propTypes.resizableProps);

build/utils.js

@@ -12,3 +12,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -20,3 +20,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
   if (props.style && element.props.style) {
-    props.style = _objectSpread({}, element.props.style, {}, props.style);
+    props.style = _objectSpread(_objectSpread({}, element.props.style), props.style);
   }
@@ -28,3 +28,3 @@
 
-  return _react.default.cloneElement(element, props);
+  return /*#__PURE__*/_react.default.cloneElement(element, props);
 }

CHANGELOG.md

 # Changelog
 
+### 2.0.0
+
+- ⚠ Breaking Change!
+  - `<Resizable>` used to pass unknown props onto its child. For example:
+    ```js
+    <Resizable foo="bar"><div /></Resizable>
+    ```
+    In this example, when `<Resizable>` wrapped its child `div`, it would pass on `foo="bar"`. This has been removed.
+  - I do not expect meaningful breakage in the wild from this change, as the behavior in 1.x was unexpected and not generally useful.
+  - If this change breaks your use case, please pass props directly to the child component rather than expecting `<Resizable>` to pass it downward.
+  - See [#133](https://github.com/STRML/react-resizable/pull/133) for more details.
+- ➕ Feature: `<ResizableBox>` now takes a `style` prop which will be applied on the wrapping `<div>`. `width` and `height` in this prop are ignored.
+- 🐛 Bugfix: remove unknown Prop `handle` from div children in Resizable `React.cloneElement`. [#124](https://github.com/STRML/react-resizable/issues/124)
+- 🐛 Bugfix: Fix top and left resizing jerkiness. Thanks @conor-kelleher. [#136](https://github.com/STRML/react-resizable/pull/136)
+- ✏ Chore: Improved test suite. Please contribute tests for your use cases if you have the time, I would really appreciate it! Thanks very much, @Danielecina
+- ✏ Chore: Minor internal refactors and additional tests.
+- ✏ Chore: Additional examples.
+
+
 ### 1.10.1 (Nov 25, 2019)
@@ -7,29 +26,29 @@
 
-- Feat: Add `transformScale` prop [#115](https://github.com/STRML/react-resizable/pull/115)
-- Bugfix: Resolve `getDerivedStateFromProps` dev warning [#117](https://github.com/STRML/react-resizable/pull/117)
+- ➕ Feature: Add `transformScale` prop [#115](https://github.com/STRML/react-resizable/pull/115)
+- 🐛 Bugfix: Resolve `getDerivedStateFromProps` dev warning [#117](https://github.com/STRML/react-resizable/pull/117)
 
 ### 1.9.0 (Oct 24, 2019)
 
-- Fix resize with north/south handles when `lockAspectRatio=true` [#106](https://github.com/STRML/react-resizable/pull/106)
-- Remove deprecated React 16.9 lifecycle methods (`componentWillReceiveProps`) (https://github.com/STRML/react-resizable/pull/112/commits/541dee69b8e45d91a533855609472b481634edee)
-- Upgrade to babel 7
-- [Remove unused state inside `<Draggable>`](https://github.com/STRML/react-resizable/pull/112/commits/05693f63d6d221ad652f0f28af024cfb46a5f2df). This has not been needed for quite some time, fixes [some bugs](https://github.com/STRML/react-resizable/issues/99) and improves performance.
+- 🐛 Bugfix: Fix resize with north/south handles when `lockAspectRatio=true` [#106](https://github.com/STRML/react-resizable/pull/106)
+- ✏ Chore: Remove deprecated React 16.9 lifecycle methods (`componentWillReceiveProps`) (https://github.com/STRML/react-resizable/pull/112/commits/541dee69b8e45d91a533855609472b481634edee)
+- ✏ Chore: Upgrade to babel 7
+- ✏ Chore: [Remove unused state inside `<Draggable>`](https://github.com/STRML/react-resizable/pull/112/commits/05693f63d6d221ad652f0f28af024cfb46a5f2df). This has not been needed for quite some time, fixes [some bugs](https://github.com/STRML/react-resizable/issues/99) and improves performance.
 
 ### 1.8.0 (May 15, 2019)
 
-- Added support for custom resize handles [#79](https://github.com/STRML/react-resizable/pull/79)
-- Added support for resize handles on all corners [#191](https://github.com/STRML/react-resizable/pull/191)
+- ➕ Feature: Added support for custom resize handles [#79](https://github.com/STRML/react-resizable/pull/79)
+- ➕ Feature: Added support for resize handles on all corners [#191](https://github.com/STRML/react-resizable/pull/191)
 
 ### 1.7.5 (Sep 26, 2017)
 
-- Support for React 16 (no changes required, updated `peerDependencies`)
-- Minor dep updates.
+- ✏ Chore: Support for React 16 (no changes required, updated `peerDependencies`)
+- ✏ Chore: Minor dep updates.
 
 ### 1.7.4 (Sep 5, 2017)
 
-- Minor Flow & dependency updates.
+- ✏ Chore: Minor Flow & dependency updates.
 
 ### 1.7.3 (Aug 31, 2017)
 
-- Fix React deprecation warnings from `import *`
+- 🐛 Bugfix: React deprecation warnings from `import *`
   - https://github.com/facebook/react/issues/10583
@@ -39,3 +58,3 @@
 
-- Pkg: Add `react-draggable@3.0.0` to version range.
+- ✏ Chore: Pkg: Add `react-draggable@3.0.0` to version range.
   - This package is compatible with both `@2` and `@3` versions.
@@ -45,72 +64,72 @@
 
-- Bugfix: Some flow types were improperly specified.
+- 🐛 Bugfix: Some flow types were improperly specified.
 
 ### 1.7.0 (May 1, 2017)
 
-- Deprecation: `React.PropTypes` now deprecated in React 15.5, moved to `prop-types` package
-- Internal: Update devDeps, upgrade to webpack 2
-- Internal: Remove babel `stage-1` and `transform-flow-comments`, bring in only selected plugins, makes for leaner dev/build.
+- ⚠ Deprecation: `React.PropTypes` now deprecated in React 15.5, moved to `prop-types` package
+- ✏ Chore: Update devDeps, upgrade to webpack 2
+- ✏ Chore: Remove babel `stage-1` and `transform-flow-comments`, bring in only selected plugins, makes for leaner dev/build.
 
 ### 1.6.0 (Jan 23, 2017)
 
-- Feature: Allow restricting by axis. (#40, thanks @dnissley-al)
+- ➕ Feature: Allow restricting by axis. (#40, thanks @dnissley-al)
 
 ### 1.5.0 (Jan 23, 2017)
 
-- Bugfix: Persist SyntheticEvents when needed (#45, #46)
-- Feature: Add componentWillReceiveProps to `<ResizableBox>` (#44, thanks @JoaoMosmann)
+- 🐛 Bugfix: Persist SyntheticEvents when needed (#45, #46)
+- ➕ Feature: Add componentWillReceiveProps to `<ResizableBox>` (#44, thanks @JoaoMosmann)
 
 ### 1.4.6 (Dec 30, 2016)
 
-- Removed unused ref from `<Resizable>`.
-- Added development lockfile.
+- ✏ Chore: Removed unused ref from `<Resizable>`.
+- ✏ Chore: Added development lockfile.
 
 ### 1.4.5 (Sep 30, 2016)
 
-- Fix bad publish
+- 🐛 Bugfix: Fix bad publish
 
 ### 1.4.4 (Sep 30, 2016)
 
-- Bugfix: Minor flow errors
+- 🐛 Bugfix: Minor flow errors
 
 ### 1.4.3 (Sep 27, 2016)
 
-- Bugfix: Don't pass `onResize` in `<ResizableBox>`.
-- Bugfix: Fix new Flow errors (type parameters no longer optional).
+- 🐛 Bugfix: Don't pass `onResize` in `<ResizableBox>`.
+- 🐛 Bugfix: Fix new Flow errors (type parameters no longer optional).
 
 ### 1.4.2 (July 1, 2016)
 
-- Bugfix: Don't pass unknown props to underlying DOM element. Fixes React 15.2.0 warnings.
+- 🐛 Bugfix: Don't pass unknown props to underlying DOM element. Fixes React 15.2.0 warnings.
 
 ### 1.4.1 (May 23, 2016)
 
-- Bugfix: Resizable handle should have a `key` when injected. Fixes React warnings on custom components.
+- 🐛 Bugfix: Resizable handle should have a `key` when injected. Fixes React warnings on custom components.
 
 ### 1.4.0 (May 20, 2016)
 
-- Update to React-Draggable v2, which changed callback data structure.
+- ✏ Chore: Update to React-Draggable v2, which changed callback data structure.
 
 ### 1.3.4 (May 17, 2016)
 
-- Bugfix: Slack was not being reset on resizeStop. Fixes #34, #36.
-- Added `flow-bin` to devDeps.
+- 🐛 Bugfix: Slack was not being reset on resizeStop. Fixes #34, #36.
+- ✏ Chore: Added `flow-bin` to devDeps.
 
 ### 1.3.3 (Apr 19, 2016)
 
-- Enhancement: Add Flow comments.
+- ➕ Feature: Add Flow comments.
 
 ### 1.3.2 (Apr 8, 2016)
 
-- Bugfix: Prevent `width` and `height` from leaking to the underlying DOM element and being written.
+- 🐛 Bugfix: Prevent `width` and `height` from leaking to the underlying DOM element and being written.
 
 ### 1.3.1 (Apr 8, 2016)
 
-- Allow React v15 in peerdeps.
+- ✏ Chore: Allow React v15 in peerdeps.
 
 ### 1.3.0 (Mar 11, 2016)
 
-- Switch to ES2015 Loose Mode to fix IE9/10 issues.
-- Flow typing fixes.
-- Styling fixes to the demo page.
+- 🐛 Bugfix: Switch to ES2015 Loose Mode to fix IE9/10 issues.
+- 🐛 Bugfix: Flow typing fixes.
+- 🐛 Bugfix: Styling fixes to the demo page.
 
 > Changes before 1.3.0 were not logged. Please see the git commit history.

package.json

 {
   "name": "react-resizable",
-  "version": "1.10.1",
+  "version": "2.0.0",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
   "scripts": {
-    "lint": "eslint --ext .js,.jsx lib/ test/; flow",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint lib/ __tests__/ setupTests/; flow",
+    "test": "jest --coverage",
+    "unit": "jest --watch --verbose",
     "build": "bash build.sh",
@@ -13,3 +14,3 @@ "build-example": "webpack",
     "watch": "webpack --progress --watch",
-    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
     "validate": "yarn check",
@@ -46,7 +47,10 @@ "preversion": "npm run lint",
     "babel-loader": "^8.0.6",
-    "cross-env": "^6.0.3",
+    "cross-env": "^7.0.2",
     "css-loader": "^3.2.0",
-    "eslint": "^6.5.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^7.2.0",
     "eslint-plugin-react": "^7.16.0",
-    "flow-bin": "^0.110.0",
+    "flow-bin": "^0.126.1",
+    "jest": "^26.0.1",
     "lodash": "^4.17.15",
@@ -56,2 +60,3 @@ "pre-commit": "^1.1.2",
     "react-dom": "^16.10.2",
+    "react-test-renderer": "^16.11.0",
     "style-loader": "^1.0.0",
@@ -75,4 +80,5 @@ "webpack": "^4.41.2",
     "lint",
-    "validate"
+    "validate",
+    "test"
   ]
 }

README.md

@@ -9,3 +9,3 @@ ### React-Resizable
 
-See the example and associated code in [TestLayout](/test/TestLayout.js) and
+See the example and associated code in [TestLayout](/examples/TestLayout.js) and
 [ResizableBox](/lib/ResizableBox.js) for more details.
@@ -17,3 +17,3 @@
 You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`.
-See the [demo](/test/TestLayout.js) for more on this.
+See the [demo](/examples/TestLayout.js) for more on this.
 
@@ -70,1 +70,11 @@ ### Installation
 ```
+
+The following props can also be used on `<ResizableBox>`:
+
+```js
+{
+  style?: Object
+}
+```
+
+If a `width` or `height` is passed to `<ResizableBox>`'s `style` prop, it will be ignored as it is required for internal function.

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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

741027

increased by1604.29%

Number of package files

48

increased by182.35%

Lines of code

2615

increased by483.71%

Number of lines in readme file

77

increased by13.24%

Worsened metrics

Dev dependency count

26

increased by18.18%

Number of medium maintenance alerts

1

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes