react-arborist 2.2.0 → 3.0.0

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

@@ -3,18 +3,27 @@ import { ActionTypes } from "../types/utils";
 export declare type DndState = {
     dragId: null | string;
     cursor: Cursor;
+    dragIds: string[];
+    parentId: null | string;
+    index: number;
 };
 export declare const actions: {
     cursor(cursor: Cursor): {
         type: "DND_CURSOR";
         cursor: Cursor;
     };
-    dragStart(id: string): {
+    dragStart(id: string, dragIds: string[]): {
         type: "DND_DRAG_START";
         id: string;
+        dragIds: string[];
     };
     dragEnd(): {
         type: "DND_DRAG_END";
     };
+    hovering(parentId: string | null, index: number): {
+        type: "DND_HOVERING";
+        parentId: string | null;
+        index: number;
+    };
 };
 export declare function reducer(state: DndState | undefined, action: ActionTypes<typeof actions>): DndState;

package/dist/types/dnd.d.ts

@@ -4,6 +4,5 @@ export declare type CursorLocation = {
     parentId: string | null;
 };
 export declare type DragItem = {
-    dragIds: string[];
     id: string;
 };

package/dist/types/tree-props.d.ts

@@ -18,19 +18,25 @@ export interface TreeProps<T> {
     renderCursor?: ElementType<renderers.CursorProps>;
     renderContainer?: ElementType<{}>;
     rowHeight?: number;
+    overscanCount?: number;
     width?: number | string;
     height?: number;
     indent?: number;
     paddingTop?: number;
     paddingBottom?: number;
     padding?: number;
+    childrenAccessor?: string | ((d: T) => T[] | null);
+    idAccessor?: string | ((d: T) => string);
     openByDefault?: boolean;
     selectionFollowsFocus?: boolean;
     disableMultiSelection?: boolean;
+    disableEdit?: string | boolean | BoolFunc<T>;
     disableDrag?: string | boolean | BoolFunc<T>;
-    disableDrop?: string | boolean | BoolFunc<T>;
-    childrenAccessor?: string | ((d: T) => T[] | null);
-    idAccessor?: string | ((d: T) => string);
+    disableDrop?: string | boolean | ((args: {
+        parentNode: NodeApi<T>;
+        dragNodes: NodeApi<T>[];
+        index: number;
+    }) => boolean);
     onActivate?: (node: NodeApi<T>) => void;
     onSelect?: (nodes: NodeApi<T>[]) => void;
     onScroll?: (props: ListOnScrollProps) => void;

package/dist/types/utils.d.ts

@@ -1,13 +1,9 @@
-/// <reference types="react" />
 import { AnyAction } from "redux";
 import { NodeApi } from "../interfaces/node-api";
 export interface IdObj {
     id: string;
 }
 export declare type Identity = string | IdObj | null;
-declare module "react" {
-    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
 export declare type BoolFunc<T> = (data: T) => boolean;
 export declare type ActionTypes<Actions extends {
     [name: string]: (...args: any[]) => AnyAction;

package/package.json

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

package/src/components/default-container.tsx

@@ -137,8 +137,7 @@ export function DefaultContainer() {
           tree.selectAll();
           return;
         }
-        if (e.key === "a" && !e.metaKey) {
-          if (!tree.props.onCreate) return;
+        if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
           tree.createLeaf();
           return;
         }
@@ -161,9 +160,11 @@ export function DefaultContainer() {
           return;
         }
         if (e.key === "Enter") {
-          if (!tree.props.onRename) return;
+          const node = tree.focusedNode;
+          if (!node) return;
+          if (!node.isEditable || !tree.props.onRename) return;
           setTimeout(() => {
-            if (tree.focusedNode) tree.edit(tree.focusedNode);
+            if (node) tree.edit(node);
           });
           return;
         }
@@ -221,6 +222,7 @@ export function DefaultContainer() {
         height={tree.height}
         width={tree.width}
         itemSize={tree.rowHeight}
+        overscanCount={tree.overscanCount}
         itemKey={(index) => tree.visibleNodes[index]?.id || index}
         outerElementType={ListOuterElement}
         innerElementType={ListInnerElement}

package/src/data/create-root.ts

@@ -19,7 +19,6 @@ export function createRoot<T>(tree: TreeApi<T>): NodeApi<T> {
       id,
       children: null,
       isDraggable: tree.isDraggable(data),
-      isDroppable: tree.isDroppable(data),
       rowIndex: null,
     });
     const children = tree.accessChildren(data);
@@ -40,7 +39,6 @@ export function createRoot<T>(tree: TreeApi<T>): NodeApi<T> {
     parent: null,
     children: null,
     isDraggable: true,
-    isDroppable: true,
     rowIndex: null,
   });
 

package/src/dnd/compute-drop.ts

@@ -78,21 +78,6 @@ function getDropLevel(
   return bound(hoverLevel, min, max);
 }
 
-function canDrop(above: NodeApi | null, below: NodeApi | null) {
-  if (!above) {
-    return true;
-  }
-
-  let n: NodeApi | null = above;
-  if (isClosed(above) && above !== below) n = above.parent;
-
-  while (n) {
-    if (!n.isDroppable) return false;
-    n = n.parent;
-  }
-  return true;
-}
-
 export type ComputedDrop = {
   drop: DropResult | null;
   cursor: Cursor | null;
@@ -147,10 +132,6 @@ export function computeDrop(args: Args): ComputedDrop {
   const { node, nextNode, prevNode } = args;
   const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
 
-  if (!canDrop(above, below)) {
-    return { drop: null, cursor: noCursor() };
-  }
-
   /* Hovering over the middle of a folder */
   if (node && node.isInternal && hover.inMiddle) {
     return {

package/src/dnd/drag-hook.ts

@@ -4,7 +4,6 @@ import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTreeApi } from "../context";
 import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
-import { IdObj } from "../types/utils";
 import { DropResult } from "./drop-hook";
 import { actions as dnd } from "../state/dnd-slice";
 import { safeRun } from "../utils";
@@ -17,30 +16,28 @@ export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
     () => ({
       canDrag: () => node.isDraggable,
       type: "NODE",
-      item: () => ({
-        id: node.id,
-        dragIds: tree.isSelected(node.id) ? Array.from(ids) : [node.id],
-      }),
-      start: () => {
-        tree.dispatch(dnd.dragStart(node.id));
+      item: () => {
+        // This is fired once at the begging of a drag operation
+        const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
+        tree.dispatch(dnd.dragStart(node.id, dragIds));
+        return { id: node.id };
       },
-      end: (item, monitor) => {
-        tree.dispatch(dnd.dragEnd());
+      end: () => {
         tree.hideCursor();
-        const drop = monitor.getDropResult();
+        let { parentId, index, dragIds } = tree.state.dnd;
         // If they held down meta, we need to create a copy
         // if (drop.dropEffect === "copy")
-        if (drop && drop.parentId) {
-          const parentId = drop.parentId === ROOT_ID ? null : drop.parentId;
+        if (tree.canDrop()) {
           safeRun(tree.props.onMove, {
-            dragIds: item.dragIds,
-            parentId,
-            index: drop.index,
-            dragNodes: item.dragIds.map((id) => tree.get(id)!),
-            parentNode: tree.get(drop.parentId),
+            dragIds,
+            parentId: parentId === ROOT_ID ? null : parentId,
+            index,
+            dragNodes: tree.dragNodes,
+            parentNode: tree.get(parentId),
           });
-          tree.open(drop.parentId);
+          tree.open(parentId);
         }
+        tree.dispatch(dnd.dragEnd());
       },
     }),
     [ids, node]

package/src/dnd/drop-hook.ts

@@ -3,8 +3,8 @@ import { ConnectDropTarget, useDrop } from "react-dnd";
 import { useTreeApi } from "../context";
 import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
-import { isDecendent } from "../utils";
 import { computeDrop } from "./compute-drop";
+import { actions as dnd } from "../state/dnd-slice";
 
 export type DropResult = {
   parentId: string | null;
@@ -19,11 +19,11 @@ export function useDropHook(
   const [_, dropRef] = useDrop<DragItem, DropResult | null, void>(
     () => ({
       accept: "NODE",
-      canDrop: (item, m) => {
-        if (node.tree.isFiltered) return false;
+      canDrop: () => tree.canDrop(),
+      hover: (_item, m) => {
         const offset = m.getClientOffset();
-        if (!el.current || !offset) return false;
-        const { drop } = computeDrop({
+        if (!el.current || !offset) return;
+        const { cursor, drop } = computeDrop({
           element: el.current,
           offset: offset,
           indent: tree.indent,
@@ -31,46 +31,16 @@ export function useDropHook(
           prevNode: node.prev,
           nextNode: node.next,
         });
-        if (!drop) return false;
-        const dropParent = tree.get(drop.parentId) ?? tree.root;
+        if (drop) tree.dispatch(dnd.hovering(drop.parentId, drop.index));
 
-        for (let id of item.dragIds) {
-          const drag = tree.get(id);
-          if (!drag) return false;
-          if (!dropParent) return false;
-          if (drag.isInternal && isDecendent(dropParent, drag)) return false;
-        }
-        return true;
-      },
-      hover: (item, m) => {
         if (m.canDrop()) {
-          const offset = m.getClientOffset();
-          if (!el.current || !offset) return;
-          const { cursor } = computeDrop({
-            element: el.current,
-            offset: offset,
-            indent: tree.indent,
-            node: node,
-            prevNode: node.prev,
-            nextNode: node.next,
-          });
           if (cursor) tree.showCursor(cursor);
         } else {
           tree.hideCursor();
         }
       },
-      drop: (item, m): DropResult | undefined | null => {
-        const offset = m.getClientOffset();
-        if (!el.current || !offset) return;
-        const { drop } = computeDrop({
-          element: el.current,
-          offset: offset,
-          indent: tree.indent,
-          node: node,
-          prevNode: node.prev,
-          nextNode: node.next,
-        });
-        return drop;
+      drop: (_, m) => {
+        if (!m.canDrop()) return null;
       },
     }),
     [node, el.current, tree.props]

package/src/dnd/outer-drop-hook.ts

@@ -1,9 +1,9 @@
 import { useDrop } from "react-dnd";
 import { useTreeApi } from "../context";
 import { DragItem } from "../types/dnd";
-import { isDecendent } from "../utils";
 import { computeDrop } from "./compute-drop";
 import { DropResult } from "./drop-hook";
+import { actions as dnd } from "../state/dnd-slice";
 
 export function useOuterDrop() {
   const tree = useTreeApi();
@@ -12,53 +12,15 @@ export function useOuterDrop() {
   const [, drop] = useDrop<DragItem, DropResult | null, { isOver: boolean }>(
     () => ({
       accept: "NODE",
-      hover: (item, m) => {
-        if (!m.isOver({ shallow: true })) return;
-        if (m.canDrop()) {
-          const offset = m.getClientOffset();
-          if (!tree.listEl.current || !offset) return;
-          const { cursor } = computeDrop({
-            element: tree.listEl.current,
-            offset: offset,
-            indent: tree.indent,
-            node: null,
-            prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
-            nextNode: null,
-          });
-          if (cursor) tree.showCursor(cursor);
-        } else {
-          tree.hideCursor();
-        }
-      },
-      canDrop: (item, m) => {
+      canDrop: (_item, m) => {
         if (!m.isOver({ shallow: true })) return false;
-        if (tree.isFiltered) return false;
-        const offset = m.getClientOffset();
-        if (!tree.listEl.current || !offset) return false;
-        const { drop } = computeDrop({
-          element: tree.listEl.current,
-          offset: offset,
-          indent: tree.indent,
-          node: null,
-          prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
-          nextNode: null,
-        });
-        if (!drop) return false;
-        const dropParent = tree.get(drop.parentId) ?? tree.root;
-
-        for (let id of item.dragIds) {
-          const drag = tree.get(id);
-          if (!drag) return false;
-          if (!dropParent) return false;
-          if (drag.isInternal && isDecendent(dropParent, drag)) return false;
-        }
-        return true;
+        return tree.canDrop();
       },
-      drop: (item, m) => {
-        if (m.didDrop()) return;
+      hover: (_item, m) => {
+        if (!m.isOver({ shallow: true })) return;
         const offset = m.getClientOffset();
         if (!tree.listEl.current || !offset) return;
-        const { drop } = computeDrop({
+        const { cursor, drop } = computeDrop({
           element: tree.listEl.current,
           offset: offset,
           indent: tree.indent,
@@ -66,7 +28,13 @@ export function useOuterDrop() {
           prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
           nextNode: null,
         });
-        return drop;
+        if (drop) tree.dispatch(dnd.hovering(drop.parentId, drop.index));
+
+        if (m.canDrop()) {
+          if (cursor) tree.showCursor(cursor);
+        } else {
+          tree.hideCursor();
+        }
       },
     }),
     [tree]

package/src/interfaces/node-api.ts

@@ -10,7 +10,6 @@ type Params<T> = {
   children: NodeApi<T>[] | null;
   parent: NodeApi<T> | null;
   isDraggable: boolean;
-  isDroppable: boolean;
   rowIndex: number | null;
   tree: TreeApi<T>;
 };
@@ -23,7 +22,6 @@ export class NodeApi<T = any> {
   children: NodeApi<T>[] | null;
   parent: NodeApi<T> | null;
   isDraggable: boolean;
-  isDroppable: boolean;
   rowIndex: number | null;
 
   constructor(params: Params<T>) {
@@ -34,7 +32,6 @@ export class NodeApi<T = any> {
     this.children = params.children;
     this.parent = params.parent;
     this.isDraggable = params.isDraggable;
-    this.isDroppable = params.isDroppable;
     this.rowIndex = params.rowIndex;
   }
 
@@ -58,6 +55,10 @@ export class NodeApi<T = any> {
     return this.isLeaf ? false : !this.tree.isOpen(this.id);
   }
 
+  get isEditable() {
+    return this.tree.isEditable(this.data);
+  }
+
   get isEditing() {
     return this.tree.editingId === this.id;
   }

package/src/interfaces/tree-api.ts

@@ -83,6 +83,10 @@ export class TreeApi<T> {
     return this.props.rowHeight ?? 24;
   }
 
+  get overscanCount() {
+    return this.props.overscanCount ?? 1;
+  }
+
   get searchTerm() {
     return (this.props.searchTerm || "").trim();
   }
@@ -394,6 +398,41 @@ export class TreeApi<T> {
     return this.state.dnd.cursor.type === "highlight";
   }
 
+  get dragNodes() {
+    return this.state.dnd.dragIds
+      .map((id) => this.get(id))
+      .filter((n) => !!n) as NodeApi<T>[];
+  }
+
+  canDrop() {
+    if (this.isFiltered) return false;
+    const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
+    const dragNodes = this.dragNodes;
+    const check = this.props.disableDrop;
+
+    for (const drag of dragNodes) {
+      if (!drag) return false;
+      if (!parentNode) return false;
+      if (drag.isInternal && utils.isDecendent(parentNode, drag)) return false;
+    }
+
+    // Allow the user to insert their own logic
+    if (typeof check == "function") {
+      return check({
+        parentNode,
+        dragNodes: this.dragNodes,
+        index: this.state.dnd.index,
+      });
+    } else if (typeof check == "string") {
+      // @ts-ignore
+      return !!parentNode.data[check];
+    } else if (typeof check === "boolean") {
+      return check;
+    } else {
+      return true;
+    }
+  }
+
   hideCursor() {
     this.dispatch(dnd.cursor({ type: "none" }));
   }
@@ -525,13 +564,13 @@ export class TreeApi<T> {
     }
   }
 
-  isDraggable(data: T) {
-    const check = this.props.disableDrag || (() => false);
+  isEditable(data: T) {
+    const check = this.props.disableEdit || (() => false);
     return !utils.access(data, check) ?? true;
   }
 
-  isDroppable(data: T) {
-    const check = this.props.disableDrop || (() => false);
+  isDraggable(data: T) {
+    const check = this.props.disableDrag || (() => false);
     return !utils.access(data, check) ?? true;
   }
 

package/src/state/dnd-slice.ts

@@ -3,33 +3,44 @@ import { ActionTypes } from "../types/utils";
 import { initialState } from "./initial";
 
 /* Types */
-export type DndState = { dragId: null | string; cursor: Cursor };
+export type DndState = {
+  dragId: null | string;
+  cursor: Cursor;
+  dragIds: string[];
+  parentId: null | string;
+  index: number;
+};
 
 /* Actions */
 export const actions = {
   cursor(cursor: Cursor) {
     return { type: "DND_CURSOR" as const, cursor };
   },
-  dragStart(id: string) {
-    return { type: "DND_DRAG_START" as const, id };
+  dragStart(id: string, dragIds: string[]) {
+    return { type: "DND_DRAG_START" as const, id, dragIds };
   },
   dragEnd() {
     return { type: "DND_DRAG_END" as const };
   },
+  hovering(parentId: string | null, index: number) {
+    return { type: "DND_HOVERING" as const, parentId, index };
+  },
 };
 
 /* Reducer */
 export function reducer(
   state: DndState = initialState()["dnd"],
   action: ActionTypes<typeof actions>
-) {
+): DndState {
   switch (action.type) {
     case "DND_CURSOR":
       return { ...state, cursor: action.cursor };
     case "DND_DRAG_START":
-      return { ...state, dragId: action.id };
+      return { ...state, dragId: action.id, dragIds: action.dragIds };
     case "DND_DRAG_END":
-      return { ...state, dragId: null };
+      return initialState()["dnd"];
+    case "DND_HOVERING":
+      return { ...state, parentId: action.parentId, index: action.index };
     default:
       return state;
   }

package/src/state/initial.ts

@@ -10,5 +10,11 @@ export const initialState = (props?: TreeProps<any>): RootState => ({
     drag: { id: null, idWillReceiveDrop: null },
     selection: { ids: new Set(), anchor: null, mostRecent: null },
   },
-  dnd: { cursor: { type: "none" }, dragId: null },
+  dnd: {
+    cursor: { type: "none" },
+    dragId: null,
+    dragIds: [],
+    parentId: null,
+    index: -1,
+  },
 });

package/src/types/dnd.ts

@@ -5,6 +5,5 @@ export type CursorLocation = {
 };
 
 export type DragItem = {
-  dragIds: string[];
   id: string;
 };

package/src/types/tree-props.ts

@@ -4,7 +4,7 @@ import * as renderers from "./renderers";
 import { ElementType, MouseEventHandler } from "react";
 import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
-import { OpenMap, OpenSlice } from "../state/open-slice";
+import { OpenMap } from "../state/open-slice";
 
 export interface TreeProps<T> {
   /* Data Options */
@@ -26,6 +26,7 @@ export interface TreeProps<T> {
 
   /* Sizes */
   rowHeight?: number;
+  overscanCount?: number;
   width?: number | string;
   height?: number;
   indent?: number;
@@ -34,13 +35,21 @@ export interface TreeProps<T> {
   padding?: number;
 
   /* Config */
+  childrenAccessor?: string | ((d: T) => T[] | null);
+  idAccessor?: string | ((d: T) => string);
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
   disableMultiSelection?: boolean;
+  disableEdit?: string | boolean | BoolFunc<T>;
   disableDrag?: string | boolean | BoolFunc<T>;
-  disableDrop?: string | boolean | BoolFunc<T>;
-  childrenAccessor?: string | ((d: T) => T[] | null);
-  idAccessor?: string | ((d: T) => string);
+  disableDrop?:
+    | string
+    | boolean
+    | ((args: {
+        parentNode: NodeApi<T>;
+        dragNodes: NodeApi<T>[];
+        index: number;
+      }) => boolean);
 
   /* Event Handlers */
   onActivate?: (node: NodeApi<T>) => void;

package/src/types/utils.ts

@@ -7,14 +7,6 @@ export interface IdObj {
 
 export type Identity = string | IdObj | null;
 
-// Forward ref can't forward generics without this little re-declare
-// https://fettblog.eu/typescript-react-generic-forward-refs/
-declare module "react" {
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
 export type BoolFunc<T> = (data: T) => boolean;
 
 export type ActionTypes<

package/src/utils.ts

@@ -173,6 +173,6 @@ export function getInsertParentId(tree: TreeApi<any>) {
   const focus = tree.focusedNode;
   if (!focus) return null;
   if (focus.isOpen) return focus.id;
-  if (focus.parent) return focus.parent.id;
+  if (focus.parent && !focus.parent.isRoot) return focus.parent.id;
   return null;
 }

package/tsconfig.json

@@ -1,28 +1,4 @@
 {
+  "extends": "../../tsconfig.json",
   "include": ["src/index.ts"],
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig.json to read more about this file */
-
-    /* Language and Environment */
-    "target": "ES5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
-
-    /* Modules */
-    "module": "CommonJS",                                /* Specify what module code is generated. */
-    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-
-    /* Emit */
-    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-    "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-
-    /* Interop Constraints */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-
-    /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
-    
-    /* Completeness */
-    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
-  }
 }