re-resizable - npm Package Compare versions

Comparing version 6.5.5 to 6.6.0

CHANGELOG.md

@@ -24,2 +24,14 @@ # Changelog
 
+## [6.5.5 (2020-08-28)](https://github.com/bokuweb/re-resizable/compare/v6.5.4...v6.5.5)
+
+### :nail_care: Enhancement
+
+- fix: instanceof check fails when window is a proxy (#659)
+
+## [6.5.4 (2020-07-13)](https://github.com/bokuweb/re-resizable/compare/v6.5.2...v6.5.4)
+
+### :bug: Bug Fix
+
+- Fixed a bug, when touched in mobile some execption throwed.
+
 ## [6.5.2 (2020-06-26)](https://github.com/bokuweb/re-resizable/compare/v6.5.1...v6.5.2)
@@ -26,0 +38,0 @@

lib/index.d.ts

@@ -38,3 +38,3 @@ import * as React from 'react';
 }
-interface NumberSize {
+export interface NumberSize {
     width: number;
@@ -113,3 +113,2 @@ height: number;
     get propsSize(): Size;
-    get base(): HTMLElement | undefined;
     get size(): NumberSize;
@@ -160,2 +159,4 @@ get sizeStyle(): {
     componentDidMount(): void;
+    appendBase: () => HTMLDivElement | null;
+    removeBase: (base: HTMLElement) => void;
     componentWillUnmount(): void;
@@ -162,0 +163,0 @@ createSizeForCssProperty(newSize: number | string, kind: 'width' | 'height'): number | string;

lib/index.es5.js

@@ -257,2 +257,33 @@ 'use strict';
         _this.targetTop = 0;
+        _this.appendBase = function () {
+            if (!_this.resizable || !_this.window) {
+                return null;
+            }
+            var parent = _this.parentNode;
+            if (!parent) {
+                return null;
+            }
+            var element = _this.window.document.createElement('div');
+            element.style.width = '100%';
+            element.style.height = '100%';
+            element.style.position = 'absolute';
+            element.style.transform = 'scale(0, 0)';
+            element.style.left = '0';
+            element.style.flex = '0';
+            if (element.classList) {
+                element.classList.add(baseClassName);
+            }
+            else {
+                element.className += baseClassName;
+            }
+            parent.appendChild(element);
+            return element;
+        };
+        _this.removeBase = function (base) {
+            var parent = _this.parentNode;
+            if (!parent) {
+                return;
+            }
+            parent.removeChild(base);
+        };
         _this.ref = function (c) {
@@ -328,20 +359,2 @@ if (c) {
     });
-    Object.defineProperty(Resizable.prototype, "base", {
-        get: function () {
-            var parent = this.parentNode;
-            if (!parent) {
-                return undefined;
-            }
-            var children = [].slice.call(parent.children);
-            for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
-                var n = children_1[_i];
-                if (n.classList.contains(baseClassName)) {
-                    return n;
-                }
-            }
-            return undefined;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(Resizable.prototype, "size", {
@@ -402,3 +415,3 @@ get: function () {
     Resizable.prototype.getParentSize = function () {
-        if (!this.base || !this.parentNode) {
+        if (!this.parentNode) {
             if (!this.window) {
@@ -409,6 +422,9 @@ return { width: 0, height: 0 };
         }
+        var base = this.appendBase();
+        if (!base) {
+            return { width: 0, height: 0 };
+        }
         // INFO: To calculate parent width with flex layout
         var wrapChanged = false;
         var wrap = this.parentNode.style.flexWrap;
-        var minWidth = this.base.style.minWidth;
         if (wrap !== 'wrap') {
@@ -419,13 +435,12 @@ wrapChanged = true;
         }
-        this.base.style.position = 'relative';
-        this.base.style.minWidth = '100%';
+        base.style.position = 'relative';
+        base.style.minWidth = '100%';
         var size = {
-            width: this.base.offsetWidth,
-            height: this.base.offsetHeight,
+            width: base.offsetWidth,
+            height: base.offsetHeight,
         };
-        this.base.style.position = 'absolute';
         if (wrapChanged) {
             this.parentNode.style.flexWrap = wrap;
         }
-        this.base.style.minWidth = minWidth;
+        this.removeBase(base);
         return size;
@@ -464,23 +479,2 @@ };
         });
-        var parent = this.parentNode;
-        if (!parent) {
-            return;
-        }
-        if (this.base) {
-            return;
-        }
-        var element = this.window.document.createElement('div');
-        element.style.width = '100%';
-        element.style.height = '100%';
-        element.style.position = 'absolute';
-        element.style.transform = 'scale(0, 0)';
-        element.style.left = '0';
-        element.style.flex = '0';
-        if (element.classList) {
-            element.classList.add(baseClassName);
-        }
-        else {
-            element.className += baseClassName;
-        }
-        parent.appendChild(element);
     };
@@ -490,10 +484,2 @@ Resizable.prototype.componentWillUnmount = function () {
             this.unbindEvents();
-            var parent_1 = this.parentNode;
-            if (!this.base || !parent_1) {
-                return;
-            }
-            if (!parent_1 || !this.base) {
-                return;
-            }
-            parent_1.removeChild(this.base);
         }
@@ -511,6 +497,6 @@ };
         if (this.props.bounds === 'parent') {
-            var parent_2 = this.parentNode;
-            if (parent_2) {
-                var boundWidth = parent_2.offsetWidth + (this.parentLeft - this.resizableLeft);
-                var boundHeight = parent_2.offsetHeight + (this.parentTop - this.resizableTop);
+            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;
@@ -600,5 +586,5 @@ maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
         if (this.props.bounds === 'parent') {
-            var parent_3 = this.parentNode;
-            if (parent_3) {
-                var parentRect = parent_3.getBoundingClientRect();
+            var parent_2 = this.parentNode;
+            if (parent_2) {
+                var parentRect = parent_2.getBoundingClientRect();
                 this.parentLeft = parentRect.left;
@@ -664,5 +650,5 @@ this.parentTop = parentRect.top;
         if (computedStyle.flexBasis !== 'auto') {
-            var parent_4 = this.parentNode;
-            if (parent_4) {
-                var dir = this.window.getComputedStyle(parent_4).flexDirection;
+            var parent_3 = this.parentNode;
+            if (parent_3) {
+                var dir = this.window.getComputedStyle(parent_3).flexDirection;
                 this.flexDir = dir.startsWith('row') ? 'row' : 'column';
@@ -669,0 +655,0 @@ flexBasis = computedStyle.flexBasis;

lib/index.js

@@ -155,2 +155,33 @@ var __extends = (this && this.__extends) || (function () {
         _this.targetTop = 0;
+        _this.appendBase = function () {
+            if (!_this.resizable || !_this.window) {
+                return null;
+            }
+            var parent = _this.parentNode;
+            if (!parent) {
+                return null;
+            }
+            var element = _this.window.document.createElement('div');
+            element.style.width = '100%';
+            element.style.height = '100%';
+            element.style.position = 'absolute';
+            element.style.transform = 'scale(0, 0)';
+            element.style.left = '0';
+            element.style.flex = '0';
+            if (element.classList) {
+                element.classList.add(baseClassName);
+            }
+            else {
+                element.className += baseClassName;
+            }
+            parent.appendChild(element);
+            return element;
+        };
+        _this.removeBase = function (base) {
+            var parent = _this.parentNode;
+            if (!parent) {
+                return;
+            }
+            parent.removeChild(base);
+        };
         _this.ref = function (c) {
@@ -226,20 +257,2 @@ if (c) {
     });
-    Object.defineProperty(Resizable.prototype, "base", {
-        get: function () {
-            var parent = this.parentNode;
-            if (!parent) {
-                return undefined;
-            }
-            var children = [].slice.call(parent.children);
-            for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
-                var n = children_1[_i];
-                if (n.classList.contains(baseClassName)) {
-                    return n;
-                }
-            }
-            return undefined;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(Resizable.prototype, "size", {
@@ -300,3 +313,3 @@ get: function () {
     Resizable.prototype.getParentSize = function () {
-        if (!this.base || !this.parentNode) {
+        if (!this.parentNode) {
             if (!this.window) {
@@ -307,6 +320,9 @@ return { width: 0, height: 0 };
         }
+        var base = this.appendBase();
+        if (!base) {
+            return { width: 0, height: 0 };
+        }
         // INFO: To calculate parent width with flex layout
         var wrapChanged = false;
         var wrap = this.parentNode.style.flexWrap;
-        var minWidth = this.base.style.minWidth;
         if (wrap !== 'wrap') {
@@ -317,13 +333,12 @@ wrapChanged = true;
         }
-        this.base.style.position = 'relative';
-        this.base.style.minWidth = '100%';
+        base.style.position = 'relative';
+        base.style.minWidth = '100%';
         var size = {
-            width: this.base.offsetWidth,
-            height: this.base.offsetHeight,
+            width: base.offsetWidth,
+            height: base.offsetHeight,
         };
-        this.base.style.position = 'absolute';
         if (wrapChanged) {
             this.parentNode.style.flexWrap = wrap;
         }
-        this.base.style.minWidth = minWidth;
+        this.removeBase(base);
         return size;
@@ -362,23 +377,2 @@ };
         });
-        var parent = this.parentNode;
-        if (!parent) {
-            return;
-        }
-        if (this.base) {
-            return;
-        }
-        var element = this.window.document.createElement('div');
-        element.style.width = '100%';
-        element.style.height = '100%';
-        element.style.position = 'absolute';
-        element.style.transform = 'scale(0, 0)';
-        element.style.left = '0';
-        element.style.flex = '0';
-        if (element.classList) {
-            element.classList.add(baseClassName);
-        }
-        else {
-            element.className += baseClassName;
-        }
-        parent.appendChild(element);
     };
@@ -388,10 +382,2 @@ Resizable.prototype.componentWillUnmount = function () {
             this.unbindEvents();
-            var parent_1 = this.parentNode;
-            if (!this.base || !parent_1) {
-                return;
-            }
-            if (!parent_1 || !this.base) {
-                return;
-            }
-            parent_1.removeChild(this.base);
         }
@@ -409,6 +395,6 @@ };
         if (this.props.bounds === 'parent') {
-            var parent_2 = this.parentNode;
-            if (parent_2) {
-                var boundWidth = parent_2.offsetWidth + (this.parentLeft - this.resizableLeft);
-                var boundHeight = parent_2.offsetHeight + (this.parentTop - this.resizableTop);
+            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;
@@ -498,5 +484,5 @@ maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
         if (this.props.bounds === 'parent') {
-            var parent_3 = this.parentNode;
-            if (parent_3) {
-                var parentRect = parent_3.getBoundingClientRect();
+            var parent_2 = this.parentNode;
+            if (parent_2) {
+                var parentRect = parent_2.getBoundingClientRect();
                 this.parentLeft = parentRect.left;
@@ -562,5 +548,5 @@ this.parentTop = parentRect.top;
         if (computedStyle.flexBasis !== 'auto') {
-            var parent_4 = this.parentNode;
-            if (parent_4) {
-                var dir = this.window.getComputedStyle(parent_4).flexDirection;
+            var parent_3 = this.parentNode;
+            if (parent_3) {
+                var dir = this.window.getComputedStyle(parent_3).flexDirection;
                 this.flexDir = dir.startsWith('row') ? 'row' : 'column';
@@ -567,0 +553,0 @@ flexBasis = computedStyle.flexBasis;

package.json

 {
   "name": "re-resizable",
-  "version": "6.5.5",
+  "version": "6.6.0",
   "description": "Resizable component for React.",
@@ -42,15 +42,15 @@ "title": "re-resizable",
   "devDependencies": {
-    "@babel/cli": "7.8.4",
-    "@babel/core": "7.9.6",
-    "@babel/plugin-proposal-class-properties": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.9.6",
-    "@babel/preset-react": "7.9.4",
-    "@babel/preset-typescript": "7.9.0",
-    "@babel/traverse": "7.9.6",
-    "@babel/types": "7.9.6",
+    "@babel/cli": "7.11.6",
+    "@babel/core": "7.11.6",
+    "@babel/plugin-proposal-class-properties": "7.10.4",
+    "@babel/plugin-transform-modules-commonjs": "7.10.4",
+    "@babel/preset-react": "7.10.4",
+    "@babel/preset-typescript": "7.10.4",
+    "@babel/traverse": "7.11.5",
+    "@babel/types": "7.11.5",
     "@emotion/core": "10.0.35",
-    "@storybook/addon-info": "5.3.19",
-    "@storybook/addon-options": "5.3.19",
-    "@storybook/react": "5.3.19",
-    "@types/node": "12.12.54",
+    "@storybook/addon-info": "5.3.21",
+    "@storybook/addon-options": "5.3.21",
+    "@storybook/react": "6.0.21",
+    "@types/node": "12.12.62",
     "@types/react": "16.8.7",
@@ -92,3 +92,3 @@ "@types/react-dom": "16.9.8",
     "tslint-plugin-prettier": "2.3.0",
-    "typescript": "4.0.2"
+    "typescript": "4.0.3"
   },
@@ -95,0 +95,0 @@ "typings": "./lib/index.d.ts",

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

Worsened metrics

Total package byte prevSize

179470

decreased by-0.32%

Lines of code

2899

decreased by-0.92%

No dependency changes