react-rnd - npm Package Compare versions

Comparing version 8.0.0-beta.1 to 8.0.0-beta.2

lib/index.es5.js

@@ -114,3 +114,21 @@ 'use strict';
         var parent = this.getParent();
-        var boundary = this.props.bounds === "parent" ? parent : document.querySelector(this.props.bounds);
+        var boundary;
+        if (this.props.bounds === "parent") {
+            boundary = parent;
+        }
+        else if (this.props.bounds === "window") {
+            if (!this.resizable)
+                return;
+            return this.setState({
+                bounds: {
+                    top: 0,
+                    right: window.innerWidth - this.resizable.size.width,
+                    bottom: window.innerHeight - this.resizable.size.height,
+                    left: 0,
+                },
+            });
+        }
+        else {
+            boundary = document.querySelector(this.props.bounds);
+        }
         if (!(boundary instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
@@ -158,5 +176,16 @@ return;
             var parent_1 = this.getParent();
-            var target = this.props.bounds === "parent" ? parent_1 : document.querySelector(this.props.bounds);
+            var boundary = void 0;
+            if (this.props.bounds === "parent") {
+                boundary = parent_1;
+            }
+            else if (this.props.bounds === "window") {
+                boundary = window;
+            }
+            else {
+                boundary = document.querySelector(this.props.bounds);
+            }
             var self_1 = this.getSelfElement();
-            if (self_1 instanceof Element && target instanceof HTMLElement && parent_1 instanceof HTMLElement) {
+            if (self_1 instanceof Element &&
+                (boundary instanceof HTMLElement || boundary === window) &&
+                parent_1 instanceof HTMLElement) {
                 var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
@@ -185,15 +214,17 @@ var parentSize = this.getParentSize();
                 var selfTop = selfRect.top;
-                var targetRect = target.getBoundingClientRect();
-                var targetLeft = targetRect.left;
-                var targetTop = targetRect.top;
+                var boundaryRect = this.props.bounds === "window" ? { left: 0, top: 0 } : boundary.getBoundingClientRect();
+                var boundaryLeft = boundaryRect.left;
+                var boundaryTop = boundaryRect.top;
+                var offsetWidth = this.props.bounds === "window" ? window.innerWidth : boundary.offsetWidth;
+                var offsetHeight = this.props.bounds === "window" ? window.innerHeight : boundary.offsetHeight;
                 if (/left/i.test(dir) && this.resizable) {
-                    var max = selfLeft - targetLeft + this.resizable.size.width;
+                    var max = selfLeft - boundaryLeft + this.resizable.size.width;
                     this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
                 }
                 if (/right/i.test(dir)) {
-                    var max = target.offsetWidth + (targetLeft - selfLeft);
+                    var max = offsetWidth + (boundaryLeft - selfLeft);
                     this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
                 }
                 if (/top/i.test(dir) && this.resizable) {
-                    var max = selfTop - targetTop + this.resizable.size.height;
+                    var max = selfTop - boundaryTop + this.resizable.size.height;
                     this.setState({
@@ -204,3 +235,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,
                 if (/bottom/i.test(dir)) {
-                    var max = target.offsetHeight + (targetTop - selfTop);
+                    var max = offsetHeight + (boundaryTop - selfTop);
                     this.setState({
@@ -207,0 +238,0 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,

lib/index.js

@@ -110,3 +110,21 @@ import { createElement, Component } from 'react';
         var parent = this.getParent();
-        var boundary = this.props.bounds === "parent" ? parent : document.querySelector(this.props.bounds);
+        var boundary;
+        if (this.props.bounds === "parent") {
+            boundary = parent;
+        }
+        else if (this.props.bounds === "window") {
+            if (!this.resizable)
+                return;
+            return this.setState({
+                bounds: {
+                    top: 0,
+                    right: window.innerWidth - this.resizable.size.width,
+                    bottom: window.innerHeight - this.resizable.size.height,
+                    left: 0,
+                },
+            });
+        }
+        else {
+            boundary = document.querySelector(this.props.bounds);
+        }
         if (!(boundary instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
@@ -154,5 +172,16 @@ return;
             var parent_1 = this.getParent();
-            var target = this.props.bounds === "parent" ? parent_1 : document.querySelector(this.props.bounds);
+            var boundary = void 0;
+            if (this.props.bounds === "parent") {
+                boundary = parent_1;
+            }
+            else if (this.props.bounds === "window") {
+                boundary = window;
+            }
+            else {
+                boundary = document.querySelector(this.props.bounds);
+            }
             var self_1 = this.getSelfElement();
-            if (self_1 instanceof Element && target instanceof HTMLElement && parent_1 instanceof HTMLElement) {
+            if (self_1 instanceof Element &&
+                (boundary instanceof HTMLElement || boundary === window) &&
+                parent_1 instanceof HTMLElement) {
                 var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
@@ -181,15 +210,17 @@ var parentSize = this.getParentSize();
                 var selfTop = selfRect.top;
-                var targetRect = target.getBoundingClientRect();
-                var targetLeft = targetRect.left;
-                var targetTop = targetRect.top;
+                var boundaryRect = this.props.bounds === "window" ? { left: 0, top: 0 } : boundary.getBoundingClientRect();
+                var boundaryLeft = boundaryRect.left;
+                var boundaryTop = boundaryRect.top;
+                var offsetWidth = this.props.bounds === "window" ? window.innerWidth : boundary.offsetWidth;
+                var offsetHeight = this.props.bounds === "window" ? window.innerHeight : boundary.offsetHeight;
                 if (/left/i.test(dir) && this.resizable) {
-                    var max = selfLeft - targetLeft + this.resizable.size.width;
+                    var max = selfLeft - boundaryLeft + this.resizable.size.width;
                     this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
                 }
                 if (/right/i.test(dir)) {
-                    var max = target.offsetWidth + (targetLeft - selfLeft);
+                    var max = offsetWidth + (boundaryLeft - selfLeft);
                     this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
                 }
                 if (/top/i.test(dir) && this.resizable) {
-                    var max = selfTop - targetTop + this.resizable.size.height;
+                    var max = selfTop - boundaryTop + this.resizable.size.height;
                     this.setState({
@@ -200,3 +231,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,
                 if (/bottom/i.test(dir)) {
-                    var max = target.offsetHeight + (targetTop - selfTop);
+                    var max = offsetHeight + (boundaryTop - selfTop);
                     this.setState({
@@ -203,0 +234,0 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,

package.json

 {
   "name": "react-rnd",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.2",
   "description": "",
@@ -73,6 +73,6 @@ "title": "react-rnd",
     "sinon": "6.0.0",
-    "tslint": "^5.10.0",
-    "tslint-eslint-rules": "^5.3.1",
-    "tslint-plugin-prettier": "^1.3.0",
-    "tslint-react": "^3.6.0",
+    "tslint": "5.10.0",
+    "tslint-eslint-rules": "5.3.1",
+    "tslint-plugin-prettier": "1.3.0",
+    "tslint-react": "3.6.0",
     "typescript": "2.9.2"
@@ -87,3 +87,3 @@ },
   "dependencies": {
-    "re-resizable": "4.6.1",
+    "re-resizable": "4.7.1",
     "react-draggable": "3.0.5",
@@ -90,0 +90,0 @@ "tslib": "1.9.3"

README.md

@@ -48,3 +48,3 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
 
-TODO:
+[Storybook](http://bokuweb.github.io/react-rnd/stories)
 
@@ -97,4 +97,4 @@ ### CodeSandbox
     this.setState({
-      width: ref.offsetWidth,
-      height: ref.offsetHeight,
+      width: ref.style.width,
+      height: ref.style.height,
       ...position,
@@ -177,6 +177,2 @@ });
 
-#### `z?: number;`
-
-The `z` property is used to set the zIndex of a component.
-
 #### `resizeGrid?: [number, number];`
@@ -529,2 +525,15 @@
 
+#### v8.0.0-beta.2
+
+fix: Upgrade `re-resizable` to fix percentage size and bare behavior.
+
+#### v8.0.0-beta.1
+
+fix: Fixed a bug, controlled position does not work correctly.
+feat: Use `typescript` instead of `flowype`.
+
+#### v8.0.0-beta.0
+
+fix: Remove dummy `<div />`, `isMounted` state and `setParentPosition()`.
+
 #### v7.4.3
@@ -531,0 +540,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100343

increased by2.57%

Lines of code

1641

increased by3.93%

Number of lines in readme file

746

increased by1.22%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedre-resizable@4.7.1(transitive)

• - Removedre-resizable@4.6.1(transitive)

• Updatedre-resizable@4.7.1