Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-rnd - npm Package Compare versions
Comparing version 10.2.1 to 10.2.2
@@ -127,3 +127,2 @@ import * as React from "react"; | ||
| allowAnyClick?: boolean; | ||
| nodeRef?: React.Ref<typeof React.Component>; | ||
| scale?: number; | ||
@@ -156,2 +155,5 @@ [key: string]: any; | ||
| }; | ||
| resizableElement: { | ||
| current: HTMLDivElement | null; | ||
| }; | ||
| constructor(props: Props); | ||
@@ -158,0 +160,0 @@ componentDidMount(): void; |
@@ -89,2 +89,3 @@ 'use strict'; | ||
| _this.offsetFromParent = { left: 0, top: 0 }; | ||
| _this.resizableElement = { current: null }; | ||
| _this.refDraggable = function (c) { | ||
@@ -99,2 +100,3 @@ if (!c) | ||
| _this.resizable = c; | ||
| _this.resizableElement.current = c.resizable; | ||
| }; | ||
@@ -346,11 +348,21 @@ _this.state = { | ||
| Rnd.prototype.onResize = function (e, direction, elementRef, delta) { | ||
| if (/left/i.test(direction)) { | ||
| var x_1 = this.state.original.x - delta.width; | ||
| // INFO: Apply x position by resize to draggable. | ||
| this.draggable.setState({ x: x_1 }); | ||
| // INFO: Apply x and y position adjustments caused by resizing to draggable | ||
| var newPos = { x: this.state.original.x, y: this.state.original.y }; | ||
| var left = -delta.width; | ||
| var top = -delta.height; | ||
| var directions = ["top", "left", "topLeft", "bottomLeft", "topRight"]; | ||
| if (directions.indexOf(direction) !== -1) { | ||
| if (direction === "bottomLeft") { | ||
| newPos.x += left; | ||
| } | ||
| else if (direction === "topRight") { | ||
| newPos.y += top; | ||
| } | ||
| else { | ||
| newPos.x += left; | ||
| newPos.y += top; | ||
| } | ||
| } | ||
| if (/top/i.test(direction)) { | ||
| var y_1 = this.state.original.y - delta.height; | ||
| // INFO: Apply x position by resize to draggable. | ||
| this.draggable.setState({ y: y_1 }); | ||
| if (newPos.x !== this.draggable.state.x || newPos.y !== this.draggable.state.y) { | ||
| this.draggable.setState(newPos); | ||
| } | ||
@@ -406,3 +418,3 @@ this.updateOffsetFromParent(); | ||
| 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, resizeHandleComponent = _a.resizeHandleComponent, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, allowAnyClick = _a.allowAnyClick, nodeRef = _a.nodeRef, 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", "allowAnyClick", "nodeRef"]); | ||
| 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, allowAnyClick = _a.allowAnyClick, 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", "allowAnyClick"]); | ||
| var defaultValue = this.props.default ? __assign({}, this.props.default) : undefined; | ||
@@ -423,3 +435,3 @@ // Remove unknown props, see also https://reactjs.org/warnings/unknown-prop.html | ||
| var pos = this.resizing ? undefined : 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, allowAnyClick: allowAnyClick, nodeRef: { current: this.getSelfElement() } }, | ||
| 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, allowAnyClick: allowAnyClick, nodeRef: this.resizableElement }, | ||
| React.createElement(reResizable.Resizable, __assign({}, resizableProps, { ref: this.refResizable, defaultSize: defaultValue, size: this.props.size, enable: typeof enableResizing === "boolean" ? getEnableResizingByFlag(enableResizing) : 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))); | ||
@@ -426,0 +438,0 @@ }; |
@@ -83,2 +83,3 @@ import { createElement, PureComponent } from 'react'; | ||
| _this.offsetFromParent = { left: 0, top: 0 }; | ||
| _this.resizableElement = { current: null }; | ||
| _this.refDraggable = function (c) { | ||
@@ -93,2 +94,3 @@ if (!c) | ||
| _this.resizable = c; | ||
| _this.resizableElement.current = c.resizable; | ||
| }; | ||
@@ -340,11 +342,21 @@ _this.state = { | ||
| Rnd.prototype.onResize = function (e, direction, elementRef, delta) { | ||
| if (/left/i.test(direction)) { | ||
| var x_1 = this.state.original.x - delta.width; | ||
| // INFO: Apply x position by resize to draggable. | ||
| this.draggable.setState({ x: x_1 }); | ||
| // INFO: Apply x and y position adjustments caused by resizing to draggable | ||
| var newPos = { x: this.state.original.x, y: this.state.original.y }; | ||
| var left = -delta.width; | ||
| var top = -delta.height; | ||
| var directions = ["top", "left", "topLeft", "bottomLeft", "topRight"]; | ||
| if (directions.indexOf(direction) !== -1) { | ||
| if (direction === "bottomLeft") { | ||
| newPos.x += left; | ||
| } | ||
| else if (direction === "topRight") { | ||
| newPos.y += top; | ||
| } | ||
| else { | ||
| newPos.x += left; | ||
| newPos.y += top; | ||
| } | ||
| } | ||
| if (/top/i.test(direction)) { | ||
| var y_1 = this.state.original.y - delta.height; | ||
| // INFO: Apply x position by resize to draggable. | ||
| this.draggable.setState({ y: y_1 }); | ||
| if (newPos.x !== this.draggable.state.x || newPos.y !== this.draggable.state.y) { | ||
| this.draggable.setState(newPos); | ||
| } | ||
@@ -400,3 +412,3 @@ this.updateOffsetFromParent(); | ||
| 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, resizeHandleComponent = _a.resizeHandleComponent, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, allowAnyClick = _a.allowAnyClick, nodeRef = _a.nodeRef, 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", "allowAnyClick", "nodeRef"]); | ||
| 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, allowAnyClick = _a.allowAnyClick, 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", "allowAnyClick"]); | ||
| var defaultValue = this.props.default ? __assign({}, this.props.default) : undefined; | ||
@@ -417,3 +429,3 @@ // Remove unknown props, see also https://reactjs.org/warnings/unknown-prop.html | ||
| var pos = this.resizing ? undefined : 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, allowAnyClick: allowAnyClick, nodeRef: { current: this.getSelfElement() } }, | ||
| 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, allowAnyClick: allowAnyClick, nodeRef: this.resizableElement }, | ||
| createElement(Resizable, __assign({}, resizableProps, { ref: this.refResizable, defaultSize: defaultValue, size: this.props.size, enable: typeof enableResizing === "boolean" ? getEnableResizingByFlag(enableResizing) : 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))); | ||
@@ -420,0 +432,0 @@ }; |
| { | ||
| "name": "react-rnd", | ||
| "version": "10.2.1", | ||
| "version": "10.2.2", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "title": "react-rnd", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by44.57%
124464
- Number of package files
- increased by11.11%
10
- Lines of code
- increased by72.99%
1832
No dependency changes