Merge pull request #165 from minop1205/feature-relative-index

feat: add relativeIndex to options passed onDrop callback

Author: minop1205

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 3.3.0
+
+_Nov 2, 2022_
+
+### Added
+
+- Added `relativeIndex` to options passed `onDrop` callback.
+
 ## 3.2.2
 
 _Oct 31, 2022_

README.md

@@ -379,7 +379,8 @@ The arguments passed to the onDrop callback function are as follows
 | options.dropTargetId     | `number` \| `string`                | node id of the drop destination.<br>If the drop destination is the root node, it will be the value of the `rootId` property.                                                                                                                                                                     |
 | options.dragSource       | `object`                            | node item of the dragging source.<br>If the drag source is an element external to `DndProvider` or a file or selected text, these will be `undefined`.                                                                                                                                           |
 | options.dropTarget       | `object` \| `undefined`             | node item of the drop destination.<br>If the drop destination is the root node, it will be `undefined`                                                                                                                                                                                           |
-| options.destinationIndex | `number` \| `undefined`             | If the `sort` property is `false`, the insertion destination index value of dragSource is given. Otherwise, it will be `undefined`.                                                                                                                                                              |
+| options.destinationIndex | `number` \| `undefined`             | When the `sort` property is `false`, it indicates the index to which the drag source in the tree data array should be moved.<br>When the `sort` property is `true`, it will be `undefined`.                                                                                                      |
+| options.relativeIndex    | `number` \| `undefined`             | When the `sort` property is `false`, it indicates the relative index of the drop destination with respect to the parent node.<br>When the `sort` property is `true`, it will be `undefined`.                                                                                                     |
 | options.monitor          | `object`                            | Provides various methods for accessing react-dnd's internal state, e.g. for accessing drag sources from outside DndProvider.<br>See this [definition](https://github.com/react-dnd/react-dnd/blob/f835e26d81094b4aebc9d5b5f7b172beaeddf4b0/packages/dnd-core/src/interfaces.ts#L26) for details. |
 
 ### canDrop callback

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@minoru/react-dnd-treeview",
   "description": "A draggable / droppable React-based treeview component.",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -51,7 +51,7 @@ export const TreeProvider = <T,>(props: Props<T>): ReactElement => {
     initialOpen: false,
     ...props,
     openIds,
-    onDrop: (dragSource, dropTargetId, index) => {
+    onDrop: (dragSource, dropTargetId, placeholderIndex) => {
       // if dragSource is null,
       // it means that the drop is from the outside of the react-dnd.
       if (!dragSource) {
@@ -65,8 +65,10 @@ export const TreeProvider = <T,>(props: Props<T>): ReactElement => {
           options.destinationIndex = getDestIndex(
             props.tree,
             dropTargetId,
-            index
+            placeholderIndex
           );
+
+          options.relativeIndex = placeholderIndex;
         }
 
         props.onDrop(props.tree, options);
@@ -92,11 +94,17 @@ export const TreeProvider = <T,>(props: Props<T>): ReactElement => {
             tree,
             dragSource.id,
             dropTargetId,
-            index
+            placeholderIndex
           );
           options.destinationIndex = destIndex;
+          options.relativeIndex = placeholderIndex;
           props.onDrop(
-            mutateTreeWithIndex<T>(tree, dragSource.id, dropTargetId, index),
+            mutateTreeWithIndex<T>(
+              tree,
+              dragSource.id,
+              dropTargetId,
+              placeholderIndex
+            ),
             options
           );
 

src/providers/TreeProvider.tsx

@@ -159,6 +159,7 @@ export type DropOptions<T = unknown> = {
   dragSource?: NodeModel<T>;
   dropTarget?: NodeModel<T>;
   destinationIndex?: number;
+  relativeIndex?: number;
   monitor: DragDropMonitor;
 };