react-resizable - npm Package Compare versions

Comparing version 1.7.5 to 1.8.0

.github/ISSUE_TEMPLATE.md

@@ -22,3 +22,3 @@ ### Thanks for opening an issue!
 If this is a bug report, please provide a reproduction of the issue by going to
-http://www.webpackbin.com/41YFBvekG.
+https://codesandbox.io/s/9229wz40yo?fontsize=14.
 Paste a link here to your working reproduction.

.github/PULL_REQUEST_TEMPLATE.md

 Thanks for submitting a pull request to React-Resizable!
 
-Please reference an open issue. If one has not been created, please create one along with a failing
-example or test case.
+Please reference an open issue. If one has not been created, please create one along with a failing example or test case.
 
 Please do not commit built files (`/dist`) to pull requests. They are built only at release.

build/Resizable.js

@@ -124,3 +124,3 @@ 'use strict';
 
-  Resizable.prototype.resizeHandler = function resizeHandler(handlerName) {
+  Resizable.prototype.resizeHandler = function resizeHandler(handlerName, axis) {
     var _this2 = this;
@@ -135,5 +135,13 @@
       // Axis restrictions
-      var canDragX = _this2.props.axis === 'both' || _this2.props.axis === 'x';
-      var canDragY = _this2.props.axis === 'both' || _this2.props.axis === 'y';
+      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
+      if (canDragX && axis[axis.length - 1] === 'w') {
+        deltaX = -deltaX;
+      }
+      if (canDragY && axis[0] === 'n') {
+        deltaY = -deltaY;
+      }
+
       // Update w/h
@@ -168,5 +176,6 @@ var width = _this2.state.width + (canDragX ? deltaX : 0);
       if (hasCb) {
+        // $FlowIgnore isn't refining this correctly to SyntheticEvent
         if (typeof e.persist === 'function') e.persist();
         _this2.setState(newState, function () {
-          return _this2.props[handlerName](e, { node: node, size: { width: width, height: height } });
+          return _this2.props[handlerName](e, { node: node, size: { width: width, height: height }, handle: axis });
         });
@@ -179,3 +188,17 @@ } else {
 
+  Resizable.prototype.renderResizeHandle = function renderResizeHandle(resizeHandle) {
+    var handle = this.props.handle;
+
+    if (handle) {
+      if (typeof handle === 'function') {
+        return handle(resizeHandle);
+      }
+      return handle;
+    }
+    return _react2.default.createElement('span', { className: 'react-resizable-handle react-resizable-handle-' + resizeHandle });
+  };
+
   Resizable.prototype.render = function render() {
+    var _this3 = this;
+
     // eslint-disable-next-line no-unused-vars
@@ -195,3 +218,4 @@ var _props = this.props,
         onResizeStart = _props.onResizeStart,
-        p = _objectWithoutProperties(_props, ['children', 'draggableOpts', 'width', 'height', 'handleSize', 'lockAspectRatio', 'axis', 'minConstraints', 'maxConstraints', 'onResize', 'onResizeStop', 'onResizeStart']);
+        resizeHandles = _props.resizeHandles,
+        p = _objectWithoutProperties(_props, ['children', 'draggableOpts', 'width', 'height', 'handleSize', 'lockAspectRatio', 'axis', 'minConstraints', 'maxConstraints', 'onResize', 'onResizeStop', 'onResizeStart', 'resizeHandles']);
 
@@ -203,15 +227,17 @@ var className = p.className ? p.className + ' react-resizable' : 'react-resizable';
     // Its original children (resizable's child's children), and
-    // A draggable handle.
+    // One or more draggable handles.
     return (0, _cloneElement2.default)(children, _extends({}, p, {
       className: className,
-      children: [children.props.children, _react2.default.createElement(
-        _reactDraggable.DraggableCore,
-        _extends({}, draggableOpts, {
-          key: 'resizableHandle',
-          onStop: this.resizeHandler('onResizeStop'),
-          onStart: this.resizeHandler('onResizeStart'),
-          onDrag: this.resizeHandler('onResize')
-        }),
-        _react2.default.createElement('span', { className: 'react-resizable-handle' })
-      )]
+      children: [children.props.children, resizeHandles.map(function (h) {
+        return _react2.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)
+        );
+      })]
     }));
@@ -239,5 +265,20 @@ };
 
+  // Custom resize handle
+  handle: _propTypes2.default.element,
+
   // If you change this, be sure to update your css
   handleSize: _propTypes2.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: _propTypes2.default.arrayOf(_propTypes2.default.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+
   // If true, will only allow width/height to move in lockstep
@@ -270,4 +311,5 @@ lockAspectRatio: _propTypes2.default.bool,
   minConstraints: [20, 20],
-  maxConstraints: [Infinity, Infinity]
+  maxConstraints: [Infinity, Infinity],
+  resizeHandles: ['se']
 };
 exports.default = Resizable;

build/ResizableBox.js

@@ -76,2 +76,3 @@ 'use strict';
     var _props = this.props,
+        handle = _props.handle,
         handleSize = _props.handleSize,
@@ -88,3 +89,4 @@ onResize = _props.onResize,
         height = _props.height,
-        props = _objectWithoutProperties(_props, ['handleSize', 'onResize', 'onResizeStart', 'onResizeStop', 'draggableOpts', 'minConstraints', 'maxConstraints', 'lockAspectRatio', 'axis', 'width', 'height']);
+        resizeHandles = _props.resizeHandles,
+        props = _objectWithoutProperties(_props, ['handle', 'handleSize', 'onResize', 'onResizeStart', 'onResizeStop', 'draggableOpts', 'minConstraints', 'maxConstraints', 'lockAspectRatio', 'axis', 'width', 'height', 'resizeHandles']);
 
@@ -94,2 +96,3 @@ return _react2.default.createElement(
       {
+        handle: handle,
         handleSize: handleSize,
@@ -105,3 +108,4 @@ width: this.state.width,
         lockAspectRatio: lockAspectRatio,
-        axis: axis
+        axis: axis,
+        resizeHandles: resizeHandles
       },
@@ -108,0 +112,0 @@ _react2.default.createElement('div', _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props))

CHANGELOG.md

 # Changelog
 
+### 1.8.0 (May 15 2019)
+
+- Added support for custom resize handles (https://github.com/STRML/react-resizable/pull/79)
+- Added support for resize handles on all corners (https://github.com/STRML/react-resizable/pull/191)
+
 ### 1.7.5 (Sep 26, 2017)
@@ -4,0 +9,0 @@

package.json

 {
   "name": "react-resizable",
-  "version": "1.7.5",
+  "version": "1.8.0",
   "description": "A component that is resizable with handles.",
@@ -38,4 +38,4 @@ "main": "index.js",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.2",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.6",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -46,6 +46,6 @@ "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.7.2",
+    "css-loader": "^2.1.1",
+    "eslint": "^5.16.0",
     "eslint-plugin-react": "^7.4.0",
-    "flow-bin": "^0.55.0",
+    "flow-bin": "^0.98.1",
     "lodash": "^4.3.0",
@@ -55,9 +55,9 @@ "pre-commit": "^1.1.2",
     "react-dom": "^16.0.0",
-    "style-loader": "^0.18.2",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "style-loader": "^0.23.1",
+    "webpack": "^4.31.0",
+    "webpack-dev-server": "^3.3.1"
   },
   "dependencies": {
     "prop-types": "15.x",
-    "react-draggable": "^2.2.6 || ^3.0.3"
+    "react-draggable": "^3.0.3"
   },
@@ -64,0 +64,0 @@ "peerDependencies": {

README.md

@@ -5,3 +5,3 @@ ### React-Resizable
 
-A simple widget that can be resized via a handle.
+A simple widget that can be resized via one or more handles.
 
@@ -54,2 +54,4 @@ You can either use the `<Resizable>` element directly, or use the much simpler `<ResizableBox>` element.
   height: number,
+  // Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument.
+  handle: ReactElement<any> | (resizeHandle: 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne') => ReactElement<any>,
   // If you change this, be sure to update your css
@@ -64,4 +66,5 @@ handleSize: [number, number] = [10, 10],
   onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object
+  draggableOpts?: ?Object,
+  resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
 };
 ```

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

41046

increased by16.93%

Number of package files

17

increased by6.25%

Lines of code

424

increased by25.82%

Number of lines in readme file

68

increased by4.62%

Dependency changes

• Updatedreact-draggable@^3.0.3