react-sortable-hoc - npm Package Compare versions

Comparing version 0.6.8 to 0.7.0

CHANGELOG.md

 Changelog
 ------------
+### 0.7.0
+- [Breaking change] Removed lodash dependency. For users wishing to support Internet Explorer, a [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill) for Array.prototype.find will be required
+- Added `onSortOver` prop that gets invoked when sorting over an element [#278](https://github.com/clauderic/react-sortable-hoc/pull/278)
+- Fix `useWindowAsScrollContainer` [#306](https://github.com/clauderic/react-sortable-hoc/pull/306)
+
 ### 0.6.8
@@ -4,0 +9,0 @@ Update react and react-dom peerdependency requirements for React 16+ [#283](https://github.com/clauderic/react-sortable-hoc/pull/283). Thanks [@jnsdls](https://github.com/jnsdls)!

dist/commonjs/Manager.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,12 +9,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _find = require('lodash/find');
-
-var _find2 = _interopRequireDefault(_find);
-
-var _sortBy = require('lodash/sortBy');
-
-var _sortBy2 = _interopRequireDefault(_sortBy);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -30,3 +20,3 @@
   _createClass(Manager, [{
-    key: 'add',
+    key: "add",
     value: function add(collection, ref) {
@@ -40,3 +30,3 @@ if (!this.refs[collection]) {
   }, {
-    key: 'remove',
+    key: "remove",
     value: function remove(collection, ref) {
@@ -50,3 +40,3 @@ var index = this.getIndex(collection, ref);
   }, {
-    key: 'isActive',
+    key: "isActive",
     value: function isActive() {
@@ -56,7 +46,7 @@ return this.active;
   }, {
-    key: 'getActive',
+    key: "getActive",
     value: function getActive() {
       var _this = this;
 
-      return (0, _find2.default)(this.refs[this.active.collection],
+      return this.refs[this.active.collection].find(
       // eslint-disable-next-line eqeqeq
@@ -69,3 +59,3 @@ function (_ref) {
   }, {
-    key: 'getIndex',
+    key: "getIndex",
     value: function getIndex(collection, ref) {
@@ -75,10 +65,7 @@ return this.refs[collection].indexOf(ref);
   }, {
-    key: 'getOrderedRefs',
+    key: "getOrderedRefs",
     value: function getOrderedRefs() {
       var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection;
 
-      return (0, _sortBy2.default)(this.refs[collection], function (_ref2) {
-        var node = _ref2.node;
-        return node.sortableInfo.index;
-      });
+      return this.refs[collection].sort(sortByIndex);
     }
@@ -90,2 +77,10 @@ }]);
 
-exports.default = Manager;
+exports.default = Manager;
+
+
+function sortByIndex(_ref2, _ref3) {
+  var index1 = _ref2.node.sortableInfo.index;
+  var index2 = _ref3.node.sortableInfo.index;
+
+  return index1 - index2;
+}

dist/commonjs/SortableContainer/index.js

@@ -197,4 +197,4 @@ 'use strict';
           _this.initialScroll = {
-            top: _this.scrollContainer.scrollTop,
-            left: _this.scrollContainer.scrollLeft
+            top: _this.container.scrollTop,
+            left: _this.container.scrollLeft
           };
@@ -426,8 +426,9 @@
 
-        var contentWindow = this.props.contentWindow || window;
-
         this.container = typeof getContainer === 'function' ? getContainer(this.getWrappedInstance()) : (0, _reactDom.findDOMNode)(this);
         this.document = this.container.ownerDocument || document;
-        this.scrollContainer = useWindowAsScrollContainer ? this.document.body : this.container;
+
+        var contentWindow = this.props.contentWindow || this.document.defaultView || window;
+
         this.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
+        this.scrollContainer = useWindowAsScrollContainer ? this.document.scrollingElement || this.document.documentElement : this.container;
 
@@ -484,6 +485,18 @@ var _loop = function _loop(key) {
       value: function getOffset(e) {
-        return {
-          x: e.touches ? e.touches[0].pageX : e.pageX,
-          y: e.touches ? e.touches[0].pageY : e.pageY
-        };
+        if (e.touches && e.touches.length) {
+          return {
+            x: e.touches[0].pageX,
+            y: e.touches[0].pageY
+          };
+        } else if (e.changedTouches && e.changedTouches.length) {
+          return {
+            x: e.changedTouches[0].pageX,
+            y: e.changedTouches[0].pageY
+          };
+        } else {
+          return {
+            x: e.pageX,
+            y: e.pageY
+          };
+        }
       }
@@ -588,17 +601,19 @@ }, {
             transitionDuration = _props3.transitionDuration,
-            hideSortableGhost = _props3.hideSortableGhost;
+            hideSortableGhost = _props3.hideSortableGhost,
+            onSortOver = _props3.onSortOver;
 
         var nodes = this.manager.getOrderedRefs();
-        var deltaScroll = {
-          left: this.scrollContainer.scrollLeft - this.initialScroll.left,
-          top: this.scrollContainer.scrollTop - this.initialScroll.top
+        var containerScrollDelta = {
+          left: this.container.scrollLeft - this.initialScroll.left,
+          top: this.container.scrollTop - this.initialScroll.top
         };
         var sortingOffset = {
-          left: this.offsetEdge.left + this.translate.x + deltaScroll.left,
-          top: this.offsetEdge.top + this.translate.y + deltaScroll.top
+          left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left,
+          top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top
         };
-        var scrollDifference = {
+        var windowScrollDelta = {
           top: window.pageYOffset - this.initialWindowScroll.top,
           left: window.pageXOffset - this.initialWindowScroll.left
         };
+        var prevIndex = this.newIndex;
         this.newIndex = null;
@@ -661,3 +676,3 @@
               // Calculations for a grid setup
-              if (index < this.index && (sortingOffset.left + scrollDifference.left - offset.width <= edgeOffset.left && sortingOffset.top + scrollDifference.top <= edgeOffset.top + offset.height || sortingOffset.top + scrollDifference.top + offset.height <= edgeOffset.top)) {
+              if (index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
                 // If the current node is to the left on the same row, or above the node that's being dragged
@@ -676,3 +691,3 @@ // then move it to the right
                 }
-              } else if (index > this.index && (sortingOffset.left + scrollDifference.left + offset.width >= edgeOffset.left && sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top || sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top + height)) {
+              } else if (index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
                 // If the current node is to the right on the same row, or below the node that's being dragged
@@ -691,6 +706,6 @@ // then move it to the left
             } else {
-              if (index > this.index && sortingOffset.left + scrollDifference.left + offset.width >= edgeOffset.left) {
+              if (index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
                 translate.x = -(this.width + this.marginOffset.x);
                 this.newIndex = index;
-              } else if (index < this.index && sortingOffset.left + scrollDifference.left <= edgeOffset.left + offset.width) {
+              } else if (index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
                 translate.x = this.width + this.marginOffset.x;
@@ -703,6 +718,6 @@ if (this.newIndex == null) {
           } else if (this.axis.y) {
-            if (index > this.index && sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top) {
+            if (index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
               translate.y = -(this.height + this.marginOffset.y);
               this.newIndex = index;
-            } else if (index < this.index && sortingOffset.top + scrollDifference.top <= edgeOffset.top + offset.height) {
+            } else if (index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
               translate.y = this.height + this.marginOffset.y;
@@ -720,2 +735,11 @@ if (this.newIndex == null) {
         }
+
+        if (onSortOver && this.newIndex !== prevIndex) {
+          onSortOver({
+            newIndex: this.newIndex,
+            oldIndex: prevIndex,
+            index: this.index,
+            collection: this.manager.active.collection
+          });
+        }
       }
@@ -774,2 +798,3 @@ }, {
     onSortMove: _propTypes2.default.func,
+    onSortOver: _propTypes2.default.func,
     onSortEnd: _propTypes2.default.func,
@@ -776,0 +801,0 @@ shouldCancelStart: _propTypes2.default.func,

dist/es6/Manager.js

@@ -1,5 +0,3 @@
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import find from 'lodash/find';
-import sortBy from 'lodash/sortBy';
+import _classCallCheck from "babel-runtime/helpers/classCallCheck";
+import _createClass from "babel-runtime/helpers/createClass";
 
@@ -14,3 +12,3 @@ var Manager = function () {
   _createClass(Manager, [{
-    key: 'add',
+    key: "add",
     value: function add(collection, ref) {
@@ -24,3 +22,3 @@ if (!this.refs[collection]) {
   }, {
-    key: 'remove',
+    key: "remove",
     value: function remove(collection, ref) {
@@ -34,3 +32,3 @@ var index = this.getIndex(collection, ref);
   }, {
-    key: 'isActive',
+    key: "isActive",
     value: function isActive() {
@@ -40,7 +38,7 @@ return this.active;
   }, {
-    key: 'getActive',
+    key: "getActive",
     value: function getActive() {
       var _this = this;
 
-      return find(this.refs[this.active.collection],
+      return this.refs[this.active.collection].find(
       // eslint-disable-next-line eqeqeq
@@ -53,3 +51,3 @@ function (_ref) {
   }, {
-    key: 'getIndex',
+    key: "getIndex",
     value: function getIndex(collection, ref) {
@@ -59,10 +57,7 @@ return this.refs[collection].indexOf(ref);
   }, {
-    key: 'getOrderedRefs',
+    key: "getOrderedRefs",
     value: function getOrderedRefs() {
       var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection;
 
-      return sortBy(this.refs[collection], function (_ref2) {
-        var node = _ref2.node;
-        return node.sortableInfo.index;
-      });
+      return this.refs[collection].sort(sortByIndex);
     }
@@ -74,2 +69,10 @@ }]);
 
-export default Manager;
+export default Manager;
+
+
+function sortByIndex(_ref2, _ref3) {
+  var index1 = _ref2.node.sortableInfo.index;
+  var index2 = _ref3.node.sortableInfo.index;
+
+  return index1 - index2;
+}

dist/es6/SortableContainer/index.js

@@ -169,4 +169,4 @@ import _extends from 'babel-runtime/helpers/extends';
           _this.initialScroll = {
-            top: _this.scrollContainer.scrollTop,
-            left: _this.scrollContainer.scrollLeft
+            top: _this.container.scrollTop,
+            left: _this.container.scrollLeft
           };
@@ -398,8 +398,9 @@
 
-        var contentWindow = this.props.contentWindow || window;
-
         this.container = typeof getContainer === 'function' ? getContainer(this.getWrappedInstance()) : findDOMNode(this);
         this.document = this.container.ownerDocument || document;
-        this.scrollContainer = useWindowAsScrollContainer ? this.document.body : this.container;
+
+        var contentWindow = this.props.contentWindow || this.document.defaultView || window;
+
         this.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
+        this.scrollContainer = useWindowAsScrollContainer ? this.document.scrollingElement || this.document.documentElement : this.container;
 
@@ -456,6 +457,18 @@ var _loop = function _loop(key) {
       value: function getOffset(e) {
-        return {
-          x: e.touches ? e.touches[0].pageX : e.pageX,
-          y: e.touches ? e.touches[0].pageY : e.pageY
-        };
+        if (e.touches && e.touches.length) {
+          return {
+            x: e.touches[0].pageX,
+            y: e.touches[0].pageY
+          };
+        } else if (e.changedTouches && e.changedTouches.length) {
+          return {
+            x: e.changedTouches[0].pageX,
+            y: e.changedTouches[0].pageY
+          };
+        } else {
+          return {
+            x: e.pageX,
+            y: e.pageY
+          };
+        }
       }
@@ -560,17 +573,19 @@ }, {
             transitionDuration = _props3.transitionDuration,
-            hideSortableGhost = _props3.hideSortableGhost;
+            hideSortableGhost = _props3.hideSortableGhost,
+            onSortOver = _props3.onSortOver;
 
         var nodes = this.manager.getOrderedRefs();
-        var deltaScroll = {
-          left: this.scrollContainer.scrollLeft - this.initialScroll.left,
-          top: this.scrollContainer.scrollTop - this.initialScroll.top
+        var containerScrollDelta = {
+          left: this.container.scrollLeft - this.initialScroll.left,
+          top: this.container.scrollTop - this.initialScroll.top
         };
         var sortingOffset = {
-          left: this.offsetEdge.left + this.translate.x + deltaScroll.left,
-          top: this.offsetEdge.top + this.translate.y + deltaScroll.top
+          left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left,
+          top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top
         };
-        var scrollDifference = {
+        var windowScrollDelta = {
           top: window.pageYOffset - this.initialWindowScroll.top,
           left: window.pageXOffset - this.initialWindowScroll.left
         };
+        var prevIndex = this.newIndex;
         this.newIndex = null;
@@ -633,3 +648,3 @@
               // Calculations for a grid setup
-              if (index < this.index && (sortingOffset.left + scrollDifference.left - offset.width <= edgeOffset.left && sortingOffset.top + scrollDifference.top <= edgeOffset.top + offset.height || sortingOffset.top + scrollDifference.top + offset.height <= edgeOffset.top)) {
+              if (index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
                 // If the current node is to the left on the same row, or above the node that's being dragged
@@ -648,3 +663,3 @@ // then move it to the right
                 }
-              } else if (index > this.index && (sortingOffset.left + scrollDifference.left + offset.width >= edgeOffset.left && sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top || sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top + height)) {
+              } else if (index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
                 // If the current node is to the right on the same row, or below the node that's being dragged
@@ -663,6 +678,6 @@ // then move it to the left
             } else {
-              if (index > this.index && sortingOffset.left + scrollDifference.left + offset.width >= edgeOffset.left) {
+              if (index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
                 translate.x = -(this.width + this.marginOffset.x);
                 this.newIndex = index;
-              } else if (index < this.index && sortingOffset.left + scrollDifference.left <= edgeOffset.left + offset.width) {
+              } else if (index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
                 translate.x = this.width + this.marginOffset.x;
@@ -675,6 +690,6 @@ if (this.newIndex == null) {
           } else if (this.axis.y) {
-            if (index > this.index && sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top) {
+            if (index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
               translate.y = -(this.height + this.marginOffset.y);
               this.newIndex = index;
-            } else if (index < this.index && sortingOffset.top + scrollDifference.top <= edgeOffset.top + offset.height) {
+            } else if (index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
               translate.y = this.height + this.marginOffset.y;
@@ -692,2 +707,11 @@ if (this.newIndex == null) {
         }
+
+        if (onSortOver && this.newIndex !== prevIndex) {
+          onSortOver({
+            newIndex: this.newIndex,
+            oldIndex: prevIndex,
+            index: this.index,
+            collection: this.manager.active.collection
+          });
+        }
       }
@@ -746,2 +770,3 @@ }, {
     onSortMove: PropTypes.func,
+    onSortOver: PropTypes.func,
     onSortEnd: PropTypes.func,
@@ -748,0 +773,0 @@ shouldCancelStart: PropTypes.func,

package.json

 {
   "name": "react-sortable-hoc",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",
@@ -51,3 +51,2 @@ "author": {
     "invariant": "^2.2.1",
-    "lodash": "^4.12.0",
     "prop-types": "^15.5.7"
@@ -106,2 +105,3 @@ },
     "redux": "^3.5.2",
+    "lodash": "^4.12.0",
     "rimraf": "^2.5.2",
@@ -108,0 +108,0 @@ "sass-loader": "^3.2.0",

README.md

@@ -12,4 +12,2 @@ # React Sortable (HOC)
 
-<a href="https://app.codesponsor.io/link/oN9PDWZz8fQcbh9sxpDEUvD5/clauderic/react-sortable-hoc" rel="nofollow"><img src="https://app.codesponsor.io/embed/oN9PDWZz8fQcbh9sxpDEUvD5/clauderic/react-sortable-hoc.svg" style="width: 888px; height: 68px;" alt="Sponsor" /></a>
-
 Features
@@ -108,6 +106,7 @@ ---------------
 | distance                   | Number            | `0`                                                                                                        | If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop.                                                                                                                                                                                                                                                                                                               |
-| shouldCancelStart          | Function          | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48) | This function get's invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`.                                                                                                                                                                                                                                  |
-| onSortStart                | Function          |                                                                                                            | Callback that get's invoked when sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                                                                                                                                          |
-| onSortMove                 | Function          |                                                                                                            | Callback that get's invoked during sorting as the cursor moves. `function(event)`                                                                                                                                                                                                                                                                                                                                                                                      |
-| onSortEnd                  | Function          |                                                                                                            | Callback that get's invoked when sorting ends. `function({oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                                         |
+| shouldCancelStart          | Function          | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48) | This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`.                                                                                                                                                                                                                                     |
+| onSortStart                | Function          |                                                                                                            | Callback that is invoked when sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                                                                                                                                             |
+| onSortMove                 | Function          |                                                                                                            | Callback that is invoked during sorting as the cursor moves. `function(event)`                                                                                                                                                                                                                                                                                                                                                                                         |
+| onSortOver                 | Function          |                                                                                                            | Callback that get's invoked when moving over an item. `function({index, oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                                  |
+| onSortEnd                  | Function          |                                                                                                            | Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                                            |
 | useDragHandle              | Boolean           | `false`                                                                                                    | If you're using the `SortableHandle` HOC, set this to `true`                                                                                                                                                                                                                                                                                                                                                                                                           |
@@ -163,7 +162,7 @@ | useWindowAsScrollContainer | Boolean           | `false`                                                                                                    | If you want, you can set the `window` as the scrolling container                                                                                                                                                                                                                                                                                                                                                                                                       |
       {items.map((value, index) => (
-        <SortableItem 
+        <SortableItem
           key={`item-${index}`}
           index={index}
           sortIndex={index}
-          value={value} 
+          value={value}
         />
@@ -178,3 +177,3 @@ ))}
 ------------
-React Sortable List has very few dependencies. It depends on `invariant` and a handful of `lodash` helpers. It has the following peerDependencies: `react`, `react-dom`
+React Sortable HOC only depends on [invariant](https://github.com/zertosh/invariant). It has the following peerDependencies: `react`, `react-dom`
 
@@ -181,0 +180,0 @@ Reporting Issues

No alert changes

Improved metrics

Dependency count

5

decreased by-16.67%

Number of package files

25

increased by4.17%

Number of medium supply chain risk alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

977318

decreased by-21.11%

Dev dependency count

56

increased by1.82%

Lines of code

6378

decreased by-38.73%

Number of lines in readme file

187

decreased by-0.53%

Dependency changes

• - Removedlodash@^4.12.0

• - Removedlodash@4.17.21(transitive)