re-resizable - npm Package Compare versions

Comparing version 3.0.0-beta.3 to 3.0.0-beta.4

lib/index.es5.js

 'use strict';
 
 var React = require('react');
-var React__default = React['default'];
 
-var babelHelpers = {};
-
-
-
-
 var asyncGenerator = function () {
@@ -208,24 +202,2 @@ function AwaitValue(value) {
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-babelHelpers;
-
 var styles = {
@@ -333,5 +305,7 @@ base: {
 
-var Resizable = function (_Component) {
-  inherits(Resizable, _Component);
+var definedProps = ['style', 'className', 'grid', 'bounds', 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
 
+var Resizable = function (_React$Component) {
+  inherits(Resizable, _React$Component);
+
   function Resizable(props) {
@@ -357,2 +331,4 @@ classCallCheck(this, Resizable);
     };
+
+    _this.updateExtendsProps(props);
     _this.onResizeStart = _this.onResizeStart.bind(_this);
@@ -374,2 +350,11 @@ _this.onMouseMove = _this.onMouseMove.bind(_this);
   createClass(Resizable, [{
+    key: 'updateExtendsProps',
+    value: function updateExtendsProps(props) {
+      this.extendsProps = Object.keys(props).reduce(function (acc, key) {
+        if (definedProps.includes(key)) return acc;
+        acc[key] = props[key];
+        return acc;
+      }, {});
+    }
+  }, {
     key: 'getParentSize',
@@ -388,8 +373,2 @@ value: function getParentSize() {
       var size = this.size;
-      // const debounced = debounce(() => {
-      // this.setState(this.style);
-      // }, 0);
-      // const ro = new ResizeObserver(debounced);
-      // ro.observe(this.parentNode);
-      // If props.width or height is not defined, set default size when mounted.
       this.setState({
@@ -421,2 +400,3 @@ width: this.state.width || size.width,
       }
+      this.updateExtendsProps(this.props);
     }
@@ -535,5 +515,5 @@ }, {
 
-          var _resizable$getBoundin = this.resizable.getBoundingClientRect(),
-              _left = _resizable$getBoundin.left,
-              _top = _resizable$getBoundin.top;
+          var _getBoundingClientRec = this.resizable.getBoundingClientRect(),
+              _left = _getBoundingClientRec.left,
+              _top = _getBoundingClientRec.top;
 
@@ -547,5 +527,5 @@ var boundWidth = parent.offsetWidth + (parentLeft - _left);
         if (typeof window !== 'undefined') {
-          var _resizable$getBoundin2 = this.resizable.getBoundingClientRect(),
-              _left2 = _resizable$getBoundin2.left,
-              _top2 = _resizable$getBoundin2.top;
+          var _getBoundingClientRec2 = this.resizable.getBoundingClientRect(),
+              _left2 = _getBoundingClientRec2.left,
+              _top2 = _getBoundingClientRec2.top;
 
@@ -562,5 +542,5 @@ var _boundWidth = window.innerWidth - _left2;
 
-        var _resizable$getBoundin3 = this.resizable.getBoundingClientRect(),
-            _left3 = _resizable$getBoundin3.left,
-            _top3 = _resizable$getBoundin3.top;
+        var _getBoundingClientRec3 = this.resizable.getBoundingClientRect(),
+            _left3 = _getBoundingClientRec3.left,
+            _top3 = _getBoundingClientRec3.top;
 
@@ -574,5 +554,5 @@ if (!(this.props.bounds instanceof HTMLElement)) return;
 
-      var computedMinWidth = typeof minWidth === 'undefined' || minWidth < 0 ? 0 : minWidth;
+      var computedMinWidth = typeof minWidth === 'undefined' || minWidth < 10 ? 10 : minWidth;
       var computedMaxWidth = typeof maxWidth === 'undefined' || maxWidth < 0 ? newWidth : maxWidth;
-      var computedMinHeight = typeof minHeight === 'undefined' || minHeight < 0 ? 0 : minHeight;
+      var computedMinHeight = typeof minHeight === 'undefined' || minHeight < 10 ? 10 : minHeight;
       var computedMaxHeight = typeof maxHeight === 'undefined' || maxHeight < 0 ? newHeight : maxHeight;
@@ -660,3 +640,3 @@
         if (enable[dir] !== false) {
-          return React__default.createElement(Resizer, {
+          return React.createElement(Resizer, {
             key: dir,
@@ -673,3 +653,3 @@ direction: dir,
       // #93 Wrap the resize box in span (will not break 100% width/height)
-      return React__default.createElement(
+      return React.createElement(
         'span',
@@ -689,7 +669,3 @@ {
       var userSelect = this.state.isResizing ? userSelectNone : userSelectAuto;
-      var _props3 = this.props,
-          style = _props3.style,
-          className = _props3.className;
-
-      return React__default.createElement(
+      return React.createElement(
         'div',
@@ -702,3 +678,3 @@ _extends({
             position: 'relative'
-          }, userSelect, style, this.style, {
+          }, userSelect, this.props.style, this.style, {
             maxWidth: this.props.maxWidth,
@@ -710,4 +686,4 @@ maxHeight: this.props.maxHeight,
           }),
-          className: className
-        }, this.props.extendsProps),
+          className: this.props.className
+        }, this.extendsProps),
         this.props.children,
@@ -720,3 +696,3 @@ this.renderResizer()
     get: function get$$1() {
-      return this.props.parentNode || this.resizable.parentNode;
+      return this.resizable.parentNode;
     }
@@ -723,0 +699,0 @@ }, {

lib/index.js

 import { Component, createElement } from 'react';
-import React__default from 'react';
 
-var babelHelpers = {};
-
-
-
-
 var asyncGenerator = function () {
@@ -206,24 +200,2 @@ function AwaitValue(value) {
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-babelHelpers;
-
 var styles = {
@@ -331,5 +303,7 @@ base: {
 
-var Resizable = function (_Component) {
-  inherits(Resizable, _Component);
+var definedProps = ['style', 'className', 'grid', 'bounds', 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
 
+var Resizable = function (_React$Component) {
+  inherits(Resizable, _React$Component);
+
   function Resizable(props) {
@@ -355,2 +329,4 @@ classCallCheck(this, Resizable);
     };
+
+    _this.updateExtendsProps(props);
     _this.onResizeStart = _this.onResizeStart.bind(_this);
@@ -372,2 +348,11 @@ _this.onMouseMove = _this.onMouseMove.bind(_this);
   createClass(Resizable, [{
+    key: 'updateExtendsProps',
+    value: function updateExtendsProps(props) {
+      this.extendsProps = Object.keys(props).reduce(function (acc, key) {
+        if (definedProps.includes(key)) return acc;
+        acc[key] = props[key];
+        return acc;
+      }, {});
+    }
+  }, {
     key: 'getParentSize',
@@ -386,8 +371,2 @@ value: function getParentSize() {
       var size = this.size;
-      // const debounced = debounce(() => {
-      // this.setState(this.style);
-      // }, 0);
-      // const ro = new ResizeObserver(debounced);
-      // ro.observe(this.parentNode);
-      // If props.width or height is not defined, set default size when mounted.
       this.setState({
@@ -419,2 +398,3 @@ width: this.state.width || size.width,
       }
+      this.updateExtendsProps(this.props);
     }
@@ -533,5 +513,5 @@ }, {
 
-          var _resizable$getBoundin = this.resizable.getBoundingClientRect(),
-              _left = _resizable$getBoundin.left,
-              _top = _resizable$getBoundin.top;
+          var _getBoundingClientRec = this.resizable.getBoundingClientRect(),
+              _left = _getBoundingClientRec.left,
+              _top = _getBoundingClientRec.top;
 
@@ -545,5 +525,5 @@ var boundWidth = parent.offsetWidth + (parentLeft - _left);
         if (typeof window !== 'undefined') {
-          var _resizable$getBoundin2 = this.resizable.getBoundingClientRect(),
-              _left2 = _resizable$getBoundin2.left,
-              _top2 = _resizable$getBoundin2.top;
+          var _getBoundingClientRec2 = this.resizable.getBoundingClientRect(),
+              _left2 = _getBoundingClientRec2.left,
+              _top2 = _getBoundingClientRec2.top;
 
@@ -560,5 +540,5 @@ var _boundWidth = window.innerWidth - _left2;
 
-        var _resizable$getBoundin3 = this.resizable.getBoundingClientRect(),
-            _left3 = _resizable$getBoundin3.left,
-            _top3 = _resizable$getBoundin3.top;
+        var _getBoundingClientRec3 = this.resizable.getBoundingClientRect(),
+            _left3 = _getBoundingClientRec3.left,
+            _top3 = _getBoundingClientRec3.top;
 
@@ -572,5 +552,5 @@ if (!(this.props.bounds instanceof HTMLElement)) return;
 
-      var computedMinWidth = typeof minWidth === 'undefined' || minWidth < 0 ? 0 : minWidth;
+      var computedMinWidth = typeof minWidth === 'undefined' || minWidth < 10 ? 10 : minWidth;
       var computedMaxWidth = typeof maxWidth === 'undefined' || maxWidth < 0 ? newWidth : maxWidth;
-      var computedMinHeight = typeof minHeight === 'undefined' || minHeight < 0 ? 0 : minHeight;
+      var computedMinHeight = typeof minHeight === 'undefined' || minHeight < 10 ? 10 : minHeight;
       var computedMaxHeight = typeof maxHeight === 'undefined' || maxHeight < 0 ? newHeight : maxHeight;
@@ -658,3 +638,3 @@
         if (enable[dir] !== false) {
-          return React__default.createElement(Resizer, {
+          return createElement(Resizer, {
             key: dir,
@@ -671,3 +651,3 @@ direction: dir,
       // #93 Wrap the resize box in span (will not break 100% width/height)
-      return React__default.createElement(
+      return createElement(
         'span',
@@ -687,7 +667,3 @@ {
       var userSelect = this.state.isResizing ? userSelectNone : userSelectAuto;
-      var _props3 = this.props,
-          style = _props3.style,
-          className = _props3.className;
-
-      return React__default.createElement(
+      return createElement(
         'div',
@@ -700,3 +676,3 @@ _extends({
             position: 'relative'
-          }, userSelect, style, this.style, {
+          }, userSelect, this.props.style, this.style, {
             maxWidth: this.props.maxWidth,
@@ -708,4 +684,4 @@ maxHeight: this.props.maxHeight,
           }),
-          className: className
-        }, this.props.extendsProps),
+          className: this.props.className
+        }, this.extendsProps),
         this.props.children,
@@ -718,3 +694,3 @@ this.renderResizer()
     get: function get$$1() {
-      return this.props.parentNode || this.resizable.parentNode;
+      return this.resizable.parentNode;
     }
@@ -721,0 +697,0 @@ }, {

lib/re-resizable.umd.js

@@ -7,9 +7,2 @@ (function (global, factory) {
 
-var React__default = React['default'];
-
-var babelHelpers = {};
-
-
-
-
 var asyncGenerator = function () {
@@ -212,24 +205,2 @@ function AwaitValue(value) {
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-babelHelpers;
-
 var styles = {
@@ -337,5 +308,7 @@ base: {
 
-var Resizable = function (_Component) {
-  inherits(Resizable, _Component);
+var definedProps = ['style', 'className', 'grid', 'bounds', 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop'];
 
+var Resizable = function (_React$Component) {
+  inherits(Resizable, _React$Component);
+
   function Resizable(props) {
@@ -361,2 +334,4 @@ classCallCheck(this, Resizable);
     };
+
+    _this.updateExtendsProps(props);
     _this.onResizeStart = _this.onResizeStart.bind(_this);
@@ -378,2 +353,11 @@ _this.onMouseMove = _this.onMouseMove.bind(_this);
   createClass(Resizable, [{
+    key: 'updateExtendsProps',
+    value: function updateExtendsProps(props) {
+      this.extendsProps = Object.keys(props).reduce(function (acc, key) {
+        if (definedProps.includes(key)) return acc;
+        acc[key] = props[key];
+        return acc;
+      }, {});
+    }
+  }, {
     key: 'getParentSize',
@@ -392,8 +376,2 @@ value: function getParentSize() {
       var size = this.size;
-      // const debounced = debounce(() => {
-      // this.setState(this.style);
-      // }, 0);
-      // const ro = new ResizeObserver(debounced);
-      // ro.observe(this.parentNode);
-      // If props.width or height is not defined, set default size when mounted.
       this.setState({
@@ -425,2 +403,3 @@ width: this.state.width || size.width,
       }
+      this.updateExtendsProps(this.props);
     }
@@ -539,5 +518,5 @@ }, {
 
-          var _resizable$getBoundin = this.resizable.getBoundingClientRect(),
-              _left = _resizable$getBoundin.left,
-              _top = _resizable$getBoundin.top;
+          var _getBoundingClientRec = this.resizable.getBoundingClientRect(),
+              _left = _getBoundingClientRec.left,
+              _top = _getBoundingClientRec.top;
 
@@ -551,5 +530,5 @@ var boundWidth = parent.offsetWidth + (parentLeft - _left);
         if (typeof window !== 'undefined') {
-          var _resizable$getBoundin2 = this.resizable.getBoundingClientRect(),
-              _left2 = _resizable$getBoundin2.left,
-              _top2 = _resizable$getBoundin2.top;
+          var _getBoundingClientRec2 = this.resizable.getBoundingClientRect(),
+              _left2 = _getBoundingClientRec2.left,
+              _top2 = _getBoundingClientRec2.top;
 
@@ -566,5 +545,5 @@ var _boundWidth = window.innerWidth - _left2;
 
-        var _resizable$getBoundin3 = this.resizable.getBoundingClientRect(),
-            _left3 = _resizable$getBoundin3.left,
-            _top3 = _resizable$getBoundin3.top;
+        var _getBoundingClientRec3 = this.resizable.getBoundingClientRect(),
+            _left3 = _getBoundingClientRec3.left,
+            _top3 = _getBoundingClientRec3.top;
 
@@ -578,5 +557,5 @@ if (!(this.props.bounds instanceof HTMLElement)) return;
 
-      var computedMinWidth = typeof minWidth === 'undefined' || minWidth < 0 ? 0 : minWidth;
+      var computedMinWidth = typeof minWidth === 'undefined' || minWidth < 10 ? 10 : minWidth;
       var computedMaxWidth = typeof maxWidth === 'undefined' || maxWidth < 0 ? newWidth : maxWidth;
-      var computedMinHeight = typeof minHeight === 'undefined' || minHeight < 0 ? 0 : minHeight;
+      var computedMinHeight = typeof minHeight === 'undefined' || minHeight < 10 ? 10 : minHeight;
       var computedMaxHeight = typeof maxHeight === 'undefined' || maxHeight < 0 ? newHeight : maxHeight;
@@ -664,3 +643,3 @@
         if (enable[dir] !== false) {
-          return React__default.createElement(Resizer, {
+          return React.createElement(Resizer, {
             key: dir,
@@ -677,3 +656,3 @@ direction: dir,
       // #93 Wrap the resize box in span (will not break 100% width/height)
-      return React__default.createElement(
+      return React.createElement(
         'span',
@@ -693,7 +672,3 @@ {
       var userSelect = this.state.isResizing ? userSelectNone : userSelectAuto;
-      var _props3 = this.props,
-          style = _props3.style,
-          className = _props3.className;
-
-      return React__default.createElement(
+      return React.createElement(
         'div',
@@ -706,3 +681,3 @@ _extends({
             position: 'relative'
-          }, userSelect, style, this.style, {
+          }, userSelect, this.props.style, this.style, {
             maxWidth: this.props.maxWidth,
@@ -714,4 +689,4 @@ maxHeight: this.props.maxHeight,
           }),
-          className: className
-        }, this.props.extendsProps),
+          className: this.props.className
+        }, this.extendsProps),
         this.props.children,
@@ -724,3 +699,3 @@ this.renderResizer()
     get: function get$$1() {
-      return this.props.parentNode || this.resizable.parentNode;
+      return this.resizable.parentNode;
     }
@@ -727,0 +702,0 @@ }, {

package.json

 {
   "name": "re-resizable",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
   "description": "Resizable component for React.",
@@ -29,3 +29,3 @@ "title": "re-resizable",
     "prepublish": "npm run build && npm run flow-copy",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6066",
     "build-storybook": "build-storybook",
@@ -65,3 +65,3 @@ "deploy": "npm run build-storybook && gh-pages -d storybook-static"
     "eslint-plugin-react": "^7.1.0",
-    "flow-bin": "^0.54.0",
+    "flow-bin": "^0.54.1",
     "flow-copy-source": "^1.2.0",
@@ -95,4 +95,3 @@ "flow-typed": "^2.1.5",
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }

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

223654

increased by2.96%

Number of package files

15

increased by7.14%

Lines of code

2143

increased by4.49%

No dependency changes