react-rnd - npm Package Compare versions

Comparing version 10.3.1 to 10.3.2

lib/index.d.ts

@@ -30,3 +30,3 @@ import * as React from "react";
 declare type State = {
-    original: Position;
+    resizing: boolean;
     bounds: {
@@ -146,3 +146,2 @@ top: number;
     draggable: $TODO;
-    resizing: boolean;
     resizingPosition: {
@@ -149,0 +148,0 @@ x: number;

lib/index.es5.js

@@ -86,3 +86,2 @@ 'use strict';
         var _this = _super.call(this, props) || this;
-        _this.resizing = false;
         _this.resizingPosition = { x: 0, y: 0 };
@@ -104,6 +103,3 @@ _this.offsetFromParent = { left: 0, top: 0 };
         _this.state = {
-            original: {
-                x: 0,
-                y: 0,
-            },
+            resizing: false,
             bounds: {
@@ -273,3 +269,5 @@ top: 0,
         e.stopPropagation();
-        this.resizing = true;
+        this.setState({
+            resizing: true,
+        });
         var scale = this.props.scale;
@@ -279,5 +277,3 @@ var offset = this.offsetFromParent;
         this.resizingPosition = { x: pos.x + offset.left, y: pos.y + offset.top };
-        this.setState({
-            original: pos,
-        });
+        this.originalPosition = pos;
         if (this.props.bounds) {
@@ -370,3 +366,3 @@ var parent_1 = this.getParent();
         // 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 newPos = { x: this.originalPosition.x, y: this.originalPosition.y };
         var left = -delta.width;
@@ -403,3 +399,5 @@ var top = -delta.height;
     Rnd.prototype.onResizeStop = function (e, direction, elementRef, delta) {
-        this.resizing = false;
+        this.setState({
+            resizing: false,
+        });
         var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
@@ -455,6 +453,6 @@ this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
         // INFO: Make uncontorolled component when resizing to control position by setPostion.
-        var pos = this.resizing ? undefined : draggablePosition;
-        var dragAxisOrUndefined = this.resizing ? "both" : dragAxis;
+        var pos = this.state.resizing ? undefined : draggablePosition;
+        var dragAxisOrUndefined = this.state.resizing ? "both" : dragAxis;
         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: dragAxisOrUndefined, 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)));
+            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.state.resizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.state.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)));
     };
@@ -461,0 +459,0 @@ Rnd.defaultProps = {

lib/index.js

@@ -80,3 +80,2 @@ import { createElement, PureComponent } from 'react';
         var _this = _super.call(this, props) || this;
-        _this.resizing = false;
         _this.resizingPosition = { x: 0, y: 0 };
@@ -98,6 +97,3 @@ _this.offsetFromParent = { left: 0, top: 0 };
         _this.state = {
-            original: {
-                x: 0,
-                y: 0,
-            },
+            resizing: false,
             bounds: {
@@ -267,3 +263,5 @@ top: 0,
         e.stopPropagation();
-        this.resizing = true;
+        this.setState({
+            resizing: true,
+        });
         var scale = this.props.scale;
@@ -273,5 +271,3 @@ var offset = this.offsetFromParent;
         this.resizingPosition = { x: pos.x + offset.left, y: pos.y + offset.top };
-        this.setState({
-            original: pos,
-        });
+        this.originalPosition = pos;
         if (this.props.bounds) {
@@ -364,3 +360,3 @@ var parent_1 = this.getParent();
         // 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 newPos = { x: this.originalPosition.x, y: this.originalPosition.y };
         var left = -delta.width;
@@ -397,3 +393,5 @@ var top = -delta.height;
     Rnd.prototype.onResizeStop = function (e, direction, elementRef, delta) {
-        this.resizing = false;
+        this.setState({
+            resizing: false,
+        });
         var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
@@ -449,6 +447,6 @@ this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
         // INFO: Make uncontorolled component when resizing to control position by setPostion.
-        var pos = this.resizing ? undefined : draggablePosition;
-        var dragAxisOrUndefined = this.resizing ? "both" : dragAxis;
+        var pos = this.state.resizing ? undefined : draggablePosition;
+        var dragAxisOrUndefined = this.state.resizing ? "both" : dragAxis;
         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: dragAxisOrUndefined, 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)));
+            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.state.resizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.state.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)));
     };
@@ -455,0 +453,0 @@ Rnd.defaultProps = {

package.json

 {
   "name": "react-rnd",
-  "version": "10.3.1",
+  "version": "10.3.2",
   "description": "",
@@ -50,3 +50,3 @@ "title": "react-rnd",
     "@babel/traverse": "7.14.2",
-    "@babel/types": "7.14.2",
+    "@babel/types": "7.14.4",
     "@emotion/core": "11.0.0",
@@ -62,3 +62,3 @@ "@storybook/addon-actions": "6.2.9",
     "@types/react": "16.4.1",
-    "@types/react-dom": "16.0.11",
+    "@types/react-dom": "17.0.5",
     "@types/sinon": "10.0.0",
@@ -75,3 +75,3 @@ "@types/storybook__addon-actions": "5.2.1",
     "enzyme-adapter-react-16": "1.9.1",
-    "gh-pages": "3.1.0",
+    "gh-pages": "3.2.0",
     "light-ts-loader": "1.1.2",
@@ -78,0 +78,0 @@ "npm-run-all": "4.1.5",

README.md

@@ -514,2 +514,6 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
 
+#### v10.3.1
+
+- Fixed a bug, top and left resize issue, caused by "position" #792
+
 #### v10.3.0
@@ -516,0 +520,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

127728

increased by0.02%

Number of lines in readme file

867

increased by0.46%

Worsened metrics

Lines of code

1883

decreased by-0.26%

No dependency changes