react-rnd - npm Package Compare versions

Comparing version 7.0.0 to 7.1.0

lib/index.es5.js

@@ -234,3 +234,3 @@ 'use strict';
 
-var boxStyle = {
+var resizableStyle = {
   width: 'auto',
@@ -256,4 +256,4 @@ height: 'auto',
       original: {
-        x: props.default.x || 0,
-        y: props.default.y || 0
+        x: 0,
+        y: 0
       },
@@ -266,4 +266,2 @@ bounds: {
       },
-      width: props.default.width,
-      height: props.default.height,
       maxWidth: props.maxWidth,
@@ -288,10 +286,2 @@ maxHeight: props.maxHeight,
       }
-      // 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 });
-      // }
     }
@@ -419,2 +409,4 @@ }, {
       var selfTop = 0;
+      var x = void 0;
+      var y = void 0;
       if (this.props.bounds) {
@@ -434,13 +426,13 @@ var parent = this.resizable && this.resizable.parentNode;
       if (/left/i.test(direction)) {
-        var _x = selfLeft >= parentLeft ? this.state.original.x - delta.width : parentLeft - selfLeft;
-        this.draggable.setState({ x: _x });
+        x = selfLeft >= parentLeft ? this.state.original.x - delta.width : parentLeft - selfLeft;
+        this.draggable.setState({ x: x });
       }
       if (/top/i.test(direction)) {
-        var _y = selfTop >= parentTop ? this.state.original.y - delta.height : parentTop - selfTop;
-        this.draggable.setState({ y: _y });
+        y = selfTop >= parentTop ? this.state.original.y - delta.height : parentTop - selfTop;
+        this.draggable.setState({ y: y });
       }
       if (this.props.onResize) {
         this.props.onResize(e, direction, refToResizableElement, delta, {
-          x: this.draggable.state.x,
-          y: this.draggable.state.y
+          x: x || this.draggable.state.x,
+          y: y || this.draggable.state.y
         });
@@ -464,3 +456,4 @@ }
     value: function updateSize(size) {
-      this.setState({ width: size.width, height: size.height });
+      if (!this.resizable) return;
+      this.resizable.updateSize({ width: size.width, height: size.height });
     }
@@ -483,3 +476,3 @@ }, {
       var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
-      var innerStyle = _extends({}, boxStyle, {
+      var innerStyle = _extends({}, resizableStyle, {
         zIndex: this.state.z
@@ -496,3 +489,3 @@ }, cursorStyle, this.props.style);
           handle: this.props.dragHandleClassName,
-          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
+          defaultPosition: this.props.default,
           onStart: this.onDragStart,
@@ -504,3 +497,4 @@ onDrag: this.onDrag,
           grid: this.props.dragGrid,
-          bounds: this.props.bounds ? this.state.bounds : undefined
+          bounds: this.props.bounds ? this.state.bounds : undefined,
+          position: this.props.position
         },
@@ -514,2 +508,4 @@ React.createElement(
             },
+            defaultSize: this.props.default,
+            size: this.props.size,
             enable: this.props.enableResizing,
@@ -520,4 +516,2 @@ onResizeStart: this.onResizeStart,
             style: innerStyle,
-            width: this.state.width,
-            height: this.state.height,
             minWidth: this.props.minWidth,
@@ -524,0 +518,0 @@ minHeight: this.props.minHeight,

lib/index.js

@@ -230,3 +230,3 @@ import { Component, createElement } from 'react';
 
-var boxStyle = {
+var resizableStyle = {
   width: 'auto',
@@ -252,4 +252,4 @@ height: 'auto',
       original: {
-        x: props.default.x || 0,
-        y: props.default.y || 0
+        x: 0,
+        y: 0
       },
@@ -262,4 +262,2 @@ bounds: {
       },
-      width: props.default.width,
-      height: props.default.height,
       maxWidth: props.maxWidth,
@@ -284,10 +282,2 @@ maxHeight: props.maxHeight,
       }
-      // 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 });
-      // }
     }
@@ -415,2 +405,4 @@ }, {
       var selfTop = 0;
+      var x = void 0;
+      var y = void 0;
       if (this.props.bounds) {
@@ -430,13 +422,13 @@ var parent = this.resizable && this.resizable.parentNode;
       if (/left/i.test(direction)) {
-        var _x = selfLeft >= parentLeft ? this.state.original.x - delta.width : parentLeft - selfLeft;
-        this.draggable.setState({ x: _x });
+        x = selfLeft >= parentLeft ? this.state.original.x - delta.width : parentLeft - selfLeft;
+        this.draggable.setState({ x: x });
       }
       if (/top/i.test(direction)) {
-        var _y = selfTop >= parentTop ? this.state.original.y - delta.height : parentTop - selfTop;
-        this.draggable.setState({ y: _y });
+        y = selfTop >= parentTop ? this.state.original.y - delta.height : parentTop - selfTop;
+        this.draggable.setState({ y: y });
       }
       if (this.props.onResize) {
         this.props.onResize(e, direction, refToResizableElement, delta, {
-          x: this.draggable.state.x,
-          y: this.draggable.state.y
+          x: x || this.draggable.state.x,
+          y: y || this.draggable.state.y
         });
@@ -460,3 +452,4 @@ }
     value: function updateSize(size) {
-      this.setState({ width: size.width, height: size.height });
+      if (!this.resizable) return;
+      this.resizable.updateSize({ width: size.width, height: size.height });
     }
@@ -479,3 +472,3 @@ }, {
       var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
-      var innerStyle = _extends({}, boxStyle, {
+      var innerStyle = _extends({}, resizableStyle, {
         zIndex: this.state.z
@@ -492,3 +485,3 @@ }, cursorStyle, this.props.style);
           handle: this.props.dragHandleClassName,
-          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
+          defaultPosition: this.props.default,
           onStart: this.onDragStart,
@@ -500,3 +493,4 @@ onDrag: this.onDrag,
           grid: this.props.dragGrid,
-          bounds: this.props.bounds ? this.state.bounds : undefined
+          bounds: this.props.bounds ? this.state.bounds : undefined,
+          position: this.props.position
         },
@@ -510,2 +504,4 @@ createElement(
             },
+            defaultSize: this.props.default,
+            size: this.props.size,
             enable: this.props.enableResizing,
@@ -516,4 +512,2 @@ onResizeStart: this.onResizeStart,
             style: innerStyle,
-            width: this.state.width,
-            height: this.state.height,
             minWidth: this.props.minWidth,
@@ -520,0 +514,0 @@ minHeight: this.props.minHeight,

lib/react-rnd.umd.js

 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) :
 	typeof define === 'function' && define.amd ? define(['react', 'react-dom', 'react-draggable', 're-resizable'], factory) :
-	(global['react-rnd'] = factory(global.React,global.reactDom,global.Draggable,global.Resizable));
+	(global['react-rnd'] = factory(global.React,global.ReactDOM,global.Draggable,global.Resizable));
 }(this, (function (React,reactDom,Draggable,Resizable) { 'use strict';
@@ -234,3 +234,3 @@
 
-var boxStyle = {
+var resizableStyle = {
   width: 'auto',
@@ -256,4 +256,4 @@ height: 'auto',
       original: {
-        x: props.default.x || 0,
-        y: props.default.y || 0
+        x: 0,
+        y: 0
       },
@@ -266,4 +266,2 @@ bounds: {
       },
-      width: props.default.width,
-      height: props.default.height,
       maxWidth: props.maxWidth,
@@ -288,10 +286,2 @@ maxHeight: props.maxHeight,
       }
-      // 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 });
-      // }
     }
@@ -419,2 +409,4 @@ }, {
       var selfTop = 0;
+      var x = void 0;
+      var y = void 0;
       if (this.props.bounds) {
@@ -434,13 +426,13 @@ var parent = this.resizable && this.resizable.parentNode;
       if (/left/i.test(direction)) {
-        var _x = selfLeft >= parentLeft ? this.state.original.x - delta.width : parentLeft - selfLeft;
-        this.draggable.setState({ x: _x });
+        x = selfLeft >= parentLeft ? this.state.original.x - delta.width : parentLeft - selfLeft;
+        this.draggable.setState({ x: x });
       }
       if (/top/i.test(direction)) {
-        var _y = selfTop >= parentTop ? this.state.original.y - delta.height : parentTop - selfTop;
-        this.draggable.setState({ y: _y });
+        y = selfTop >= parentTop ? this.state.original.y - delta.height : parentTop - selfTop;
+        this.draggable.setState({ y: y });
       }
       if (this.props.onResize) {
         this.props.onResize(e, direction, refToResizableElement, delta, {
-          x: this.draggable.state.x,
-          y: this.draggable.state.y
+          x: x || this.draggable.state.x,
+          y: y || this.draggable.state.y
         });
@@ -464,3 +456,4 @@ }
     value: function updateSize(size) {
-      this.setState({ width: size.width, height: size.height });
+      if (!this.resizable) return;
+      this.resizable.updateSize({ width: size.width, height: size.height });
     }
@@ -483,3 +476,3 @@ }, {
       var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
-      var innerStyle = _extends({}, boxStyle, {
+      var innerStyle = _extends({}, resizableStyle, {
         zIndex: this.state.z
@@ -496,3 +489,3 @@ }, cursorStyle, this.props.style);
           handle: this.props.dragHandleClassName,
-          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
+          defaultPosition: this.props.default,
           onStart: this.onDragStart,
@@ -504,3 +497,4 @@ onDrag: this.onDrag,
           grid: this.props.dragGrid,
-          bounds: this.props.bounds ? this.state.bounds : undefined
+          bounds: this.props.bounds ? this.state.bounds : undefined,
+          position: this.props.position
         },
@@ -514,2 +508,4 @@ React.createElement(
             },
+            defaultSize: this.props.default,
+            size: this.props.size,
             enable: this.props.enableResizing,
@@ -520,4 +516,2 @@ onResizeStart: this.onResizeStart,
             style: innerStyle,
-            width: this.state.width,
-            height: this.state.height,
             minWidth: this.props.minWidth,
@@ -524,0 +518,0 @@ minHeight: this.props.minHeight,

package.json

 {
   "name": "react-rnd",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "",
@@ -23,4 +23,2 @@ "title": "react-rnd",
     "build": "npm-run-all --parallel build:prod:*",
-    "dev": "rollup -c config/dev.js -w",
-    "browse": "browser-sync start --s --index 'html/index.html' --files 'html/**/*.html, build/**/*.js' --no-notify",
     "test": "NODE_ENV='test' avaron src/index.test.js --renderer",
@@ -49,3 +47,3 @@ "test:ci": "npm run flow && npm run build",
     "avaron": "^0.0.13",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.0.0",
     "babel-plugin-external-helpers": "^6.22.0",
@@ -97,5 +95,5 @@ "babel-plugin-transform-class-properties": "^6.24.1",
   "dependencies": {
-    "re-resizable": "^3.0.0",
+    "re-resizable": "^4.0.0",
     "react-draggable": "^3.0.3"
   }
 }

README.md

@@ -49,3 +49,3 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
 
-### Minimum example
+### Example with `default`
 
@@ -65,2 +65,21 @@ ``` javascript
 
+### Example with `position` and `size`
+
+``` javascript
+<Rnd
+  size={{ width: this.state.width,  height: this.state.height }}
+  position={{ x: this.state.x, y: this.state.y }}
+  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
+  onResize={(e, direction, ref, delta, position) => {
+    this.setState({
+      width: ref.offsetWidth,
+      height: ref.offsetHeight,
+      ...position,
+    });
+  }}
+>
+  001
+</Rnd>
+```
+
 ### Example
@@ -74,3 +93,3 @@
 
-The `width` and `height` property is used to set the default size of a component.
+The `width` and `height` property is used to set the default size of the component.
 For example, you can set `300`, `'300px'`, `50%`.     
@@ -81,2 +100,33 @@ If omitted, set `'auto'`.
 
+### `size?: { width: (number | string), height: (number | string) };`
+
+The `size` property is used to set size of the component.
+For example, you can set 300, '300px', 50%.
+
+Use `size` if you need to control size state by yourself.
+
+### `position?: { x: number, y: number };`
+
+The `position` property is used to set position of the component.
+Use `position` if you need to control size state by yourself.
+
+see, following example.    
+    
+``` javascript
+<Rnd
+  size={{ width: this.state.width,  height: this.state.height }}
+  position={{ x: this.state.x, y: this.state.y }}
+  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
+  onResize={(e, direction, ref, delta, position) => {
+    this.setState({
+      width: ref.offsetWidth,
+      height: ref.offsetHeight,
+      ...position,
+    });
+  }}
+>
+  001
+</Rnd>
+```
+
 #### `className?: string;`
@@ -426,2 +476,7 @@
 
+#### v7.1.0
+
+- Add `size`.
+- Add `position`.
+
 #### v7.0.0
@@ -428,0 +483,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

636

increased by9.47%

Worsened metrics

Total package byte prevSize

178136

decreased by-0.77%

Lines of code

1350

decreased by-1.32%

Dependency changes

• + Addedre-resizable@4.11.0(transitive)

• - Removedre-resizable@3.0.0(transitive)

• Updatedre-resizable@^4.0.0