re-resizable - npm Package Compare versions

Comparing version 6.7.0 to 6.8.0

lib/index.d.ts

@@ -65,2 +65,3 @@ import * as React from 'react';
     bounds?: 'parent' | 'window' | HTMLElement;
+    boundsByDirection?: boolean;
     size?: Size;
@@ -147,3 +148,5 @@ minWidth?: string | number;
     resizableLeft: number;
+    resizableRight: number;
     resizableTop: number;
+    resizableBottom: number;
     targetLeft: number;
@@ -150,0 +153,0 @@ targetTop: number;

lib/index.es5.js

@@ -220,2 +220,3 @@ 'use strict';
     'bounds',
+    'boundsByDirection',
     'size',
@@ -257,3 +258,5 @@ 'defaultSize',
         _this.resizableLeft = 0;
+        _this.resizableRight = 0;
         _this.resizableTop = 0;
+        _this.resizableBottom = 0;
         // For target boundary
@@ -494,9 +497,17 @@ _this.targetLeft = 0;
     Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) {
+        var boundsByDirection = this.props.boundsByDirection;
+        var direction = this.state.direction;
+        var widthByDirection = boundsByDirection && hasDirection('left', direction);
+        var heightByDirection = boundsByDirection && hasDirection('top', direction);
+        var boundWidth;
+        var boundHeight;
         if (this.props.bounds === 'parent') {
             var parent_1 = this.parentNode;
             if (parent_1) {
-                var boundWidth = parent_1.offsetWidth + (this.parentLeft - this.resizableLeft);
-                var boundHeight = parent_1.offsetHeight + (this.parentTop - this.resizableTop);
-                maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
-                maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
+                boundWidth = widthByDirection
+                    ? this.resizableRight - this.parentLeft
+                    : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft);
+                boundHeight = heightByDirection
+                    ? this.resizableBottom - this.parentTop
+                    : parent_1.offsetHeight + (this.parentTop - this.resizableTop);
             }
@@ -506,12 +517,20 @@ }
             if (this.window) {
-                var boundWidth = this.window.innerWidth - this.resizableLeft;
-                var boundHeight = this.window.innerHeight - this.resizableTop;
-                maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
-                maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
+                boundWidth = widthByDirection
+                    ? this.resizableRight : this.window.innerWidth - this.resizableLeft;
+                boundHeight = heightByDirection
+                    ? this.resizableBottom : this.window.innerHeight - this.resizableTop;
             }
         }
         else if (this.props.bounds) {
-            var boundWidth = this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
-            var boundHeight = this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
+            boundWidth = widthByDirection
+                ? this.resizableRight - this.targetLeft
+                : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
+            boundHeight = heightByDirection
+                ? this.resizableBottom - this.targetTop
+                : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
+        }
+        if (boundWidth && Number.isFinite(boundWidth)) {
             maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
+        }
+        if (boundHeight && Number.isFinite(boundHeight)) {
             maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
@@ -600,5 +619,7 @@ }
         if (this.resizable) {
-            var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top;
+            var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom;
             this.resizableLeft = left;
+            this.resizableRight = right;
             this.resizableTop = top_1;
+            this.resizableBottom = bottom;
         }
@@ -605,0 +626,0 @@ };

lib/index.js

@@ -118,2 +118,3 @@ var __extends = (this && this.__extends) || (function () {
     'bounds',
+    'boundsByDirection',
     'size',
@@ -155,3 +156,5 @@ 'defaultSize',
         _this.resizableLeft = 0;
+        _this.resizableRight = 0;
         _this.resizableTop = 0;
+        _this.resizableBottom = 0;
         // For target boundary
@@ -392,9 +395,17 @@ _this.targetLeft = 0;
     Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) {
+        var boundsByDirection = this.props.boundsByDirection;
+        var direction = this.state.direction;
+        var widthByDirection = boundsByDirection && hasDirection('left', direction);
+        var heightByDirection = boundsByDirection && hasDirection('top', direction);
+        var boundWidth;
+        var boundHeight;
         if (this.props.bounds === 'parent') {
             var parent_1 = this.parentNode;
             if (parent_1) {
-                var boundWidth = parent_1.offsetWidth + (this.parentLeft - this.resizableLeft);
-                var boundHeight = parent_1.offsetHeight + (this.parentTop - this.resizableTop);
-                maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
-                maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
+                boundWidth = widthByDirection
+                    ? this.resizableRight - this.parentLeft
+                    : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft);
+                boundHeight = heightByDirection
+                    ? this.resizableBottom - this.parentTop
+                    : parent_1.offsetHeight + (this.parentTop - this.resizableTop);
             }
@@ -404,12 +415,20 @@ }
             if (this.window) {
-                var boundWidth = this.window.innerWidth - this.resizableLeft;
-                var boundHeight = this.window.innerHeight - this.resizableTop;
-                maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
-                maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
+                boundWidth = widthByDirection
+                    ? this.resizableRight : this.window.innerWidth - this.resizableLeft;
+                boundHeight = heightByDirection
+                    ? this.resizableBottom : this.window.innerHeight - this.resizableTop;
             }
         }
         else if (this.props.bounds) {
-            var boundWidth = this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
-            var boundHeight = this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
+            boundWidth = widthByDirection
+                ? this.resizableRight - this.targetLeft
+                : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
+            boundHeight = heightByDirection
+                ? this.resizableBottom - this.targetTop
+                : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
+        }
+        if (boundWidth && Number.isFinite(boundWidth)) {
             maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
+        }
+        if (boundHeight && Number.isFinite(boundHeight)) {
             maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
@@ -498,5 +517,7 @@ }
         if (this.resizable) {
-            var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top;
+            var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom;
             this.resizableLeft = left;
+            this.resizableRight = right;
             this.resizableTop = top_1;
+            this.resizableBottom = bottom;
         }
@@ -503,0 +524,0 @@ };

package.json

 {
   "name": "re-resizable",
-  "version": "6.7.0",
+  "version": "6.8.0",
   "description": "Resizable component for React.",
@@ -53,4 +53,4 @@ "title": "re-resizable",
     "@storybook/addon-options": "5.3.21",
-    "@storybook/react": "6.0.26",
-    "@types/node": "12.12.68",
+    "@storybook/react": "6.0.27",
+    "@types/node": "12.12.70",
     "@types/react": "16.8.7",
@@ -109,5 +109,5 @@ "@types/react-dom": "16.9.8",
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^16.13.1 || ^17.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0"
   }
 }

README.md

@@ -174,2 +174,11 @@ <p align="center"><img src ="https://github.com/bokuweb/re-resizable/blob/master/logo.png?raw=true" /></p>
 
+#### `boundsByDirection?: boolean;`
+
+By default max dimensions based on left and top element position.
+Width grow to right side, height grow to bottom side.
+Set `true` for detect max dimensions by direction.
+For example: enable `boundsByDirection` when resizable component stick on right side of screen and you want resize by left handler;
+
+`false` by default.
+
 #### `handleStyles?: HandleStyles;`
@@ -176,0 +185,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

182228

increased by1.17%

Lines of code

2950

increased by1.55%

Number of lines in readme file

315

increased by2.94%

No dependency changes