fix: pass isKeySorting to onSortOver and updateBeforeSortStart handler props (#531)

Author: b-ryu

README.md

@@ -106,10 +106,10 @@ There are already a number of great Drag & Drop libraries out there (for instanc
 | pressThreshold                    | Number                                                    | `5`                                                                                                                                                                                                                                                                                                                                                                                                                                | Number of pixels of movement to tolerate before ignoring a press event.                                                                                                                                                                                                                                                                                                                                                                                                |
 | 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 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`.                                                                                                                                                                                                                                     |
-| updateBeforeSortStart             | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | This function is invoked before sorting begins. It can return a promise, allowing you to run asynchronous updates (such as `setState`) before sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                             |
+| updateBeforeSortStart             | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | This function is invoked before sorting begins. It can return a promise, allowing you to run asynchronous updates (such as `setState`) before sorting begins. `function({node, index, collection, isKeySorting}, event)`                                                                                                                                                                                                                                                             |
 | onSortStart                       | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | Callback that is invoked when sorting begins. `function({node, index, collection, isKeySorting}, event)`                                                                                                                                                                                                                                                                                                                                                               |
 | onSortMove                        | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | Callback that is invoked during sorting as the cursor moves. `function(event)`                                                                                                                                                                                                                                                                                                                                                                                         |
-| onSortOver                        | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | Callback that is invoked when moving over an item. `function({index, oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                              |
+| onSortOver                        | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | Callback that is invoked when moving over an item. `function({index, oldIndex, newIndex, collection, isKeySorting}, e)`                                                                                                                                                                                                                                                                                                                                                              |
 | onSortEnd                         | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection, isKeySorting}, 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                                                                                                                                                                                                                                                                                                                                                                                                       |

src/SortableContainer/index.js

@@ -242,7 +242,10 @@ export default function sortableContainer(
 
           try {
             const {index} = node.sortableInfo;
-            await updateBeforeSortStart({collection, index, node}, event);
+            await updateBeforeSortStart(
+              {collection, index, node, isKeySorting},
+              event,
+            );
           } finally {
             this._awaitingUpdateBeforeSortStart = false;
           }
@@ -801,12 +804,14 @@ export default function sortableContainer(
         this.newIndex = prevIndex;
       }
 
-      if (onSortOver && this.newIndex !== prevIndex) {
+      const oldIndex = isKeySorting ? this.prevIndex : prevIndex;
+      if (onSortOver && this.newIndex !== oldIndex) {
         onSortOver({
           collection: this.manager.active.collection,
           index: this.index,
           newIndex: this.newIndex,
-          oldIndex: prevIndex,
+          oldIndex,
+          isKeySorting,
         });
       }
     }

types/index.d.ts

@@ -16,6 +16,7 @@ export interface SortOver {
   oldIndex: number;
   newIndex: number;
   collection: Offset;
+  isKeySorting: boolean;
 }
 
 export interface SortEnd {