Move drop logic from drag end to drop (#297)

Author: jameskerr

modules/react-arborist/src/dnd/drag-hook.ts

@@ -6,8 +6,6 @@ import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
 import { DropResult } from "./drop-hook";
 import { actions as dnd } from "../state/dnd-slice";
-import { safeRun } from "../utils";
-import { ROOT_ID } from "../data/create-root";
 
 export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
   const tree = useTreeApi();
@@ -24,23 +22,10 @@ export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
       },
       end: () => {
         tree.hideCursor();
-        let { parentId, index, dragIds } = tree.state.dnd;
-        // If they held down meta, we need to create a copy
-        // if (drop.dropEffect === "copy")
-        if (tree.canDrop()) {
-          safeRun(tree.props.onMove, {
-            dragIds,
-            parentId: parentId === ROOT_ID ? null : parentId,
-            index: index === null ? 0 : index, // When it's null it was dropped over a folder
-            dragNodes: tree.dragNodes,
-            parentNode: tree.get(parentId),
-          });
-          tree.open(parentId);
-        }
         tree.dispatch(dnd.dragEnd());
       },
     }),
-    [ids, node]
+    [ids, node],
   );
 
   useEffect(() => {

modules/react-arborist/src/dnd/drop-hook.ts

@@ -5,6 +5,8 @@ import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
 import { computeDrop } from "./compute-drop";
 import { actions as dnd } from "../state/dnd-slice";
+import { safeRun } from "../utils";
+import { ROOT_ID } from "../data/create-root";
 
 export type DropResult = {
   parentId: string | null;
@@ -13,7 +15,7 @@ export type DropResult = {
 
 export function useDropHook(
   el: RefObject<HTMLElement | null>,
-  node: NodeApi<any>
+  node: NodeApi<any>,
 ): ConnectDropTarget {
   const tree = useTreeApi();
   const [_, dropRef] = useDrop<DragItem, DropResult | null, void>(
@@ -41,9 +43,18 @@ export function useDropHook(
       },
       drop: (_, m) => {
         if (!m.canDrop()) return null;
+        let { parentId, index, dragIds } = tree.state.dnd;
+        safeRun(tree.props.onMove, {
+          dragIds,
+          parentId: parentId === ROOT_ID ? null : parentId,
+          index: index === null ? 0 : index, // When it's null it was dropped over a folder
+          dragNodes: tree.dragNodes,
+          parentNode: tree.get(parentId),
+        });
+        tree.open(parentId);
       },
     }),
-    [node, el.current, tree.props]
+    [node, el.current, tree.props],
   );
 
   return dropRef;

package.json

@@ -5,8 +5,13 @@
   ],
   "scripts": {
     "build": "yarn workspaces foreach --all run build",
+    "build-lib": "yarn workspace react-arborist build",
     "test": "yarn workspaces foreach --all run test",
+    "watch": "yarn workspace react-arborist watch",
     "bump": "yarn workspace react-arborist version",
+    "clean": "yarn workspace react-arborist clean",
+    "showcase": "yarn workspace showcase start",
+    "start": "run-s clean build-lib && run-p watch showcase",
     "publish": "sh bin/publish"
   },
   "private": true,