react-arborist 3.2.0 → 3.3.0-rc.1

package/dist/state/dnd-slice.d.ts

@@ -5,7 +5,7 @@ export declare type DndState = {
     cursor: Cursor;
     dragIds: string[];
     parentId: null | string;
-    index: number;
+    index: number | null;
 };
 export declare const actions: {
     cursor(cursor: Cursor): {
@@ -20,10 +20,10 @@ export declare const actions: {
     dragEnd(): {
         type: "DND_DRAG_END";
     };
-    hovering(parentId: string | null, index: number): {
+    hovering(parentId: string | null, index: number | null): {
         type: "DND_HOVERING";
         parentId: string | null;
-        index: number;
+        index: number | null;
     };
 };
 export declare function reducer(state: DndState | undefined, action: ActionTypes<typeof actions>): DndState;

package/dist/state/drag-slice.d.ts

@@ -2,6 +2,8 @@ import { ActionTypes } from "../types/utils";
 import { actions as dnd } from "./dnd-slice";
 export declare type DragSlice = {
     id: string | null;
-    idWillReceiveDrop: string | null;
+    selectedIds: string[];
+    destinationParentId: string | null;
+    destinationIndex: number | null;
 };
 export declare function reducer(state: DragSlice | undefined, action: ActionTypes<typeof dnd>): DragSlice;

package/dist/utils.d.ts

@@ -5,9 +5,9 @@ export declare function bound(n: number, min: number, max: number): number;
 export declare function isItem(node: NodeApi<any> | null): boolean | null;
 export declare function isClosed(node: NodeApi<any> | null): boolean | null;
 /**
- * Is first param a decendent of the second param
+ * Is first param a descendant of the second param
  */
-export declare const isDecendent: (a: NodeApi<any>, b: NodeApi<any>) => boolean;
+export declare const isDescendant: (a: NodeApi<any>, b: NodeApi<any>) => boolean;
 export declare const indexOf: (node: NodeApi<any>) => number;
 export declare function noop(): void;
 export declare function dfs(node: NodeApi<any>, id: string): NodeApi<any> | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.2.0",
+  "version": "3.3.0-rc.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",

package/src/dnd/compute-drop.ts

@@ -26,7 +26,7 @@ function getNodesAroundCursor(
   hover: HoverData
 ): [NodeApi | null, NodeApi | null] {
   if (!node) {
-    // We're hoving over the empty part of the list, not over an item,
+    // We're hovering over the empty part of the list, not over an item,
     // Put the cursor below the last item which is "prev"
     return [prev, null];
   }
@@ -83,7 +83,10 @@ export type ComputedDrop = {
   cursor: Cursor | null;
 };
 
-function dropAt(parentId: string | undefined, index: number): DropResult {
+function dropAt(
+  parentId: string | undefined,
+  index: number | null
+): DropResult {
   return { parentId: parentId || null, index };
 }
 
@@ -135,7 +138,7 @@ export function computeDrop(args: Args): ComputedDrop {
   /* Hovering over the middle of a folder */
   if (node && node.isInternal && hover.inMiddle) {
     return {
-      drop: dropAt(node.id, 0),
+      drop: dropAt(node.id, null),
       cursor: highlightCursor(node.id),
     };
   }

package/src/dnd/drag-hook.ts

@@ -31,7 +31,7 @@ export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
           safeRun(tree.props.onMove, {
             dragIds,
             parentId: parentId === ROOT_ID ? null : parentId,
-            index,
+            index: index === null ? 0 : index, // When it's null it was dropped over a folder
             dragNodes: tree.dragNodes,
             parentNode: tree.get(parentId),
           });

package/src/dnd/drop-hook.ts

@@ -8,7 +8,7 @@ import { actions as dnd } from "../state/dnd-slice";
 
 export type DropResult = {
   parentId: string | null;
-  index: number;
+  index: number | null;
 };
 
 export function useDropHook(

package/src/interfaces/node-api.ts

@@ -130,6 +130,16 @@ export class NodeApi<T = any> {
     return this.parent?.children![i + 1] ?? null;
   }
 
+  isAncestorOf(node: NodeApi<T> | null) {
+    if (!node) return false;
+    let ancestor: NodeApi<T> | null = node;
+    while (ancestor) {
+      if (ancestor.id === this.id) return true;
+      ancestor = ancestor.parent;
+    }
+    return false;
+  }
+
   select() {
     this.tree.select(this);
   }

package/src/interfaces/tree-api.ts

@@ -419,6 +419,18 @@ export class TreeApi<T> {
       .filter((n) => !!n) as NodeApi<T>[];
   }
 
+  get dragNode() {
+    return this.get(this.state.nodes.drag.id);
+  }
+
+  get dragDestinationParent() {
+    return this.get(this.state.nodes.drag.destinationParentId);
+  }
+
+  get dragDestinationIndex() {
+    return this.state.nodes.drag.destinationIndex;
+  }
+
   canDrop() {
     if (this.isFiltered) return false;
     const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
@@ -428,7 +440,7 @@ export class TreeApi<T> {
     for (const drag of dragNodes) {
       if (!drag) return false;
       if (!parentNode) return false;
-      if (drag.isInternal && utils.isDecendent(parentNode, drag)) return false;
+      if (drag.isInternal && utils.isDescendant(parentNode, drag)) return false;
     }
 
     // Allow the user to insert their own logic
@@ -436,7 +448,7 @@ export class TreeApi<T> {
       return !isDisabled({
         parentNode,
         dragNodes: this.dragNodes,
-        index: this.state.dnd.index,
+        index: this.state.dnd.index || 0,
       });
     } else if (typeof isDisabled == "string") {
       // @ts-ignore
@@ -606,7 +618,8 @@ export class TreeApi<T> {
   willReceiveDrop(node: string | IdObj | null) {
     const id = identifyNull(node);
     if (!id) return false;
-    return id === this.state.nodes.drag.idWillReceiveDrop;
+    const { destinationParentId, destinationIndex } = this.state.nodes.drag;
+    return id === destinationParentId && destinationIndex === null;
   }
 
   /* Tree Event Handlers */

package/src/state/dnd-slice.ts

@@ -8,7 +8,7 @@ export type DndState = {
   cursor: Cursor;
   dragIds: string[];
   parentId: null | string;
-  index: number;
+  index: number | null;
 };
 
 /* Actions */
@@ -22,7 +22,7 @@ export const actions = {
   dragEnd() {
     return { type: "DND_DRAG_END" as const };
   },
-  hovering(parentId: string | null, index: number) {
+  hovering(parentId: string | null, index: number | null) {
     return { type: "DND_HOVERING" as const, parentId, index };
   },
 };

package/src/state/drag-slice.ts

@@ -1,27 +1,43 @@
 import { ActionTypes } from "../types/utils";
 import { actions as dnd } from "./dnd-slice";
+import { initialState } from "./initial";
 
 /* Types */
 
-export type DragSlice = { id: string | null; idWillReceiveDrop: string | null };
+export type DragSlice = {
+  id: string | null;
+  selectedIds: string[];
+  destinationParentId: string | null;
+  destinationIndex: number | null;
+};
 
 /* Reducer */
 
 export function reducer(
-  state: DragSlice = { id: null, idWillReceiveDrop: null },
+  state: DragSlice = initialState().nodes.drag,
   action: ActionTypes<typeof dnd>
-) {
+): DragSlice {
   switch (action.type) {
     case "DND_DRAG_START":
-      return { ...state, id: action.id };
+      return { ...state, id: action.id, selectedIds: action.dragIds };
     case "DND_DRAG_END":
-      return { ...state, id: null };
-    case "DND_CURSOR":
-      const c = action.cursor;
-      if (c.type === "highlight" && c.id !== state.idWillReceiveDrop) {
-        return { ...state, idWillReceiveDrop: c.id };
-      } else if (c.type !== "highlight" && state.idWillReceiveDrop !== null) {
-        return { ...state, idWillReceiveDrop: null };
+      return {
+        ...state,
+        id: null,
+        destinationParentId: null,
+        destinationIndex: null,
+        selectedIds: [],
+      };
+    case "DND_HOVERING":
+      if (
+        action.parentId !== state.destinationParentId ||
+        action.index != state.destinationIndex
+      ) {
+        return {
+          ...state,
+          destinationParentId: action.parentId,
+          destinationIndex: action.index,
+        };
       } else {
         return state;
       }

package/src/state/initial.ts

@@ -7,7 +7,12 @@ export const initialState = (props?: TreeProps<any>): RootState => ({
     open: { filtered: {}, unfiltered: props?.initialOpenState ?? {} },
     focus: { id: null, treeFocused: false },
     edit: { id: null },
-    drag: { id: null, idWillReceiveDrop: null },
+    drag: {
+      id: null,
+      selectedIds: [],
+      destinationParentId: null,
+      destinationIndex: null,
+    },
     selection: { ids: new Set(), anchor: null, mostRecent: null },
   },
   dnd: {

package/src/utils.ts

@@ -15,9 +15,9 @@ export function isClosed(node: NodeApi<any> | null) {
 }
 
 /**
- * Is first param a decendent of the second param
+ * Is first param a descendant of the second param
  */
-export const isDecendent = (a: NodeApi<any>, b: NodeApi<any>) => {
+export const isDescendant = (a: NodeApi<any>, b: NodeApi<any>) => {
   let n: NodeApi<any> | null = a;
   while (n) {
     if (n.id === b.id) return true;