react-sortable-hoc - npm Package Compare versions

Comparing version 0.7.4 to 0.8.0

CHANGELOG.md

 Changelog
 ------------
+### 0.8.0
+- Allow `getContainer` to return a promise. This is useful when the container node is rendered by a parent component, since `componentDidMount` fires backwards (from child to parent) [#155](https://github.com/clauderic/react-sortable-hoc/pull/155/)
+
 ### 0.7.4
@@ -4,0 +7,0 @@ - Fix typo in getLockPixelOffset helper

dist/commonjs/SortableContainer/index.js

@@ -417,5 +417,3 @@ 'use strict';
 
-        var _props = this.props,
-            getContainer = _props.getContainer,
-            useWindowAsScrollContainer = _props.useWindowAsScrollContainer;
+        var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer;
 
@@ -428,21 +426,25 @@ /*
 
-        this.container = typeof getContainer === 'function' ? getContainer(this.getWrappedInstance()) : (0, _reactDom.findDOMNode)(this);
-        this.document = this.container.ownerDocument || document;
+        var container = this.getContainer();
 
-        var contentWindow = this.props.contentWindow || this.document.defaultView || window;
+        Promise.resolve(container).then(function (containerNode) {
+          _this2.container = containerNode;
+          _this2.document = _this2.container.ownerDocument || document;
 
-        this.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
-        this.scrollContainer = useWindowAsScrollContainer ? this.document.scrollingElement || this.document.documentElement : this.container;
+          var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window;
 
-        var _loop = function _loop(key) {
-          if (_this2.events.hasOwnProperty(key)) {
-            _utils.events[key].forEach(function (eventName) {
-              return _this2.container.addEventListener(eventName, _this2.events[key], false);
-            });
+          _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
+          _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : _this2.container;
+
+          var _loop = function _loop(key) {
+            if (_this2.events.hasOwnProperty(key)) {
+              _utils.events[key].forEach(function (eventName) {
+                return _this2.container.addEventListener(eventName, _this2.events[key], false);
+              });
+            }
+          };
+
+          for (var key in _this2.events) {
+            _loop(key);
           }
-        };
-
-        for (var key in this.events) {
-          _loop(key);
-        }
+        });
       }
@@ -488,5 +490,5 @@ }, {
       value: function updatePosition(event) {
-        var _props2 = this.props,
-            lockAxis = _props2.lockAxis,
-            lockToContainerEdges = _props2.lockToContainerEdges;
+        var _props = this.props,
+            lockAxis = _props.lockAxis,
+            lockToContainerEdges = _props.lockToContainerEdges;
 
@@ -536,6 +538,6 @@
       value: function animateNodes() {
-        var _props3 = this.props,
-            transitionDuration = _props3.transitionDuration,
-            hideSortableGhost = _props3.hideSortableGhost,
-            onSortOver = _props3.onSortOver;
+        var _props2 = this.props,
+            transitionDuration = _props2.transitionDuration,
+            hideSortableGhost = _props2.hideSortableGhost,
+            onSortOver = _props2.onSortOver;
 
@@ -682,5 +684,18 @@ var nodes = this.manager.getOrderedRefs();
         (0, _invariant2.default)(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call');
+
         return this.refs.wrappedInstance;
       }
     }, {
+      key: 'getContainer',
+      value: function getContainer() {
+        var getContainer = this.props.getContainer;
+
+
+        if (typeof getContainer !== 'function') {
+          return (0, _reactDom.findDOMNode)(this);
+        }
+
+        return getContainer(config.withRef ? this.getWrappedInstance() : undefined);
+      }
+    }, {
       key: 'render',
@@ -687,0 +702,0 @@ value: function render() {

dist/es6/SortableContainer/index.js

 import _extends from 'babel-runtime/helpers/extends';
 import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
+import _Promise from 'babel-runtime/core-js/promise';
 import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
@@ -389,5 +390,3 @@ import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 
-        var _props = this.props,
-            getContainer = _props.getContainer,
-            useWindowAsScrollContainer = _props.useWindowAsScrollContainer;
+        var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer;
 
@@ -400,21 +399,25 @@ /*
 
-        this.container = typeof getContainer === 'function' ? getContainer(this.getWrappedInstance()) : findDOMNode(this);
-        this.document = this.container.ownerDocument || document;
+        var container = this.getContainer();
 
-        var contentWindow = this.props.contentWindow || this.document.defaultView || window;
+        _Promise.resolve(container).then(function (containerNode) {
+          _this2.container = containerNode;
+          _this2.document = _this2.container.ownerDocument || document;
 
-        this.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
-        this.scrollContainer = useWindowAsScrollContainer ? this.document.scrollingElement || this.document.documentElement : this.container;
+          var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window;
 
-        var _loop = function _loop(key) {
-          if (_this2.events.hasOwnProperty(key)) {
-            events[key].forEach(function (eventName) {
-              return _this2.container.addEventListener(eventName, _this2.events[key], false);
-            });
+          _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
+          _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : _this2.container;
+
+          var _loop = function _loop(key) {
+            if (_this2.events.hasOwnProperty(key)) {
+              events[key].forEach(function (eventName) {
+                return _this2.container.addEventListener(eventName, _this2.events[key], false);
+              });
+            }
+          };
+
+          for (var key in _this2.events) {
+            _loop(key);
           }
-        };
-
-        for (var key in this.events) {
-          _loop(key);
-        }
+        });
       }
@@ -460,5 +463,5 @@ }, {
       value: function updatePosition(event) {
-        var _props2 = this.props,
-            lockAxis = _props2.lockAxis,
-            lockToContainerEdges = _props2.lockToContainerEdges;
+        var _props = this.props,
+            lockAxis = _props.lockAxis,
+            lockToContainerEdges = _props.lockToContainerEdges;
 
@@ -508,6 +511,6 @@
       value: function animateNodes() {
-        var _props3 = this.props,
-            transitionDuration = _props3.transitionDuration,
-            hideSortableGhost = _props3.hideSortableGhost,
-            onSortOver = _props3.onSortOver;
+        var _props2 = this.props,
+            transitionDuration = _props2.transitionDuration,
+            hideSortableGhost = _props2.hideSortableGhost,
+            onSortOver = _props2.onSortOver;
 
@@ -654,5 +657,18 @@ var nodes = this.manager.getOrderedRefs();
         invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call');
+
         return this.refs.wrappedInstance;
       }
     }, {
+      key: 'getContainer',
+      value: function getContainer() {
+        var getContainer = this.props.getContainer;
+
+
+        if (typeof getContainer !== 'function') {
+          return findDOMNode(this);
+        }
+
+        return getContainer(config.withRef ? this.getWrappedInstance() : undefined);
+      }
+    }, {
       key: 'render',
@@ -659,0 +675,0 @@ value: function render() {

package.json

 {
   "name": "react-sortable-hoc",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",
@@ -5,0 +5,0 @@ "author": {

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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

1081892

increased by10.06%

Lines of code

7181

increased by11.11%

Worsened metrics

Number of medium supply chain risk alerts

4

increased by100%

No dependency changes