react-rnd - npm Package Compare versions

Comparing version 10.0.0 to 10.1.0

lib/index.d.ts

@@ -74,2 +74,12 @@ import * as React from "react";
 };
+export declare type HandleComponent = {
+    top?: React.ReactElement<any>;
+    right?: React.ReactElement<any>;
+    bottom?: React.ReactElement<any>;
+    left?: React.ReactElement<any>;
+    topRight?: React.ReactElement<any>;
+    bottomRight?: React.ReactElement<any>;
+    bottomLeft?: React.ReactElement<any>;
+    topLeft?: React.ReactElement<any>;
+};
 export interface Props {
@@ -104,2 +114,3 @@ dragGrid?: Grid;
     resizeHandleWrapperStyle?: React.CSSProperties;
+    resizeHandleComponent?: HandleComponent;
     lockAspectRatio?: boolean | number;
@@ -106,0 +117,0 @@ lockAspectRatioExtraWidth?: number;

lib/index.es5.js

@@ -53,4 +53,6 @@ 'use strict';
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -222,3 +224,3 @@ }
             var offset = this.getOffsetFromParent();
-            this.props.onDrag(e, __assign({}, data, { x: data.x - offset.left, y: data.y - offset.top }));
+            this.props.onDrag(e, __assign(__assign({}, data), { x: data.x - offset.left, y: data.y - offset.top }));
         }
@@ -229,3 +231,3 @@ };
             var _a = this.getOffsetFromParent(), left = _a.left, top_3 = _a.top;
-            return this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_3 }));
+            return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: data.y + top_3 }));
         }
@@ -392,3 +394,3 @@ };
     Rnd.prototype.render = function () {
-        var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children, onResizeStart = _a.onResizeStart, onResize = _a.onResize, onResizeStop = _a.onResizeStop, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragStop = _a.onDragStop, resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "onMouseUp", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale"]);
+        var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children, onResizeStart = _a.onResizeStart, onResize = _a.onResize, onResizeStop = _a.onResizeStop, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragStop = _a.onDragStop, resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, resizeHandleComponent = _a.resizeHandleComponent, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "onMouseUp", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "resizeHandleComponent", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale"]);
         var defaultValue = this.props.default ? __assign({}, this.props.default) : undefined;
@@ -398,3 +400,3 @@ // Remove unknown props, see also https://reactjs.org/warnings/unknown-prop.html
         var cursorStyle = disableDragging || dragHandleClassName ? { cursor: "auto" } : { cursor: "move" };
-        var innerStyle = __assign({}, resizableStyle, cursorStyle, style);
+        var innerStyle = __assign(__assign(__assign({}, resizableStyle), cursorStyle), style);
         var _b = this.getOffsetFromParent(), left = _b.left, top = _b.top;
@@ -411,3 +413,3 @@ var draggablePosition;
         return (React.createElement(Draggable, { ref: this.refDraggable, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: pos, enableUserSelectHack: enableUserSelectHack, cancel: cancel, scale: scale },
-            React.createElement(reResizable.Resizable, __assign({}, resizableProps, { ref: this.refResizable, defaultSize: defaultValue, size: this.props.size, enable: enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.resizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.resizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses, scale: this.props.scale }), children)));
+            React.createElement(reResizable.Resizable, __assign({}, resizableProps, { ref: this.refResizable, defaultSize: defaultValue, size: this.props.size, enable: enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.resizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.resizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses, handleComponent: resizeHandleComponent, scale: this.props.scale }), children)));
     };
@@ -414,0 +416,0 @@ Rnd.defaultProps = {

lib/index.js

@@ -49,4 +49,6 @@ import { createElement, PureComponent } from 'react';
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -218,3 +220,3 @@ }
             var offset = this.getOffsetFromParent();
-            this.props.onDrag(e, __assign({}, data, { x: data.x - offset.left, y: data.y - offset.top }));
+            this.props.onDrag(e, __assign(__assign({}, data), { x: data.x - offset.left, y: data.y - offset.top }));
         }
@@ -225,3 +227,3 @@ };
             var _a = this.getOffsetFromParent(), left = _a.left, top_3 = _a.top;
-            return this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_3 }));
+            return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: data.y + top_3 }));
         }
@@ -388,3 +390,3 @@ };
     Rnd.prototype.render = function () {
-        var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children, onResizeStart = _a.onResizeStart, onResize = _a.onResize, onResizeStop = _a.onResizeStop, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragStop = _a.onDragStop, resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "onMouseUp", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale"]);
+        var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children, onResizeStart = _a.onResizeStart, onResize = _a.onResize, onResizeStop = _a.onResizeStop, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragStop = _a.onDragStop, resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, resizeHandleComponent = _a.resizeHandleComponent, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "onMouseUp", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "resizeHandleComponent", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale"]);
         var defaultValue = this.props.default ? __assign({}, this.props.default) : undefined;
@@ -394,3 +396,3 @@ // Remove unknown props, see also https://reactjs.org/warnings/unknown-prop.html
         var cursorStyle = disableDragging || dragHandleClassName ? { cursor: "auto" } : { cursor: "move" };
-        var innerStyle = __assign({}, resizableStyle, cursorStyle, style);
+        var innerStyle = __assign(__assign(__assign({}, resizableStyle), cursorStyle), style);
         var _b = this.getOffsetFromParent(), left = _b.left, top = _b.top;
@@ -407,3 +409,3 @@ var draggablePosition;
         return (createElement(Draggable, { ref: this.refDraggable, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: pos, enableUserSelectHack: enableUserSelectHack, cancel: cancel, scale: scale },
-            createElement(Resizable, __assign({}, resizableProps, { ref: this.refResizable, defaultSize: defaultValue, size: this.props.size, enable: enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.resizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.resizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses, scale: this.props.scale }), children)));
+            createElement(Resizable, __assign({}, resizableProps, { ref: this.refResizable, defaultSize: defaultValue, size: this.props.size, enable: enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.resizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.resizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses, handleComponent: resizeHandleComponent, scale: this.props.scale }), children)));
     };
@@ -410,0 +412,0 @@ Rnd.defaultProps = {

package.json

 {
   "name": "react-rnd",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "description": "",
@@ -24,3 +24,3 @@ "title": "react-rnd",
     "build": "npm-run-all --serial build:prod:* copy:flow",
-    "test": "NODE_ENV='test' tsc && avaron lib/index.test.js --renderer",
+    "test": "cross-env NODE_ENV='test' tsc && avaron lib/index.test.js --renderer",
     "copy:flow": "cpy src/index.js.flow lib && cpy src/index.js.flow lib --rename index.es5.js.flow",
@@ -44,10 +44,10 @@ "test:ci": "npm run flow && npm run build",
   "devDependencies": {
-    "@babel/cli": "7.4.4",
-    "@babel/core": "7.4.5",
-    "@babel/plugin-proposal-class-properties": "7.4.4",
-    "@babel/plugin-transform-modules-commonjs": "7.4.4",
+    "@babel/cli": "7.5.0",
+    "@babel/core": "7.5.4",
+    "@babel/plugin-proposal-class-properties": "7.5.0",
+    "@babel/plugin-transform-modules-commonjs": "7.5.0",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.3.3",
-    "@babel/traverse": "7.4.5",
-    "@babel/types": "7.4.4",
+    "@babel/traverse": "7.5.0",
+    "@babel/types": "7.5.0",
     "@emotion/core": "10.0.14",
@@ -81,3 +81,3 @@ "@storybook/addon-actions": "5.1.3",
     "react-test-renderer": "16.8.6",
-    "rollup": "1.16.4",
+    "rollup": "1.17.0",
     "rollup-plugin-babel": "4.3.3",
@@ -88,3 +88,3 @@ "rollup-plugin-commonjs": "10.0.1",
     "rollup-plugin-replace": "2.2.0",
-    "rollup-plugin-typescript2": "0.21.2",
+    "rollup-plugin-typescript2": "0.22.0",
     "rollup-watch": "4.3.1",
@@ -96,3 +96,4 @@ "sinon": "7.3.2",
     "tslint-react": "4.0.0",
-    "typescript": "3.5.2"
+    "typescript": "3.6.3",
+    "cross-env": "5.2.0"
   },
@@ -106,6 +107,6 @@ "files": [
   "dependencies": {
-    "re-resizable": "5.0.1",
-    "react-draggable": "3.3.0",
+    "re-resizable": "6.0.0",
+    "react-draggable": "4.0.3",
     "tslib": "1.10.0"
   }
 }

README.md

@@ -97,3 +97,3 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
   onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
-  onResize={(e, direction, ref, delta, position) => {
+  onResizeStop={(e, direction, ref, delta, position) => {
     this.setState({
@@ -257,2 +257,19 @@ width: ref.style.width,
 
+#### `resizeHandleComponent?`: HandleCompoent;`
+
+The `resizeHandleComponent` allows you to pass a custom React component as the resize handle.
+
+``` javascript
+type HandleComponent = {
+  top?: React.ReactElement<any>;
+  right?: React.ReactElement<any>;
+  bottom?: React.ReactElement<any>;
+  left?: React.ReactElement<any>;
+  topRight?: React.ReactElement<any>;
+  bottomRight?: React.ReactElement<any>;
+  bottomLeft?: React.ReactElement<any>;
+  topLeft?: React.ReactElement<any>;
+}
+```
+
 #### `resizeHandleWrapperClass?: string;`
@@ -496,2 +513,9 @@
 
+
+#### v10.0.0
+
+- Fix: Fix #526
+- Feat: Add `onMouseUp` callback. 
+- Feat: Use `React.pureComponent`
+
 #### v9.2.0
@@ -498,0 +522,0 @@

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

Number of lines in readme file

797

increased by3.1%

Worsened metrics

Total package byte prevSize

83494

decreased by-29.61%

Dev dependency count

51

increased by2%

Number of package files

9

decreased by-10%

Lines of code

1030

decreased by-43.93%

Dependency changes

• + Addedre-resizable@6.0.0(transitive)

• + Addedreact-draggable@4.0.3(transitive)

• - Removedre-resizable@5.0.1(transitive)

• - Removedreact-draggable@3.3.0(transitive)

• Updatedre-resizable@6.0.0

• Updatedreact-draggable@4.0.3