react-sortable-hoc - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

 Changelog
 ------------
+### 0.4.0
+– Fix a timing issue in Chrome caused by setTimeout [#71](https://github.com/clauderic/react-sortable-hoc/pull/71)
+– Private props are no longer passed down to the wrapped component [#98](https://github.com/clauderic/react-sortable-hoc/pull/98)
+
 ### 0.3.0
@@ -4,0 +8,0 @@ Added grid support for elements of equal widths / heights [#4](https://github.com/clauderic/react-sortable-hoc/issues/4) [#86](https://github.com/clauderic/react-sortable-hoc/pull/86). Huge shout-out to [@richmeij](https://github.com/richmeij) for making this happen!

dist/commonjs/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.arrayMove = exports.SortableHandle = exports.SortableElement = exports.SortableContainer = undefined;
+exports.arrayMove = exports.sortableHandle = exports.sortableElement = exports.sortableContainer = exports.SortableHandle = exports.SortableElement = exports.SortableContainer = undefined;
 
@@ -34,2 +34,5 @@ var _utils = require('./utils');
 exports.SortableElement = _SortableElement3.default;
-exports.SortableHandle = _SortableHandle3.default;
+exports.SortableHandle = _SortableHandle3.default;
+exports.sortableContainer = _SortableContainer3.default;
+exports.sortableElement = _SortableElement3.default;
+exports.sortableHandle = _SortableHandle3.default;

dist/commonjs/SortableContainer/index.js

@@ -13,3 +13,3 @@ 'use strict';
 
-exports.default = SortableContainer;
+exports.default = sortableContainer;
 
@@ -24,2 +24,10 @@ var _react = require('react');
 
+var _omit = require('lodash/omit');
+
+var _omit2 = _interopRequireDefault(_omit);
+
+var _invariant = require('invariant');
+
+var _invariant2 = _interopRequireDefault(_invariant);
+
 var _Manager = require('../Manager');
@@ -31,6 +39,2 @@
 
-var _invariant = require('invariant');
-
-var _invariant2 = _interopRequireDefault(_invariant);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,3 +51,3 @@
 // Export Higher Order Sortable Container Component
-function SortableContainer(WrappedComponent) {
+function sortableContainer(WrappedComponent) {
 	var _class, _temp;
@@ -95,5 +99,9 @@
 					if (!distance) {
-						_this.pressTimer = setTimeout(function () {
-							return _this.handlePress(e);
-						}, _this.props.pressDelay);
+						if (_this.props.pressDelay === 0) {
+							_this.handlePress(e);
+						} else {
+							_this.pressTimer = setTimeout(function () {
+								return _this.handlePress(e);
+							}, _this.props.pressDelay);
+						}
 					}
@@ -146,7 +154,7 @@ }
 					var axis = _this$props2.axis;
-					var onSortStart = _this$props2.onSortStart;
+					var getHelperDimensions = _this$props2.getHelperDimensions;
 					var helperClass = _this$props2.helperClass;
 					var hideSortableGhost = _this$props2.hideSortableGhost;
+					var onSortStart = _this$props2.onSortStart;
 					var useWindowAsScrollContainer = _this$props2.useWindowAsScrollContainer;
-					var getHelperDimensions = _this$props2.getHelperDimensions;
 					var node = active.node;
@@ -162,9 +170,5 @@ var collection = active.collection;
 					_this.node = node;
+					_this.margin = margin;
 					_this.width = dimensions.width;
 					_this.height = dimensions.height;
-					_this.margin = margin;
-					_this.width = node.offsetWidth;
-					_this.height = node.offsetHeight;
-					_this.halfWidth = _this.width / 2;
-					_this.halfHeight = _this.height / 2;
 					_this.marginOffset = {
@@ -205,8 +209,8 @@ x: _this.margin.left + _this.margin.right,
 					if (_this.axis.x) {
-						_this.minTranslate.x = (useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.halfWidth;
-						_this.maxTranslate.x = (useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.halfWidth;
+						_this.minTranslate.x = (useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
+						_this.maxTranslate.x = (useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
 					}
 					if (_this.axis.y) {
-						_this.minTranslate.y = (useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.halfHeight;
-						_this.maxTranslate.y = (useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.halfHeight;
+						_this.minTranslate.y = (useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
+						_this.maxTranslate.y = (useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
 					}
@@ -324,14 +328,14 @@
 
-				if (translate.y >= _this.maxTranslate.y - _this.halfHeight) {
+				if (translate.y >= _this.maxTranslate.y - _this.height / 2) {
 					direction.y = 1; // Scroll Down
-					speed.y = acceleration.y * Math.abs((_this.maxTranslate.y - _this.halfHeight - translate.y) / _this.height);
-				} else if (translate.x >= _this.maxTranslate.x - _this.halfWidth) {
+					speed.y = acceleration.y * Math.abs((_this.maxTranslate.y - _this.height / 2 - translate.y) / _this.height);
+				} else if (translate.x >= _this.maxTranslate.x - _this.width / 2) {
 					direction.x = 1; // Scroll Right
-					speed.x = acceleration.x * Math.abs((_this.maxTranslate.x - _this.halfWidth - translate.x) / _this.width);
-				} else if (translate.y <= _this.minTranslate.y + _this.halfHeight) {
+					speed.x = acceleration.x * Math.abs((_this.maxTranslate.x - _this.width / 2 - translate.x) / _this.width);
+				} else if (translate.y <= _this.minTranslate.y + _this.height / 2) {
 					direction.y = -1; // Scroll Up
-					speed.y = acceleration.y * Math.abs((translate.y - _this.halfHeight - _this.minTranslate.y) / _this.height);
-				} else if (translate.x <= _this.minTranslate.x + _this.halfWidth) {
+					speed.y = acceleration.y * Math.abs((translate.y - _this.height / 2 - _this.minTranslate.y) / _this.height);
+				} else if (translate.x <= _this.minTranslate.x + _this.width / 2) {
 					direction.x = -1; // Scroll Left
-					speed.x = acceleration.x * Math.abs((translate.x - _this.halfWidth - _this.minTranslate.x) / _this.width);
+					speed.x = acceleration.x * Math.abs((translate.x - _this.width / 2 - _this.minTranslate.x) / _this.width);
 				}
@@ -521,8 +525,8 @@
 					var minOffset = {
-						x: this.halfWidth - minLockOffset.x,
-						y: this.halfHeight - minLockOffset.y
+						x: this.width / 2 - minLockOffset.x,
+						y: this.height / 2 - minLockOffset.y
 					};
 					var maxOffset = {
-						x: this.halfWidth - maxLockOffset.x,
-						y: this.halfHeight - maxLockOffset.y
+						x: this.width / 2 - maxLockOffset.x,
+						y: this.height / 2 - maxLockOffset.y
 					};
@@ -570,8 +574,6 @@
 					var width = node.offsetWidth;
-					var halfWidth = width / 2;
 					var height = node.offsetHeight;
-					var halfHeight = height / 2;
 					var offset = {
-						width: this.width > width ? halfWidth : this.halfWidth,
-						height: this.height > height ? halfHeight : this.halfHeight
+						width: this.width > width ? width / 2 : this.width / 2,
+						height: this.height > height ? height / 2 : this.height / 2
 					};
@@ -686,3 +688,5 @@ var translate = {
 
-				return _react2.default.createElement(WrappedComponent, _extends({ ref: ref }, this.props, this.state));
+				return _react2.default.createElement(WrappedComponent, _extends({
+					ref: ref
+				}, (0, _omit2.default)(this.props, 'contentWindow', 'useWindowAsScrollContainer', 'distance', 'helperClass', 'hideSortableGhost', 'transitionDuration', 'useDragHandle', 'pressDelay', 'shouldCancelStart', 'onSortStart', 'onSortMove', 'onSortEnd', 'axis', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'getContainer')));
 			}
@@ -692,3 +696,3 @@ }]);
 		return _class;
-	}(_react.Component), _class.displayName = WrappedComponent.displayName ? 'SortableList(' + WrappedComponent.displayName + ')' : 'SortableList', _class.WrappedComponent = WrappedComponent, _class.defaultProps = {
+	}(_react.Component), _class.displayName = (0, _utils.provideDisplayName)('sortableList', WrappedComponent), _class.defaultProps = {
 		axis: 'y',
@@ -695,0 +699,0 @@ transitionDuration: 300,

dist/commonjs/SortableElement/index.js

@@ -11,3 +11,3 @@ 'use strict';
 
-exports.default = SortableElement;
+exports.default = sortableElement;
 
@@ -20,2 +20,4 @@ var _react = require('react');
 
+var _lodash = require('lodash');
+
 var _invariant = require('invariant');
@@ -25,2 +27,4 @@
 
+var _utils = require('../utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,3 +39,3 @@
 // Export Higher Order Sortable Element Component
-function SortableElement(WrappedComponent) {
+function sortableElement(WrappedComponent) {
     var _class, _temp;
@@ -119,3 +123,6 @@
                 var ref = config.withRef ? 'wrappedInstance' : null;
-                return _react2.default.createElement(WrappedComponent, _extends({ ref: ref }, this.props));
+
+                return _react2.default.createElement(WrappedComponent, _extends({
+                    ref: ref
+                }, (0, _lodash.omit)(this.props, 'collection', 'disabled', 'index')));
             }
@@ -125,3 +132,3 @@ }]);
         return _class;
-    }(_react.Component), _class.displayName = WrappedComponent.displayName ? 'SortableElement(' + WrappedComponent.displayName + ')' : 'SortableElement', _class.WrappedComponent = WrappedComponent, _class.contextTypes = {
+    }(_react.Component), _class.displayName = (0, _utils.provideDisplayName)('sortableElement', WrappedComponent), _class.contextTypes = {
         manager: _react.PropTypes.object.isRequired
@@ -128,0 +135,0 @@ }, _class.propTypes = {

dist/commonjs/SortableHandle/index.js

@@ -11,3 +11,3 @@ 'use strict';
 
-exports.default = SortableHandle;
+exports.default = sortableHandle;
 
@@ -24,2 +24,4 @@ var _react = require('react');
 
+var _utils = require('../utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,3 +36,3 @@
 // Export Higher Order Sortable Element Component
-function SortableHandle(WrappedComponent) {
+function sortableHandle(WrappedComponent) {
     var _class, _temp;
@@ -70,3 +72,3 @@
         return _class;
-    }(_react.Component), _class.displayName = WrappedComponent.displayName ? 'SortableHandle(' + WrappedComponent.displayName + ')' : 'SortableHandle', _class.WrappedComponent = WrappedComponent, _temp;
+    }(_react.Component), _class.displayName = (0, _utils.provideDisplayName)('sortableHandle', WrappedComponent), _temp;
 }

dist/commonjs/utils.js

@@ -10,2 +10,3 @@ 'use strict';
 exports.getElementMargin = getElementMargin;
+exports.provideDisplayName = provideDisplayName;
 function arrayMove(arr, previousIndex, newIndex) {
@@ -75,2 +76,8 @@ var array = arr.slice(0);
     };
+}
+
+function provideDisplayName(prefix, Component) {
+    var componentName = Component.displayName || Component.name;
+
+    return componentName ? prefix + '(' + componentName + ')' : prefix;
 }

dist/es6/index.js

@@ -7,3 +7,10 @@ import _SortableContainer from './SortableContainer';
 export { _SortableHandle as SortableHandle };
+import _sortableContainer from './SortableContainer';
+export { _sortableContainer as sortableContainer };
+import _sortableElement from './SortableElement';
+export { _sortableElement as sortableElement };
+import _sortableHandle from './SortableHandle';
+export { _sortableHandle as sortableHandle };
 
+
 export { arrayMove } from './utils';

dist/es6/SortableContainer/index.js

@@ -11,8 +11,10 @@ import _extends from 'babel-runtime/helpers/extends';
 import ReactDOM from 'react-dom';
-import Manager from '../Manager';
-import { closest, events, vendorPrefix, limit, getElementMargin } from '../utils';
+import omit from 'lodash/omit';
 import invariant from 'invariant';
 
+import Manager from '../Manager';
+import { closest, events, vendorPrefix, limit, getElementMargin, provideDisplayName } from '../utils';
+
 // Export Higher Order Sortable Container Component
-export default function SortableContainer(WrappedComponent) {
+export default function sortableContainer(WrappedComponent) {
 	var _class, _temp;
@@ -64,5 +66,9 @@
 					if (!distance) {
-						_this.pressTimer = setTimeout(function () {
-							return _this.handlePress(e);
-						}, _this.props.pressDelay);
+						if (_this.props.pressDelay === 0) {
+							_this.handlePress(e);
+						} else {
+							_this.pressTimer = setTimeout(function () {
+								return _this.handlePress(e);
+							}, _this.props.pressDelay);
+						}
 					}
@@ -115,7 +121,7 @@ }
 					var axis = _this$props2.axis;
-					var onSortStart = _this$props2.onSortStart;
+					var getHelperDimensions = _this$props2.getHelperDimensions;
 					var helperClass = _this$props2.helperClass;
 					var hideSortableGhost = _this$props2.hideSortableGhost;
+					var onSortStart = _this$props2.onSortStart;
 					var useWindowAsScrollContainer = _this$props2.useWindowAsScrollContainer;
-					var getHelperDimensions = _this$props2.getHelperDimensions;
 					var node = active.node;
@@ -131,9 +137,5 @@ var collection = active.collection;
 					_this.node = node;
+					_this.margin = margin;
 					_this.width = dimensions.width;
 					_this.height = dimensions.height;
-					_this.margin = margin;
-					_this.width = node.offsetWidth;
-					_this.height = node.offsetHeight;
-					_this.halfWidth = _this.width / 2;
-					_this.halfHeight = _this.height / 2;
 					_this.marginOffset = {
@@ -174,8 +176,8 @@ x: _this.margin.left + _this.margin.right,
 					if (_this.axis.x) {
-						_this.minTranslate.x = (useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.halfWidth;
-						_this.maxTranslate.x = (useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.halfWidth;
+						_this.minTranslate.x = (useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
+						_this.maxTranslate.x = (useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
 					}
 					if (_this.axis.y) {
-						_this.minTranslate.y = (useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.halfHeight;
-						_this.maxTranslate.y = (useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.halfHeight;
+						_this.minTranslate.y = (useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
+						_this.maxTranslate.y = (useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
 					}
@@ -293,14 +295,14 @@
 
-				if (translate.y >= _this.maxTranslate.y - _this.halfHeight) {
+				if (translate.y >= _this.maxTranslate.y - _this.height / 2) {
 					direction.y = 1; // Scroll Down
-					speed.y = acceleration.y * Math.abs((_this.maxTranslate.y - _this.halfHeight - translate.y) / _this.height);
-				} else if (translate.x >= _this.maxTranslate.x - _this.halfWidth) {
+					speed.y = acceleration.y * Math.abs((_this.maxTranslate.y - _this.height / 2 - translate.y) / _this.height);
+				} else if (translate.x >= _this.maxTranslate.x - _this.width / 2) {
 					direction.x = 1; // Scroll Right
-					speed.x = acceleration.x * Math.abs((_this.maxTranslate.x - _this.halfWidth - translate.x) / _this.width);
-				} else if (translate.y <= _this.minTranslate.y + _this.halfHeight) {
+					speed.x = acceleration.x * Math.abs((_this.maxTranslate.x - _this.width / 2 - translate.x) / _this.width);
+				} else if (translate.y <= _this.minTranslate.y + _this.height / 2) {
 					direction.y = -1; // Scroll Up
-					speed.y = acceleration.y * Math.abs((translate.y - _this.halfHeight - _this.minTranslate.y) / _this.height);
-				} else if (translate.x <= _this.minTranslate.x + _this.halfWidth) {
+					speed.y = acceleration.y * Math.abs((translate.y - _this.height / 2 - _this.minTranslate.y) / _this.height);
+				} else if (translate.x <= _this.minTranslate.x + _this.width / 2) {
 					direction.x = -1; // Scroll Left
-					speed.x = acceleration.x * Math.abs((translate.x - _this.halfWidth - _this.minTranslate.x) / _this.width);
+					speed.x = acceleration.x * Math.abs((translate.x - _this.width / 2 - _this.minTranslate.x) / _this.width);
 				}
@@ -490,8 +492,8 @@
 					var minOffset = {
-						x: this.halfWidth - minLockOffset.x,
-						y: this.halfHeight - minLockOffset.y
+						x: this.width / 2 - minLockOffset.x,
+						y: this.height / 2 - minLockOffset.y
 					};
 					var maxOffset = {
-						x: this.halfWidth - maxLockOffset.x,
-						y: this.halfHeight - maxLockOffset.y
+						x: this.width / 2 - maxLockOffset.x,
+						y: this.height / 2 - maxLockOffset.y
 					};
@@ -539,8 +541,6 @@
 					var width = node.offsetWidth;
-					var halfWidth = width / 2;
 					var height = node.offsetHeight;
-					var halfHeight = height / 2;
 					var offset = {
-						width: this.width > width ? halfWidth : this.halfWidth,
-						height: this.height > height ? halfHeight : this.halfHeight
+						width: this.width > width ? width / 2 : this.width / 2,
+						height: this.height > height ? height / 2 : this.height / 2
 					};
@@ -655,3 +655,5 @@ var translate = {
 
-				return React.createElement(WrappedComponent, _extends({ ref: ref }, this.props, this.state));
+				return React.createElement(WrappedComponent, _extends({
+					ref: ref
+				}, omit(this.props, 'contentWindow', 'useWindowAsScrollContainer', 'distance', 'helperClass', 'hideSortableGhost', 'transitionDuration', 'useDragHandle', 'pressDelay', 'shouldCancelStart', 'onSortStart', 'onSortMove', 'onSortEnd', 'axis', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'getContainer')));
 			}
@@ -661,3 +663,3 @@ }]);
 		return _class;
-	}(Component), _class.displayName = WrappedComponent.displayName ? 'SortableList(' + WrappedComponent.displayName + ')' : 'SortableList', _class.WrappedComponent = WrappedComponent, _class.defaultProps = {
+	}(Component), _class.displayName = provideDisplayName('sortableList', WrappedComponent), _class.defaultProps = {
 		axis: 'y',
@@ -664,0 +666,0 @@ transitionDuration: 300,

dist/es6/SortableElement/index.js

@@ -9,6 +9,9 @@ import _extends from 'babel-runtime/helpers/extends';
 import { findDOMNode } from 'react-dom';
+import { omit } from 'lodash';
 import invariant from 'invariant';
 
+import { provideDisplayName } from '../utils';
+
 // Export Higher Order Sortable Element Component
-export default function SortableElement(WrappedComponent) {
+export default function sortableElement(WrappedComponent) {
     var _class, _temp;
@@ -96,3 +99,6 @@
                 var ref = config.withRef ? 'wrappedInstance' : null;
-                return React.createElement(WrappedComponent, _extends({ ref: ref }, this.props));
+
+                return React.createElement(WrappedComponent, _extends({
+                    ref: ref
+                }, omit(this.props, 'collection', 'disabled', 'index')));
             }
@@ -102,3 +108,3 @@ }]);
         return _class;
-    }(Component), _class.displayName = WrappedComponent.displayName ? 'SortableElement(' + WrappedComponent.displayName + ')' : 'SortableElement', _class.WrappedComponent = WrappedComponent, _class.contextTypes = {
+    }(Component), _class.displayName = provideDisplayName('sortableElement', WrappedComponent), _class.contextTypes = {
         manager: PropTypes.object.isRequired
@@ -105,0 +111,0 @@ }, _class.propTypes = {

dist/es6/SortableHandle/index.js

@@ -11,4 +11,6 @@ import _extends from 'babel-runtime/helpers/extends';
 
+import { provideDisplayName } from '../utils';
+
 // Export Higher Order Sortable Element Component
-export default function SortableHandle(WrappedComponent) {
+export default function sortableHandle(WrappedComponent) {
     var _class, _temp;
@@ -48,3 +50,3 @@
         return _class;
-    }(Component), _class.displayName = WrappedComponent.displayName ? 'SortableHandle(' + WrappedComponent.displayName + ')' : 'SortableHandle', _class.WrappedComponent = WrappedComponent, _temp;
+    }(Component), _class.displayName = provideDisplayName('sortableHandle', WrappedComponent), _temp;
 }

dist/es6/utils.js

@@ -65,2 +65,8 @@ export function arrayMove(arr, previousIndex, newIndex) {
     };
+}
+
+export function provideDisplayName(prefix, Component) {
+    var componentName = Component.displayName || Component.name;
+
+    return componentName ? prefix + '(' + componentName + ')' : prefix;
 }

examples/basic.js

 import React, {Component} from 'react';
 import {render} from 'react-dom';
-import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-list-hoc';
+import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
 
@@ -5,0 +5,0 @@ const SortableItem = SortableElement(({value}) => <li>{value}</li>);

package.json

 {
   "name": "react-sortable-hoc",
-  "version": "0.3.0",
+  "version": "0.4.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

2971721

increased by194.73%

Lines of code

25346

increased by191.57%

Worsened metrics

Number of medium supply chain risk alerts

8

increased by100%

No dependency changes