Disable Drop Works

modules/react-arborist/src/controllers/node-controller.ts

@@ -43,7 +43,7 @@ export class NodeController<T> {
     return this.object.parent?.id || null;
   }
 
-  get parent() {
+  get parent(): NodeController<T> | null {
     if (this.parentId) {
       return this.tree.get(this.parentId);
     } else {
@@ -94,6 +94,15 @@ export class NodeController<T> {
     } as Record<string, boolean>;
   }
 
+  isDescendantOf(node: NodeController<T>) {
+    let cursor: NodeController<any> | null = this;
+    while (cursor) {
+      if (cursor.id === node.id) return true;
+      cursor = cursor.parent;
+    }
+    return false;
+  }
+
   /* Open State */
   get isOpen() {
     return this.isInternal && this.tree.isOpen(this.id);

modules/react-arborist/src/controllers/tree-controller.ts

@@ -1,4 +1,5 @@
 import { CursorState } from "../cursor/types";
+import { safeToDrop } from "../dnd/safe-to-drop";
 import { TreeViewProps } from "../types/tree-view-props";
 import { NodeController } from "./node-controller";
 
@@ -58,15 +59,38 @@ export class TreeController<T> {
     return len === 0 ? null : this.rows[len - 1];
   }
 
-  get(id: string) {
+  get dragNodes() {
+    return this.getAll(this.props.dnd.value.dragItems);
+  }
+
+  get dragSourceNode() {
+    return this.get(this.props.dnd.value.dragSourceId);
+  }
+
+  get dropTargetParentNode() {
+    return this.get(this.props.dnd.value.targetParentId);
+  }
+
+  get dropTargetIndex() {
+    return this.props.dnd.value.targetIndex;
+  }
+
+  get(id: string | null): NodeController<T> | null {
+    if (id === null) return null;
     const index = this.indexOf(id);
     if (index) {
-      this.rows[index] || null;
+      return this.rows[index] || null;
     } else {
       return null;
     }
   }
 
+  getAll(ids: string[]) {
+    return ids
+      .map((id) => this.get(id))
+      .filter((n) => !!n) as NodeController<T>[];
+  }
+
   nodeBefore(node: NodeController<T>) {
     return this.rows[node.rowIndex - 1] || null;
   }
@@ -211,9 +235,7 @@ export class TreeController<T> {
   }
 
   canDrop() {
-    // todo
-    // mmove this into a default prop or something
-    return true;
+    return safeToDrop(this);
   }
 
   drop() {

modules/react-arborist/src/dnd/safe-to-drop.ts

@@ -0,0 +1,31 @@
+import { TreeController } from "../controllers/tree-controller";
+
+export function safeToDrop(tree: TreeController<any>) {
+  const targetParentNode = tree.dropTargetParentNode;
+  const targetIndex = tree.dropTargetIndex;
+  const dragNodes = tree.dragNodes;
+
+  /* Basic Defaul Check */
+  if (targetParentNode === null && targetIndex === null) return false;
+
+  for (const draggingNode of tree.dragNodes) {
+    if (
+      draggingNode.isInternal &&
+      targetParentNode?.isDescendantOf(draggingNode)
+    ) {
+      return false;
+    }
+  }
+
+  /* User Provided Check */
+  const disableCheck = tree.props.disableDrop;
+  if (typeof disableCheck == "function") {
+    return !disableCheck({ dragNodes, targetParentNode, targetIndex });
+  } else if (typeof disableCheck == "string" && targetParentNode) {
+    return !targetParentNode.data[disableCheck];
+  } else if (typeof disableCheck === "boolean") {
+    return !disableCheck;
+  } else {
+    return true;
+  }
+}

modules/react-arborist/src/dnd/types.ts

@@ -1,3 +1,4 @@
+import { NodeController } from "../controllers/node-controller";
 import { PartialController } from "../types/utils";
 
 export type DndState = {
@@ -26,3 +27,9 @@ export type DndPartialController = PartialController<
   DndState,
   DndOnChangeEvent
 >;
+
+export type DisableDropCheck<T> = (args: {
+  dragNodes: NodeController<T>[];
+  targetParentNode: NodeController<T> | null;
+  targetIndex: number | null;
+}) => boolean;

modules/react-arborist/src/dnd/use-node-drop.ts

@@ -16,7 +16,7 @@ export function useNodeDrop<T>(node: NodeController<T>, ref: any) {
       });
       if (drop) node.tree.draggingOver(drop.parentId, drop.index!);
 
-      if (true /* canDrop? */) {
+      if (node.tree.canDrop()) {
         if (cursor) node.tree.showCursor(cursor);
       } else {
         node.tree.hideCursor();

modules/react-arborist/src/nodes/default-node-objects.ts

@@ -41,11 +41,11 @@ export const defaultNodeObjects: DefaultNodeObject[] = [
             name: "Mastodon",
           },
           {
-            id: "10",
+            id: "12",
             name: "GitHub Profile",
           },
           {
-            id: "11",
+            id: "13",
             name: "Email",
           },
         ],

modules/react-arborist/src/types/tree-view-props.ts

@@ -3,7 +3,7 @@ import { OpensPartialController } from "../opens/types";
 import { PartialController } from "./utils";
 import { EditOnChangeEvent, EditPartialController } from "../edit/types";
 import { SelectionPartialController } from "../selection/types";
-import { DndPartialController } from "../dnd/types";
+import { DisableDropCheck, DndPartialController } from "../dnd/types";
 import { CursorPartialController } from "../cursor/types";
 import { FocusPartialController } from "../focus/types";
 
@@ -33,4 +33,5 @@ export type TreeViewProps<T> = {
 
   /* Configurations */
   openByDefault: boolean;
+  disableDrop?: string | boolean | DisableDropCheck<T>;
 };