react-rnd - npm Package Compare versions

Comparing version 6.0.1 to 7.0.0

lib/index.es5.js

@@ -255,4 +255,4 @@ 'use strict';
       original: {
-        x: props.x || 0,
-        y: props.y || 0
+        x: props.default.x || 0,
+        y: props.default.y || 0
       },
@@ -265,2 +265,4 @@ bounds: {
       },
+      width: props.default.width,
+      height: props.default.height,
       maxWidth: props.maxWidth,
@@ -285,10 +287,10 @@ maxHeight: props.maxHeight,
       }
-      var draggable = this.draggable && this.draggable.state;
-      if (!draggable) return;
-      if (this.props.x !== draggable.x) {
-        this.draggable.setState({ x: this.props.x });
-      }
-      if (this.props.y !== draggable.y) {
-        this.draggable.setState({ y: this.props.y });
-      }
+      // const draggable = this.draggable && this.draggable.state;
+      // if (!draggable) return;
+      // if (this.props.x !== draggable.x) {
+      //   this.draggable.setState({ x: this.props.default.x });
+      // }
+      // if (this.props.y !== draggable.y) {
+      //   this.draggable.setState({ y: this.props.y });
+      // }
     }
@@ -459,4 +461,3 @@ }, {
     value: function updateSize(size) {
-      if (!this.resizable) return;
-      this.resizable.updateSize({ width: size.width, height: size.height });
+      this.setState({ width: size.width, height: size.height });
     }
@@ -491,3 +492,3 @@ }, {
           handle: this.props.dragHandleClassName,
-          defaultPosition: { x: this.props.x, y: this.props.y },
+          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
           onStart: this.onDragStart,
@@ -513,4 +514,4 @@ onDrag: this.onDrag,
             style: innerStyle,
-            width: this.props.width,
-            height: this.props.height,
+            width: this.state.width,
+            height: this.state.height,
             minWidth: this.props.minWidth,
@@ -521,2 +522,4 @@ minHeight: this.props.minHeight,
             grid: this.props.resizeGrid,
+            handleWrapperClass: this.props.resizeHandleWrapperClass,
+            handleWrapperStyle: this.props.resizeHandleWrapperStyle,
             lockAspectRatio: this.props.lockAspectRatio,
@@ -523,0 +526,0 @@ handleStyles: this.props.resizeHandleStyles,

lib/index.js

@@ -251,4 +251,4 @@ import { Component, createElement } from 'react';
       original: {
-        x: props.x || 0,
-        y: props.y || 0
+        x: props.default.x || 0,
+        y: props.default.y || 0
       },
@@ -261,2 +261,4 @@ bounds: {
       },
+      width: props.default.width,
+      height: props.default.height,
       maxWidth: props.maxWidth,
@@ -281,10 +283,10 @@ maxHeight: props.maxHeight,
       }
-      var draggable = this.draggable && this.draggable.state;
-      if (!draggable) return;
-      if (this.props.x !== draggable.x) {
-        this.draggable.setState({ x: this.props.x });
-      }
-      if (this.props.y !== draggable.y) {
-        this.draggable.setState({ y: this.props.y });
-      }
+      // const draggable = this.draggable && this.draggable.state;
+      // if (!draggable) return;
+      // if (this.props.x !== draggable.x) {
+      //   this.draggable.setState({ x: this.props.default.x });
+      // }
+      // if (this.props.y !== draggable.y) {
+      //   this.draggable.setState({ y: this.props.y });
+      // }
     }
@@ -455,4 +457,3 @@ }, {
     value: function updateSize(size) {
-      if (!this.resizable) return;
-      this.resizable.updateSize({ width: size.width, height: size.height });
+      this.setState({ width: size.width, height: size.height });
     }
@@ -487,3 +488,3 @@ }, {
           handle: this.props.dragHandleClassName,
-          defaultPosition: { x: this.props.x, y: this.props.y },
+          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
           onStart: this.onDragStart,
@@ -509,4 +510,4 @@ onDrag: this.onDrag,
             style: innerStyle,
-            width: this.props.width,
-            height: this.props.height,
+            width: this.state.width,
+            height: this.state.height,
             minWidth: this.props.minWidth,
@@ -517,2 +518,4 @@ minHeight: this.props.minHeight,
             grid: this.props.resizeGrid,
+            handleWrapperClass: this.props.resizeHandleWrapperClass,
+            handleWrapperStyle: this.props.resizeHandleWrapperStyle,
             lockAspectRatio: this.props.lockAspectRatio,
@@ -519,0 +522,0 @@ handleStyles: this.props.resizeHandleStyles,

lib/react-rnd.umd.js

@@ -255,4 +255,4 @@ (function (global, factory) {
       original: {
-        x: props.x || 0,
-        y: props.y || 0
+        x: props.default.x || 0,
+        y: props.default.y || 0
       },
@@ -265,2 +265,4 @@ bounds: {
       },
+      width: props.default.width,
+      height: props.default.height,
       maxWidth: props.maxWidth,
@@ -285,10 +287,10 @@ maxHeight: props.maxHeight,
       }
-      var draggable = this.draggable && this.draggable.state;
-      if (!draggable) return;
-      if (this.props.x !== draggable.x) {
-        this.draggable.setState({ x: this.props.x });
-      }
-      if (this.props.y !== draggable.y) {
-        this.draggable.setState({ y: this.props.y });
-      }
+      // const draggable = this.draggable && this.draggable.state;
+      // if (!draggable) return;
+      // if (this.props.x !== draggable.x) {
+      //   this.draggable.setState({ x: this.props.default.x });
+      // }
+      // if (this.props.y !== draggable.y) {
+      //   this.draggable.setState({ y: this.props.y });
+      // }
     }
@@ -459,4 +461,3 @@ }, {
     value: function updateSize(size) {
-      if (!this.resizable) return;
-      this.resizable.updateSize({ width: size.width, height: size.height });
+      this.setState({ width: size.width, height: size.height });
     }
@@ -491,3 +492,3 @@ }, {
           handle: this.props.dragHandleClassName,
-          defaultPosition: { x: this.props.x, y: this.props.y },
+          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
           onStart: this.onDragStart,
@@ -513,4 +514,4 @@ onDrag: this.onDrag,
             style: innerStyle,
-            width: this.props.width,
-            height: this.props.height,
+            width: this.state.width,
+            height: this.state.height,
             minWidth: this.props.minWidth,
@@ -521,2 +522,4 @@ minHeight: this.props.minHeight,
             grid: this.props.resizeGrid,
+            handleWrapperClass: this.props.resizeHandleWrapperClass,
+            handleWrapperStyle: this.props.resizeHandleWrapperStyle,
             lockAspectRatio: this.props.lockAspectRatio,
@@ -523,0 +526,0 @@ handleStyles: this.props.resizeHandleStyles,

package.json

 {
   "name": "react-rnd",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "",
@@ -29,3 +29,3 @@ "title": "react-rnd",
     "prepublish": "npm run build && npm run flow-copy",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6016",
     "build-storybook": "build-storybook",
@@ -32,0 +32,0 @@ "deploy": "npm run build-storybook && gh-pages -d storybook-static"

README.md

@@ -53,6 +53,8 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
 <Rnd
-  width={200}
-  height={200}
-  x={100}
-  y={100}
+  default={{
+    x: 0,
+    y: 0,
+    width: 320,
+    height: 200,
+  }}
 >
@@ -69,22 +71,10 @@ Rnd
 
-#### `x: number;`
+#### `default: { x: number; y: number;  width?: number | string;  height?: number | string; };`
 
-The `x` property is used to set position of the component.   
-
-#### `y: number;`
-
-The `y` property is used to set position of the component.
-
-#### `width?: (number | string);`
-
-The `width` property is used to set width of the component.   
+The `width` and `height` property is used to set the default size of a component.
 For example, you can set `300`, `'300px'`, `50%`.     
-If omitted, set `'auto'`.    
+If omitted, set `'auto'`.
 
-#### `height?: (number | string);`
+The `x` and `y` property is used to set the default position of the component.   
 
-The `height` property is used to set width of the component.   
-For example, you can set `300`, `'300px'`, `50%`.    
-If omitted, set `'auto'`.    
-
 #### `className?: string;`
@@ -340,3 +330,3 @@
 Update component size.
-`grid` ,`max/minWidth`, `max/minHeight` props is ignored, when this method called.
+For example, you can set `300`, `'300px'`, `50%`.    
 
@@ -367,3 +357,3 @@ - for example
 
-Update component size.
+Update component position.
 `grid` `bounds` props is ignored, when this method called.
@@ -436,2 +426,11 @@
 
+#### v7.0.0
+
+- Add `default` instead of `x`, `y`, `width`, `height`.
+- Add `resizeHandleWrapperClass` and `resizeHandleWrapperStyle`.
+
+#### v6.0.1
+
+- Remove unnecessary types.
+
 #### v6.0.0
@@ -438,0 +437,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

179522

increased by1.58%

Lines of code

1368

increased by0.66%

Worsened metrics

Number of lines in readme file

581

decreased by-0.17%

No dependency changes