react-rnd - npm Package Compare versions

Comparing version 9.0.4 to 9.1.0

lib/index.d.ts

 import * as React from "react";
-import Draggable from "react-draggable";
+import { DraggableEventHandler } from "react-draggable";
 import Resizable, { ResizableDirection } from "re-resizable";
+declare type $TODO = any;
 export declare type Grid = [number, number];
@@ -16,3 +17,4 @@ export declare type Position = {
 } & Position;
-export declare type RndDragCallback = (e: Event, data: DraggableData) => void | false;
+export declare type RndDragCallback = DraggableEventHandler;
+export declare type RndDragEvent = React.MouseEvent<HTMLElement | SVGElement> | React.TouchEvent<HTMLElement | SVGElement> | MouseEvent | TouchEvent;
 export declare type RndResizeStartCallback = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, dir: ResizableDirection, elementRef: HTMLDivElement) => void;
@@ -113,17 +115,20 @@ export declare type ResizableDelta = {
     enableUserSelectHack?: boolean;
+    scale?: number;
     [key: string]: any;
 }
+interface DefaultProps {
+    maxWidth: number;
+    maxHeight: number;
+    onResizeStart: RndResizeStartCallback;
+    onResize: RndResizeCallback;
+    onResizeStop: RndResizeCallback;
+    onDragStart: RndDragCallback;
+    onDrag: RndDragCallback;
+    onDragStop: RndDragCallback;
+    scale: number;
+}
 export declare class Rnd extends React.Component<Props, State> {
-    static defaultProps: {
-        maxWidth: number;
-        maxHeight: number;
-        onResizeStart: () => void;
-        onResize: () => void;
-        onResizeStop: () => void;
-        onDragStart: () => void;
-        onDrag: () => void;
-        onDragStop: () => void;
-    };
+    static defaultProps: DefaultProps;
     resizable: Resizable;
-    draggable: Draggable;
+    draggable: $TODO;
     isResizing: boolean;
@@ -143,5 +148,7 @@ constructor(props: Props);
     getSelfElement(): Element;
-    onDragStart(e: Event, data: DraggableData): void;
-    onDrag(e: Event, data: DraggableData): void;
-    onDragStop(e: Event, data: DraggableData): void;
+    getOffsetHeight(boundary: HTMLElement): number;
+    getOffsetWidth(boundary: HTMLElement): number;
+    onDragStart(e: RndDragEvent, data: DraggableData): void;
+    onDrag(e: RndDragEvent, data: DraggableData): void;
+    onDragStop(e: RndDragEvent, data: DraggableData): void;
     onResizeStart(e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, dir: ResizableDirection, elementRef: HTMLDivElement): void;
@@ -148,0 +155,0 @@ onResize(e: MouseEvent | TouchEvent, direction: ResizableDirection, elementRef: HTMLDivElement, delta: {

lib/index.es5.js

@@ -8,3 +8,2 @@ 'use strict';
 var React = require('react');
-var Draggable = _interopDefault(require('react-draggable'));
 var Resizable = _interopDefault(require('re-resizable'));
@@ -56,2 +55,3 @@
 
+var Draggable = require("react-draggable");
 var resizableStyle = {
@@ -122,2 +122,24 @@ width: "auto",
     };
+    Rnd.prototype.getOffsetHeight = function (boundary) {
+        var scale = this.props.scale;
+        switch (this.props.bounds) {
+            case "window":
+                return window.innerHeight / scale;
+            case "body":
+                return document.body.offsetHeight / scale;
+            default:
+                return boundary.offsetHeight;
+        }
+    };
+    Rnd.prototype.getOffsetWidth = function (boundary) {
+        var scale = this.props.scale;
+        switch (this.props.bounds) {
+            case "window":
+                return window.innerWidth / scale;
+            case "body":
+                return document.body.offsetWidth / scale;
+            default:
+                return boundary.offsetWidth;
+        }
+    };
     Rnd.prototype.onDragStart = function (e, data) {
@@ -130,2 +152,3 @@ if (this.props.onDragStart) {
         var parent = this.getParent();
+        var scale = this.props.scale;
         var boundary;
@@ -136,3 +159,11 @@ if (this.props.bounds === "parent") {
         else if (this.props.bounds === "body") {
-            boundary = document.body;
+            var parentRect_1 = parent.getBoundingClientRect();
+            var parentLeft_1 = parentRect_1.left;
+            var parentTop_1 = parentRect_1.top;
+            var bodyRect = document.body.getBoundingClientRect();
+            var left_1 = -(parentLeft_1 - parent.offsetLeft * scale - bodyRect.left) / scale;
+            var top_1 = -(parentTop_1 - parent.offsetTop * scale - bodyRect.top) / scale;
+            var right = (document.body.offsetWidth - this.resizable.size.width * scale) / scale + left_1;
+            var bottom = (document.body.offsetHeight - this.resizable.size.height * scale) / scale + top_1;
+            return this.setState({ bounds: { top: top_1, right: right, bottom: bottom, left: left_1 } });
         }
@@ -142,10 +173,10 @@ else if (this.props.bounds === "window") {
                 return;
-            return this.setState({
-                bounds: {
-                    top: 0,
-                    right: window.innerWidth - this.resizable.size.width,
-                    bottom: window.innerHeight - this.resizable.size.height,
-                    left: 0,
-                },
-            });
+            var parentRect_2 = parent.getBoundingClientRect();
+            var parentLeft_2 = parentRect_2.left;
+            var parentTop_2 = parentRect_2.top;
+            var left_2 = -(parentLeft_2 - parent.offsetLeft * scale) / scale;
+            var top_2 = -(parentTop_2 - parent.offsetTop * scale) / scale;
+            var right = (window.innerWidth - this.resizable.size.width * scale) / scale + left_2;
+            var bottom = (window.innerHeight - this.resizable.size.height * scale) / scale + top_2;
+            return this.setState({ bounds: { top: top_2, right: right, bottom: bottom, left: left_2 } });
         }
@@ -164,3 +195,3 @@ else {
         var parentTop = parentRect.top;
-        var left = boundaryLeft - parentLeft;
+        var left = (boundaryLeft - parentLeft) / scale;
         var top = boundaryTop - parentTop;
@@ -173,5 +204,5 @@ if (!this.resizable)
                 top: top - offset.top,
-                right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left,
+                right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left / scale,
                 bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
-                left: left - offset.left,
+                left: left - offset.left / scale,
             },
@@ -188,4 +219,4 @@ });
         if (this.props.onDragStop) {
-            var _a = this.getOffsetFromParent(), left = _a.left, top_1 = _a.top;
-            this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_1 }));
+            var _a = this.getOffsetFromParent(), left = _a.left, top_3 = _a.top;
+            this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_3 }));
         }
@@ -196,2 +227,3 @@ };
         this.isResizing = true;
+        var scale = this.props.scale;
         this.setState({
@@ -245,4 +277,4 @@ original: this.getDraggablePosition(),
                 var boundaryTop = boundaryRect.top;
-                var offsetWidth = this.props.bounds === "window" ? window.innerWidth : boundary.offsetWidth;
-                var offsetHeight = this.props.bounds === "window" ? window.innerHeight : boundary.offsetHeight;
+                var offsetWidth = this.getOffsetWidth(boundary);
+                var offsetHeight = this.getOffsetHeight(boundary);
                 var hasLeft = dir.toLowerCase().endsWith("left");
@@ -253,3 +285,3 @@ var hasRight = dir.toLowerCase().endsWith("right");
                 if (hasLeft && this.resizable) {
-                    var max = selfLeft - boundaryLeft + this.resizable.size.width;
+                    var max = (selfLeft - boundaryLeft) / scale + this.resizable.size.width;
                     this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
@@ -259,7 +291,7 @@ }
                 if (hasRight || (this.props.lockAspectRatio && !hasLeft)) {
-                    var max = offsetWidth + (boundaryLeft - selfLeft);
+                    var max = offsetWidth + (boundaryLeft - selfLeft) / scale;
                     this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
                 }
                 if (hasTop && this.resizable) {
-                    var max = selfTop - boundaryTop + this.resizable.size.height;
+                    var max = (selfTop - boundaryTop) / scale + this.resizable.size.height;
                     this.setState({
@@ -271,3 +303,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,
                 if (hasBottom || (this.props.lockAspectRatio && !hasTop)) {
-                    var max = offsetHeight + (boundaryTop - selfTop);
+                    var max = offsetHeight + (boundaryTop - selfTop) / scale;
                     this.setState({
@@ -340,2 +372,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,
     Rnd.prototype.getOffsetFromParent = function () {
+        var scale = this.props.scale;
         var parent = this.getParent();
@@ -354,4 +387,4 @@ if (!parent) {
         return {
-            left: selfRect.left - parentLeft - position.x,
-            top: selfRect.top - parentTop - position.y,
+            left: selfRect.left - parentLeft - position.x * scale,
+            top: selfRect.top - parentTop - position.y * scale,
         };
@@ -361,3 +394,3 @@ };
         var _this = this;
-        var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, 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, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle"]);
+        var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, 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", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale"]);
         var defaultValue = this.props.default ? __assign({}, this.props.default) : undefined;
@@ -377,6 +410,6 @@ // Remove unknown props, see also https://reactjs.org/warnings/unknown-prop.html
         return (React.createElement(Draggable, { ref: function (c) {
-                if (c) {
-                    _this.draggable = c;
-                }
-            }, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: draggablePosition, enableUserSelectHack: enableUserSelectHack, cancel: cancel },
+                if (!c)
+                    return;
+                _this.draggable = c;
+            }, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: draggablePosition, enableUserSelectHack: enableUserSelectHack, cancel: cancel, scale: scale },
             React.createElement(Resizable, __assign({}, resizableProps, { ref: function (c) {
@@ -386,3 +419,3 @@ if (c) {
                     }
-                }, 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.isResizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.isResizing ? 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 }), children)));
+                }, 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.isResizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.isResizing ? 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)));
     };
@@ -392,2 +425,3 @@ Rnd.defaultProps = {
         maxHeight: Number.MAX_SAFE_INTEGER,
+        scale: 1,
         onResizeStart: function () { },
@@ -394,0 +428,0 @@ onResize: function () { },

lib/index.js

 import { createElement, Component } from 'react';
-import Draggable from 'react-draggable';
 import Resizable from 're-resizable';
@@ -49,2 +48,3 @@
 
+var Draggable = require("react-draggable");
 var resizableStyle = {
@@ -115,2 +115,24 @@ width: "auto",
     };
+    Rnd.prototype.getOffsetHeight = function (boundary) {
+        var scale = this.props.scale;
+        switch (this.props.bounds) {
+            case "window":
+                return window.innerHeight / scale;
+            case "body":
+                return document.body.offsetHeight / scale;
+            default:
+                return boundary.offsetHeight;
+        }
+    };
+    Rnd.prototype.getOffsetWidth = function (boundary) {
+        var scale = this.props.scale;
+        switch (this.props.bounds) {
+            case "window":
+                return window.innerWidth / scale;
+            case "body":
+                return document.body.offsetWidth / scale;
+            default:
+                return boundary.offsetWidth;
+        }
+    };
     Rnd.prototype.onDragStart = function (e, data) {
@@ -123,2 +145,3 @@ if (this.props.onDragStart) {
         var parent = this.getParent();
+        var scale = this.props.scale;
         var boundary;
@@ -129,3 +152,11 @@ if (this.props.bounds === "parent") {
         else if (this.props.bounds === "body") {
-            boundary = document.body;
+            var parentRect_1 = parent.getBoundingClientRect();
+            var parentLeft_1 = parentRect_1.left;
+            var parentTop_1 = parentRect_1.top;
+            var bodyRect = document.body.getBoundingClientRect();
+            var left_1 = -(parentLeft_1 - parent.offsetLeft * scale - bodyRect.left) / scale;
+            var top_1 = -(parentTop_1 - parent.offsetTop * scale - bodyRect.top) / scale;
+            var right = (document.body.offsetWidth - this.resizable.size.width * scale) / scale + left_1;
+            var bottom = (document.body.offsetHeight - this.resizable.size.height * scale) / scale + top_1;
+            return this.setState({ bounds: { top: top_1, right: right, bottom: bottom, left: left_1 } });
         }
@@ -135,10 +166,10 @@ else if (this.props.bounds === "window") {
                 return;
-            return this.setState({
-                bounds: {
-                    top: 0,
-                    right: window.innerWidth - this.resizable.size.width,
-                    bottom: window.innerHeight - this.resizable.size.height,
-                    left: 0,
-                },
-            });
+            var parentRect_2 = parent.getBoundingClientRect();
+            var parentLeft_2 = parentRect_2.left;
+            var parentTop_2 = parentRect_2.top;
+            var left_2 = -(parentLeft_2 - parent.offsetLeft * scale) / scale;
+            var top_2 = -(parentTop_2 - parent.offsetTop * scale) / scale;
+            var right = (window.innerWidth - this.resizable.size.width * scale) / scale + left_2;
+            var bottom = (window.innerHeight - this.resizable.size.height * scale) / scale + top_2;
+            return this.setState({ bounds: { top: top_2, right: right, bottom: bottom, left: left_2 } });
         }
@@ -157,3 +188,3 @@ else {
         var parentTop = parentRect.top;
-        var left = boundaryLeft - parentLeft;
+        var left = (boundaryLeft - parentLeft) / scale;
         var top = boundaryTop - parentTop;
@@ -166,5 +197,5 @@ if (!this.resizable)
                 top: top - offset.top,
-                right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left,
+                right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left / scale,
                 bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
-                left: left - offset.left,
+                left: left - offset.left / scale,
             },
@@ -181,4 +212,4 @@ });
         if (this.props.onDragStop) {
-            var _a = this.getOffsetFromParent(), left = _a.left, top_1 = _a.top;
-            this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_1 }));
+            var _a = this.getOffsetFromParent(), left = _a.left, top_3 = _a.top;
+            this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_3 }));
         }
@@ -189,2 +220,3 @@ };
         this.isResizing = true;
+        var scale = this.props.scale;
         this.setState({
@@ -238,4 +270,4 @@ original: this.getDraggablePosition(),
                 var boundaryTop = boundaryRect.top;
-                var offsetWidth = this.props.bounds === "window" ? window.innerWidth : boundary.offsetWidth;
-                var offsetHeight = this.props.bounds === "window" ? window.innerHeight : boundary.offsetHeight;
+                var offsetWidth = this.getOffsetWidth(boundary);
+                var offsetHeight = this.getOffsetHeight(boundary);
                 var hasLeft = dir.toLowerCase().endsWith("left");
@@ -246,3 +278,3 @@ var hasRight = dir.toLowerCase().endsWith("right");
                 if (hasLeft && this.resizable) {
-                    var max = selfLeft - boundaryLeft + this.resizable.size.width;
+                    var max = (selfLeft - boundaryLeft) / scale + this.resizable.size.width;
                     this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
@@ -252,7 +284,7 @@ }
                 if (hasRight || (this.props.lockAspectRatio && !hasLeft)) {
-                    var max = offsetWidth + (boundaryLeft - selfLeft);
+                    var max = offsetWidth + (boundaryLeft - selfLeft) / scale;
                     this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
                 }
                 if (hasTop && this.resizable) {
-                    var max = selfTop - boundaryTop + this.resizable.size.height;
+                    var max = (selfTop - boundaryTop) / scale + this.resizable.size.height;
                     this.setState({
@@ -264,3 +296,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,
                 if (hasBottom || (this.props.lockAspectRatio && !hasTop)) {
-                    var max = offsetHeight + (boundaryTop - selfTop);
+                    var max = offsetHeight + (boundaryTop - selfTop) / scale;
                     this.setState({
@@ -333,2 +365,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,
     Rnd.prototype.getOffsetFromParent = function () {
+        var scale = this.props.scale;
         var parent = this.getParent();
@@ -347,4 +380,4 @@ if (!parent) {
         return {
-            left: selfRect.left - parentLeft - position.x,
-            top: selfRect.top - parentTop - position.y,
+            left: selfRect.left - parentLeft - position.x * scale,
+            top: selfRect.top - parentTop - position.y * scale,
         };
@@ -354,3 +387,3 @@ };
         var _this = this;
-        var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, 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, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle"]);
+        var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, 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", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale"]);
         var defaultValue = this.props.default ? __assign({}, this.props.default) : undefined;
@@ -370,6 +403,6 @@ // Remove unknown props, see also https://reactjs.org/warnings/unknown-prop.html
         return (createElement(Draggable, { ref: function (c) {
-                if (c) {
-                    _this.draggable = c;
-                }
-            }, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: draggablePosition, enableUserSelectHack: enableUserSelectHack, cancel: cancel },
+                if (!c)
+                    return;
+                _this.draggable = c;
+            }, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: draggablePosition, enableUserSelectHack: enableUserSelectHack, cancel: cancel, scale: scale },
             createElement(Resizable, __assign({}, resizableProps, { ref: function (c) {
@@ -379,3 +412,3 @@ if (c) {
                     }
-                }, 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.isResizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.isResizing ? 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 }), children)));
+                }, 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.isResizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.isResizing ? 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)));
     };
@@ -385,2 +418,3 @@ Rnd.defaultProps = {
         maxHeight: Number.MAX_SAFE_INTEGER,
+        scale: 1,
         onResizeStart: function () { },
@@ -387,0 +421,0 @@ onResize: function () { },

lib/index.test.js

@@ -51,7 +51,7 @@ "use strict";
 var ava_1 = __importDefault(require("ava"));
-var react_1 = __importDefault(require("react"));
+var React = __importStar(require("react"));
 var sinon_1 = require("sinon");
 var enzyme_1 = __importStar(require("enzyme"));
 var enzyme_adapter_react_16_1 = __importDefault(require("enzyme-adapter-react-16"));
-var _1 = __importDefault(require("./"));
+var _1 = require("./");
 enzyme_1.default.configure({ adapter: new enzyme_adapter_react_16_1.default() });
@@ -81,3 +81,3 @@ var mouseMove = function (x, y) {
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 } }));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 } }));
         t.truthy(!!rnd);
@@ -90,3 +90,3 @@ return [2 /*return*/];
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { className: "custom-class-name", default: { x: 100, y: 100, width: 100, height: 100 } }));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { className: "custom-class-name", default: { x: 100, y: 100, width: 100, height: 100 } }));
         t.truthy(rnd.getDOMNode().classList.contains("custom-class-name"));
@@ -99,3 +99,3 @@ return [2 /*return*/];
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -121,3 +121,3 @@ right: "handler",
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, enableResizing: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, enableResizing: {
                 top: false,
@@ -150,3 +150,3 @@ right: false,
         onMouseDown = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, onMouseDown: onMouseDown }));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, onMouseDown: onMouseDown }));
         rnd
@@ -165,3 +165,3 @@ .find("div")
         onDragStart = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, onDragStart: onDragStart }));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, onDragStart: onDragStart }));
         rnd
@@ -182,3 +182,3 @@ .find("div")
         onDrag = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, onDrag: onDrag }));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, onDrag: onDrag }));
         rnd
@@ -200,3 +200,3 @@ .find("div")
         onDragStop = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, onDragStop: onDragStop }));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, onDragStop: onDragStop }));
         rnd
@@ -218,3 +218,3 @@ .find("div")
         onDrag = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { onDrag: onDrag, dragAxis: "none", default: { x: 100, y: 100, width: 100, height: 100 } }), {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { onDrag: onDrag, dragAxis: "none", default: { x: 100, y: 100, width: 100, height: 100 } }), {
             attachTo: document.querySelector("div"),
@@ -236,3 +236,3 @@ });
         onDrag = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { onDrag: onDrag, dragAxis: "x", default: { x: 100, y: 100, width: 100, height: 100 } }), {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { onDrag: onDrag, dragAxis: "x", default: { x: 100, y: 100, width: 100, height: 100 } }), {
             attachTo: document.querySelector("div"),
@@ -254,3 +254,3 @@ });
         onDrag = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { onDrag: onDrag, dragAxis: "y", default: { x: 100, y: 100, width: 100, height: 100 } }), {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { onDrag: onDrag, dragAxis: "y", default: { x: 100, y: 100, width: 100, height: 100 } }), {
             attachTo: document.querySelector("div"),
@@ -272,3 +272,3 @@ });
         onDrag = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { onDrag: onDrag, dragAxis: "both", default: { x: 100, y: 100, width: 100, height: 100 } }), {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { onDrag: onDrag, dragAxis: "both", default: { x: 100, y: 100, width: 100, height: 100 } }), {
             attachTo: document.querySelector("div"),
@@ -289,3 +289,3 @@ });
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { dragGrid: [30, 100], default: { x: 100, y: 100, width: 100, height: 100 } }), {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { dragGrid: [30, 100], default: { x: 100, y: 100, width: 100, height: 100 } }), {
             attachTo: document.querySelector("div"),
@@ -305,3 +305,3 @@ });
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { dragGrid: [30, 100], default: { x: 100, y: 100, width: 100, height: 100 } }), {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { dragGrid: [30, 100], default: { x: 100, y: 100, width: 100, height: 100 } }), {
             attachTo: document.querySelector("div"),
@@ -321,4 +321,4 @@ });
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement("div", { style: { width: "800px", height: "600px" } },
-            react_1.default.createElement(_1.default, { bounds: "parent", default: { x: 0, y: 0, width: 100, height: 100 } })), { attachTo: document.querySelector("div") });
+        rnd = enzyme_1.mount(React.createElement("div", { style: { width: "800px", height: "600px" } },
+            React.createElement(_1.Rnd, { bounds: "parent", default: { x: 0, y: 0, width: 100, height: 100 } })), { attachTo: document.querySelector("div") });
         rnd
@@ -342,5 +342,5 @@ .find("div")
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement("div", { className: "target", style: { width: "1000px", height: "800px" } },
-            react_1.default.createElement("div", { style: { width: "800px", height: "600px" } },
-                react_1.default.createElement(_1.default, { className: "rnd", bounds: ".target", default: { x: 100, y: 100, width: 100, height: 100 } }))), { attachTo: document.querySelector("div") });
+        rnd = enzyme_1.mount(React.createElement("div", { className: "target", style: { width: "1000px", height: "800px" } },
+            React.createElement("div", { style: { width: "800px", height: "600px" } },
+                React.createElement(_1.Rnd, { className: "rnd", bounds: ".target", default: { x: 100, y: 100, width: 100, height: 100 } }))), { attachTo: document.querySelector("div") });
         rnd
@@ -366,3 +366,3 @@ .find("div")
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -386,3 +386,3 @@ right: "handler",
         onResizeStart = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -420,3 +420,3 @@ right: "handler",
         onResizeStart = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -459,3 +459,3 @@ right: "handler",
         onResizeStop = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -499,3 +499,3 @@ right: "handler",
         onResizeStart = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -538,3 +538,3 @@ right: "handler",
         onResizeStart = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -576,3 +576,3 @@ right: "handler",
         onResize = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -609,3 +609,3 @@ right: "handler",
         onResize = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -642,3 +642,3 @@ right: "handler",
         onResize = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -675,3 +675,3 @@ right: "handler",
         onResize = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -708,3 +708,3 @@ right: "handler",
         onResize = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
                 top: "handler",
@@ -742,4 +742,4 @@ right: "handler",
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement("div", { style: { width: "800px", height: "600px" } },
-            react_1.default.createElement(_1.default, { default: { x: 0, y: 0, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement("div", { style: { width: "800px", height: "600px" } },
+            React.createElement(_1.Rnd, { default: { x: 0, y: 0, width: 100, height: 100 }, resizeHandleClasses: {
                     top: "handler",
@@ -776,5 +776,5 @@ right: "handler",
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement("div", { className: "target", style: { width: "1000px", height: "800px" } },
-            react_1.default.createElement("div", { style: { width: "800px", height: "600px" } },
-                react_1.default.createElement(_1.default, { default: { x: 0, y: 0, width: 100, height: 100 }, resizeHandleClasses: {
+        rnd = enzyme_1.mount(React.createElement("div", { className: "target", style: { width: "1000px", height: "800px" } },
+            React.createElement("div", { style: { width: "800px", height: "600px" } },
+                React.createElement(_1.Rnd, { default: { x: 0, y: 0, width: 100, height: 100 }, resizeHandleClasses: {
                         top: "handler",
@@ -817,3 +817,3 @@ right: "handler",
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 } }));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 } }));
         rnd.instance().updatePosition({ x: 200, y: 300 });
@@ -827,3 +827,3 @@ t.not((rnd.getDOMNode().getAttribute("style") || "").indexOf("transform: translate(200px, 300px)"), -1);
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 } }));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 } }));
         rnd.instance().updateSize({ width: 200, height: 300 });
@@ -839,4 +839,4 @@ t.is(rnd.getDOMNode().style.width, "200px");
         onDrag = sinon_1.spy();
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { dragHandleClassName: "handle", onDrag: onDrag, default: { x: 100, y: 100, width: 100, height: 100 } },
-            react_1.default.createElement("div", { className: "handle" }, "Test")));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { dragHandleClassName: "handle", onDrag: onDrag, default: { x: 100, y: 100, width: 100, height: 100 } },
+            React.createElement("div", { className: "handle" }, "Test")));
         rnd.find("div.handle").simulate("mousedown", { clientX: 0, clientY: 0 });
@@ -851,3 +851,3 @@ mouseMove(200, 220);
     return __generator(this, function (_a) {
-        rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { "data-foo": "42" }, "Test"));
+        rnd = enzyme_1.mount(React.createElement(_1.Rnd, { "data-foo": "42" }, "Test"));
         t.is(!!rnd.find("[data-foo]"), true);
@@ -854,0 +854,0 @@ return [2 /*return*/];

package.json

 {
   "name": "react-rnd",
-  "version": "9.0.4",
+  "version": "9.1.0",
   "description": "",
@@ -49,31 +49,32 @@ "title": "react-rnd",
     "@types/react": "16.4.1",
-    "@types/react-dom": "16.0.7",
-    "@types/sinon": "5.0.1",
+    "@types/node": "^10.12.19",
+    "@types/react-dom": "16.0.11",
+    "@types/sinon": "7.0.5",
     "@types/storybook__addon-actions": "3.4.1",
-    "@types/storybook__react": "3.0.9",
+    "@types/storybook__react": "4.0.0",
     "avaron": "0.2.0",
     "cpy-cli": "2.0.0",
-    "enzyme": "3.5.0",
-    "enzyme-adapter-react-16": "1.2.0",
-    "gh-pages": "2.0.0",
+    "enzyme": "3.8.0",
+    "enzyme-adapter-react-16": "1.8.0",
+    "gh-pages": "2.0.1",
     "light-ts-loader": "1.1.2",
-    "npm-run-all": "4.1.3",
-    "prettier": "1.15.1",
-    "react": "16.4.2",
-    "react-dom": "16.4.2",
-    "react-test-renderer": "16.4.2",
+    "npm-run-all": "4.1.5",
+    "prettier": "1.16.1",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-test-renderer": "16.7.0",
     "rollup": "0.61.1",
     "rollup-plugin-babel": "3.0.5",
-    "rollup-plugin-commonjs": "9.1.8",
-    "rollup-plugin-node-globals": "1.2.1",
+    "rollup-plugin-commonjs": "9.2.0",
+    "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-node-resolve": "3.3.0",
-    "rollup-plugin-replace": "2.0.0",
+    "rollup-plugin-replace": "2.1.0",
     "rollup-plugin-typescript2": "0.15.0",
     "rollup-watch": "4.3.1",
-    "sinon": "7.1.1",
-    "tslint": "5.11.0",
+    "sinon": "7.2.3",
+    "tslint": "5.12.1",
     "tslint-eslint-rules": "5.4.0",
-    "tslint-plugin-prettier": "2.0.0",
+    "tslint-plugin-prettier": "2.0.1",
     "tslint-react": "3.6.0",
-    "typescript": "3.0.1"
+    "typescript": "3.2.4"
   },
@@ -87,6 +88,6 @@ "files": [
   "dependencies": {
-    "re-resizable": "4.9.3",
-    "react-draggable": "3.0.5",
+    "re-resizable": "4.11.0",
+    "react-draggable": "3.1.1",
     "tslib": "1.9.3"
   }
 }

README.md

@@ -481,2 +481,7 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
 
+#### v9.1.0
+
+- Feat: Add `scale` props. #482
+- Feat: Upgrade deps.
+
 #### v9.0.4
@@ -483,0 +488,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

Total package byte prevSize

112029

increased by3.59%

Lines of code

1815

increased by4.31%

Number of lines in readme file

748

increased by0.67%

Worsened metrics

Dev dependency count

36

increased by2.86%

Dependency changes

• + Addedre-resizable@4.11.0(transitive)

• + Addedreact-draggable@3.1.1(transitive)

• - Removedre-resizable@4.9.3(transitive)

• - Removedreact-draggable@3.0.5(transitive)

• Updatedre-resizable@4.11.0

• Updatedreact-draggable@3.1.1