Add onSortOver prop to SortableContainer (clauderic#278)

Nuclino · Jul 15, 2021 · 06b8d9f · 06b8d9f
1 parent 590e3fe
commit 06b8d9f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -105,6 +105,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
 | 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`                                                                                                                                                                                                                                                                                                                                                                                                           |
 | useWindowAsScrollContainer | Boolean           | `false`                                                                                                    | If you want, you can set the `window` as the scrolling container                                                                                                                                                                                                                                                                                                                                                                                                       |
@@ -156,11 +157,11 @@ const SortableList = SortableContainer(({items}) => {
   return (
     <ul>
       {items.map((value, index) => (
-        <SortableItem 
+        <SortableItem
           key={`item-${index}`}
           index={index}
           sortIndex={index}
-          value={value} 
+          value={value}
         />
       ))}
     </ul>

diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js
@@ -69,6 +69,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
       contentWindow: PropTypes.any,
       onSortStart: PropTypes.func,
       onSortMove: PropTypes.func,
+      onSortOver: PropTypes.func,
       onSortEnd: PropTypes.func,
       shouldCancelStart: PropTypes.func,
       pressDelay: PropTypes.number,
@@ -565,7 +566,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
     }
 
     animateNodes() {
-      const {transitionDuration, hideSortableGhost} = this.props;
+      const {transitionDuration, hideSortableGhost, onSortOver} = this.props;
       const nodes = this.manager.getOrderedRefs();
       const deltaScroll = {
         left: this.scrollContainer.scrollLeft - this.initialScroll.left,
@@ -579,6 +580,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
         top: (window.pageYOffset - this.initialWindowScroll.top),
         left: (window.pageXOffset - this.initialWindowScroll.left),
       };
+      const prevIndex = this.newIndex;
       this.newIndex = null;
 
       for (let i = 0, len = nodes.length; i < len; i++) {
@@ -723,6 +725,15 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
       if (this.newIndex == null) {
         this.newIndex = this.index;
       }
+
+      if (onSortOver && this.newIndex !== prevIndex) {
+        onSortOver({
+          newIndex: this.newIndex,
+          oldIndex: prevIndex,
+          index: this.index,
+          collection: this.manager.active.collection,
+        });
+      }
     }
 
     autoscroll = () => {