Add onSortOver prop to SortableContainer (#278)

Author: SamyPesse

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>

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 = () => {