react-arborist - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0-rc.1

dist/dnd/drop-hook.d.ts

@@ -6,4 +6,4 @@ import { RefObject } from "react";
     parentId: string | null;
-    index: number;
+    index: number | null;
 };
 export declare function useDropHook(el: RefObject<HTMLElement | null>, node: NodeApi<any>): ConnectDropTarget;

dist/interfaces/node-api.d.ts

@@ -54,2 +54,3 @@ import React from "react";
     get nextSibling(): NodeApi<T> | null;
+    isAncestorOf(node: NodeApi<T> | null): boolean;
     select(): void;
@@ -56,0 +57,0 @@ deselect(): void;

dist/interfaces/tree-api.d.ts

@@ -98,2 +98,5 @@ import { EditResult } from "../types/handlers";
     get dragNodes(): NodeApi<T>[];
+    get dragNode(): NodeApi<T> | null;
+    get dragDestinationParent(): NodeApi<T> | null;
+    get dragDestinationIndex(): number | null;
     canDrop(): boolean;
@@ -100,0 +103,0 @@ hideCursor(): void;

dist/state/dnd-slice.d.ts

@@ -8,3 +8,3 @@ import { Cursor } from "../dnd/compute-drop";
     parentId: null | string;
-    index: number;
+    index: number | null;
 };
@@ -24,8 +24,8 @@ export declare const actions: {
     };
-    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;

dist/state/drag-slice.d.ts

@@ -5,4 +5,6 @@ import { ActionTypes } from "../types/utils";
     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;

dist/utils.d.ts

@@ -8,5 +8,5 @@ import { NodeApi } from "./interfaces/node-api";
 /**
- * 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;
@@ -13,0 +13,0 @@ export declare function noop(): void;

package.json

 {
   "name": "react-arborist",
-  "version": "3.2.0",
+  "version": "3.3.0-rc.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "source": "src/index.ts",

src/dnd/compute-drop.ts

@@ -29,3 +29,3 @@ import { XYCoord } from "react-dnd";
   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"
@@ -87,3 +87,6 @@ return [prev, null];
 
-function dropAt(parentId: string | undefined, index: number): DropResult {
+function dropAt(
+  parentId: string | undefined,
+  index: number | null
+): DropResult {
   return { parentId: parentId || null, index };
@@ -140,3 +143,3 @@ }
     return {
-      drop: dropAt(node.id, 0),
+      drop: dropAt(node.id, null),
       cursor: highlightCursor(node.id),
@@ -143,0 +146,0 @@ };

src/dnd/drag-hook.ts

@@ -34,3 +34,3 @@ import { useEffect } from "react";
             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,
@@ -37,0 +37,0 @@ parentNode: tree.get(parentId),

src/dnd/drop-hook.ts

@@ -11,3 +11,3 @@ import { RefObject } from "react";
   parentId: string | null;
-  index: number;
+  index: number | null;
 };
@@ -14,0 +14,0 @@

src/interfaces/node-api.ts

@@ -133,2 +133,12 @@ import React from "react";
 
+  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() {
@@ -135,0 +145,0 @@ this.tree.select(this);

src/interfaces/tree-api.ts

@@ -422,2 +422,14 @@ import { EditResult } from "../types/handlers";
 
+  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() {
@@ -432,3 +444,3 @@ if (this.isFiltered) return false;
       if (!parentNode) return false;
-      if (drag.isInternal && utils.isDecendent(parentNode, drag)) return false;
+      if (drag.isInternal && utils.isDescendant(parentNode, drag)) return false;
     }
@@ -441,3 +453,3 @@
         dragNodes: this.dragNodes,
-        index: this.state.dnd.index,
+        index: this.state.dnd.index || 0,
       });
@@ -612,3 +624,4 @@ } else if (typeof isDisabled == "string") {
     if (!id) return false;
-    return id === this.state.nodes.drag.idWillReceiveDrop;
+    const { destinationParentId, destinationIndex } = this.state.nodes.drag;
+    return id === destinationParentId && destinationIndex === null;
   }
@@ -615,0 +628,0 @@

src/state/dnd-slice.ts

@@ -11,3 +11,3 @@ import { Cursor } from "../dnd/compute-drop";
   parentId: null | string;
-  index: number;
+  index: number | null;
 };
@@ -26,3 +26,3 @@
   },
-  hovering(parentId: string | null, index: number) {
+  hovering(parentId: string | null, index: number | null) {
     return { type: "DND_HOVERING" as const, parentId, index };
@@ -29,0 +29,0 @@ },

src/state/drag-slice.ts

 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;
+};
 
@@ -11,16 +17,26 @@ /* 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 {
@@ -27,0 +43,0 @@ return state;

src/state/initial.ts

@@ -10,3 +10,8 @@ import { TreeProps } from "../types/tree-props";
     edit: { id: null },
-    drag: { id: null, idWillReceiveDrop: null },
+    drag: {
+      id: null,
+      selectedIds: [],
+      destinationParentId: null,
+      destinationIndex: null,
+    },
     selection: { ids: new Set(), anchor: null, mostRecent: null },
@@ -13,0 +18,0 @@ },

src/utils.ts

@@ -18,5 +18,5 @@ import { NodeApi } from "./interfaces/node-api";
 /**
- * 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;
@@ -23,0 +23,0 @@ while (n) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

608421

increased by1.08%

Lines of code

8007

increased by1.07%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes