react-arborist 1.1.0 → 2.0.0-rc

package/src/data/create-root.ts

@@ -0,0 +1,53 @@
+import { IdObj } from "../types/utils";
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+
+export const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
+
+export function createRoot<T extends IdObj>(tree: TreeApi<T>): NodeApi<T> {
+  function visitSelfAndChildren(
+    data: T,
+    level: number,
+    parent: NodeApi<T> | null
+  ) {
+    const node = new NodeApi<T>({
+      tree,
+      data,
+      level,
+      parent,
+      id: data.id,
+      children: null,
+      isDraggable: tree.isDraggable(data),
+      isDroppable: tree.isDroppable(data),
+      rowIndex: null,
+    });
+    const children = tree.getChildren(data);
+    if (children) {
+      node.children = children.map((child: T) =>
+        visitSelfAndChildren(child, level + 1, node)
+      );
+    }
+    return node;
+  }
+
+  const root = new NodeApi<T>({
+    tree,
+    id: ROOT_ID,
+    // @ts-ignore
+    data: { id: ROOT_ID },
+    level: -1,
+    parent: null,
+    children: null,
+    isDraggable: true,
+    isDroppable: true,
+    rowIndex: null,
+  });
+
+  const data: T[] = tree.props.data ?? [];
+
+  root.children = data.map((child) => {
+    return visitSelfAndChildren(child, 0, root);
+  });
+
+  return root;
+}

package/src/data/simple-tree.ts

@@ -0,0 +1,103 @@
+type IdObj = { id: string; children?: IdObj[] };
+
+export class SimpleTree<T extends IdObj> {
+  root: SimpleNode<T>;
+  constructor(data: T[]) {
+    this.root = createRoot<T>(data);
+  }
+
+  get data() {
+    return this.root.children?.map((node) => node.data) ?? [];
+  }
+
+  create(args: { parentId: string | null; index: number; data: T }) {
+    const parent = args.parentId ? this.find(args.parentId) : this.root;
+    if (!parent) return null;
+    parent.addChild(args.data, args.index);
+  }
+
+  move(args: { id: string; parentId: string | null; index: number }) {
+    const src = this.find(args.id);
+    const parent = args.parentId ? this.find(args.parentId) : this.root;
+    if (!src || !parent) return;
+    parent.addChild(src.data, args.index);
+    src.drop();
+  }
+
+  update(args: { id: string; changes: Partial<T> }) {
+    const node = this.find(args.id);
+    if (node) node.update(args.changes);
+  }
+
+  drop(args: { id: string }) {
+    const node = this.find(args.id);
+    if (node) node.drop();
+  }
+
+  find(id: string, node: SimpleNode<T> = this.root): SimpleNode<T> | null {
+    if (!node) return null;
+    if (node.id === id) return node as SimpleNode<T>;
+    if (node.children) {
+      for (let child of node.children) {
+        const found = this.find(id, child);
+        if (found) return found;
+      }
+      return null;
+    }
+    return null;
+  }
+}
+
+function createRoot<T extends IdObj>(data: T[]) {
+  const root = new SimpleNode<T>({ id: "ROOT" } as T, null);
+  root.children = data.map((d) => createNode(d as T, root));
+  return root;
+}
+
+function createNode<T extends IdObj>(data: T, parent: SimpleNode<T>) {
+  const node = new SimpleNode<T>(data, parent);
+  if (data.children)
+    node.children = data.children.map((d) => createNode<T>(d as T, node));
+  return node;
+}
+
+class SimpleNode<T extends IdObj> {
+  id: string;
+  children?: SimpleNode<T>[];
+  constructor(public data: T, public parent: SimpleNode<T> | null) {
+    this.id = data.id;
+  }
+
+  hasParent(): this is this & { parent: SimpleNode<T> } {
+    return !!this.parent;
+  }
+
+  get childIndex(): number {
+    return this.hasParent() ? this.parent.children!.indexOf(this) : -1;
+  }
+
+  addChild(data: T, index: number) {
+    const node = createNode(data, this);
+    this.children = this.children ?? [];
+    this.children.splice(index, 0, node);
+    this.data.children = this.data.children ?? [];
+    this.data.children.splice(index, 0, data);
+  }
+
+  removeChild(index: number) {
+    this.children?.splice(index, 1);
+    this.data.children?.splice(index, 1);
+  }
+
+  update(changes: Partial<T>) {
+    if (this.hasParent()) {
+      const i = this.childIndex;
+      this.parent.addChild({ ...this.data, ...changes }, i);
+      this.drop();
+    }
+  }
+
+  drop() {
+    if (this.hasParent()) this.parent.removeChild(this.childIndex);
+  }
+}

package/src/dnd/compute-drop.ts

@@ -1,6 +1,6 @@
 import { XYCoord } from "react-dnd";
-import { Node } from "../types";
-import { bound, indexOf, isClosed, isFolder, isItem } from "../utils";
+import { NodeApi } from "../interfaces/node-api";
+import { bound, indexOf, isClosed, isItem } from "../utils";
 import { DropResult } from "./drop-hook";
 
 function measureHover(el: HTMLElement, offset: XYCoord) {
@@ -20,17 +20,17 @@ function measureHover(el: HTMLElement, offset: XYCoord) {
 type HoverData = ReturnType<typeof measureHover>;
 
 function getNodesAroundCursor(
-  node: Node | null,
-  prev: Node | null,
-  next: Node | null,
+  node: NodeApi | null,
+  prev: NodeApi | null,
+  next: NodeApi | null,
   hover: HoverData
-): [Node | null, Node | null] {
+): [NodeApi | null, NodeApi | null] {
   if (!node) {
     // We're hoving over the empty part of the list, not over an item,
     // Put the cursor below the last item which is "prev"
     return [prev, null];
   }
-  if (isFolder(node)) {
+  if (node.isInternal) {
     if (hover.atTop) {
       return [prev, node];
     } else if (hover.inMiddle) {
@@ -51,15 +51,15 @@ type Args = {
   element: HTMLElement;
   offset: XYCoord;
   indent: number;
-  node: Node | null;
-  prevNode: Node | null;
-  nextNode: Node | null;
+  node: NodeApi | null;
+  prevNode: NodeApi | null;
+  nextNode: NodeApi | null;
 };
 
 function getDropLevel(
   hovering: HoverData,
-  aboveCursor: Node | null,
-  belowCursor: Node | null,
+  aboveCursor: NodeApi | null,
+  belowCursor: NodeApi | null,
   indent: number
 ) {
   const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
@@ -78,12 +78,12 @@ function getDropLevel(
   return bound(hoverLevel, min, max);
 }
 
-function canDrop(above: Node | null, below: Node | null) {
+function canDrop(above: NodeApi | null, below: NodeApi | null) {
   if (!above) {
     return true;
   }
 
-  let n: Node | null = above;
+  let n: NodeApi | null = above;
   if (isClosed(above) && above !== below) n = above.parent;
 
   while (n) {
@@ -123,7 +123,7 @@ function highlightCursor(id: string) {
   };
 }
 
-function walkUpFrom(node: Node, level: number) {
+function walkUpFrom(node: NodeApi, level: number) {
   let drop = node;
   while (drop.parent && drop.level > level) {
     drop = drop.parent;
@@ -152,7 +152,7 @@ export function computeDrop(args: Args): ComputedDrop {
   }
 
   /* Hovering over the middle of a folder */
-  if (node && isFolder(node) && hover.inMiddle) {
+  if (node && node.isInternal && hover.inMiddle) {
     return {
       drop: dropAt(node.id, 0),
       cursor: highlightCursor(node.id),

package/src/dnd/drag-hook.ts

@@ -1,39 +1,44 @@
 import { useEffect } from "react";
 import { ConnectDragSource, useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
-import { useIsSelected, useSelectedIds, useStaticContext } from "../context";
-import { DragItem, Node } from "../types";
+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";
+import { ROOT_ID } from "../data/create-root";
 
-type CollectedProps = { isDragging: boolean };
-
-export function useDragHook(
-  node: Node
-): [{ isDragging: boolean }, ConnectDragSource] {
-  const tree = useStaticContext();
-  const isSelected = useIsSelected();
-  const ids = useSelectedIds();
-  const [{ isDragging }, ref, preview] = useDrag<
-    DragItem,
-    DropResult,
-    CollectedProps
-  >(
+export function useDragHook<T extends IdObj>(
+  node: NodeApi<T>
+): ConnectDragSource {
+  const tree = useTreeApi();
+  const ids = tree.selectedIds;
+  const [_, ref, preview] = useDrag<DragItem, DropResult, void>(
     () => ({
       canDrag: () => node.isDraggable,
       type: "NODE",
       item: () => ({
         id: node.id,
-        dragIds: isSelected(node.rowIndex) ? ids : [node.id],
-      }),
-      collect: (m) => ({
-        isDragging: m.isDragging(),
+        dragIds: tree.isSelected(node.id) ? Array.from(ids) : [node.id],
       }),
+      start: () => {
+        tree.dispatch(dnd.dragStart(node.id));
+      },
       end: (item, monitor) => {
-        tree.api.hideCursor();
+        tree.dispatch(dnd.dragEnd());
+        tree.hideCursor();
         const drop = monitor.getDropResult();
+        // If they held down meta, we need to create a copy
+        // if (drop.dropEffect === "copy")
         if (drop && drop.parentId) {
-          tree.onMove(item.dragIds, drop.parentId, drop.index);
-          tree.onToggle(drop.parentId, true);
+          safeRun(tree.props.onMove, {
+            dragIds: item.dragIds,
+            parentId: drop.parentId === ROOT_ID ? null : drop.parentId,
+            index: drop.index,
+          });
+          tree.open(drop.parentId);
         }
       },
     }),
@@ -44,5 +49,5 @@ export function useDragHook(
     preview(getEmptyImage());
   }, [preview]);
 
-  return [{ isDragging }, ref];
+  return ref;
 }

package/src/dnd/drop-hook.ts

@@ -1,8 +1,9 @@
 import { RefObject } from "react";
 import { ConnectDropTarget, useDrop } from "react-dnd";
-import { useStaticContext } from "../context";
-import { DragItem, Node } from "../types";
-import { isDecendent, isFolder } from "../utils";
+import { useTreeApi } from "../context";
+import { NodeApi } from "../interfaces/node-api";
+import { DragItem } from "../types/dnd";
+import { isDecendent } from "../utils";
 import { computeDrop } from "./compute-drop";
 
 export type DropResult = {
@@ -10,23 +11,34 @@ export type DropResult = {
   index: number;
 };
 
-export type CollectedProps = undefined;
-
 export function useDropHook(
   el: RefObject<HTMLElement | null>,
-  node: Node,
-  prev: Node | null,
-  next: Node | null
-): [CollectedProps, ConnectDropTarget] {
-  const tree = useStaticContext();
-  return useDrop<DragItem, DropResult | null, CollectedProps>(
+  node: NodeApi<any>
+): ConnectDropTarget {
+  const tree = useTreeApi();
+  const [_, dropRef] = useDrop<DragItem, DropResult | null, void>(
     () => ({
       accept: "NODE",
-      canDrop: (item) => {
+      canDrop: (item, m) => {
+        if (node.tree.isFiltered) return false;
+        const offset = m.getClientOffset();
+        if (!el.current || !offset) return false;
+        const { drop } = computeDrop({
+          element: el.current,
+          offset: offset,
+          indent: tree.indent,
+          node: node,
+          prevNode: node.prev,
+          nextNode: node.next,
+        });
+        if (!drop) return false;
+        const dropParent = tree.get(drop.parentId) ?? tree.root;
+
         for (let id of item.dragIds) {
-          const drag = tree.api.getNode(id);
+          const drag = tree.get(id);
           if (!drag) return false;
-          if (isFolder(drag) && isDecendent(node, drag)) return false;
+          if (!dropParent) return false;
+          if (drag.isInternal && isDecendent(dropParent, drag)) return false;
         }
         return true;
       },
@@ -39,12 +51,12 @@ export function useDropHook(
             offset: offset,
             indent: tree.indent,
             node: node,
-            prevNode: prev,
-            nextNode: next,
+            prevNode: node.prev,
+            nextNode: node.next,
           });
-          if (cursor) tree.api.showCursor(cursor);
+          if (cursor) tree.showCursor(cursor);
         } else {
-          tree.api.hideCursor();
+          tree.hideCursor();
         }
       },
       drop: (item, m): DropResult | undefined | null => {
@@ -55,12 +67,14 @@ export function useDropHook(
           offset: offset,
           indent: tree.indent,
           node: node,
-          prevNode: prev,
-          nextNode: next,
+          prevNode: node.prev,
+          nextNode: node.next,
         });
         return drop;
       },
     }),
-    [node, prev, el, tree]
+    [node, el.current, tree.props]
   );
+
+  return dropRef;
 }

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

@@ -1,11 +1,11 @@
 import { useDrop } from "react-dnd";
-import { useStaticContext } from "../context";
-import { DragItem } from "../types";
+import { useTreeApi } from "../context";
+import { DragItem } from "../types/dnd";
 import { computeDrop } from "./compute-drop";
 import { DropResult } from "./drop-hook";
 
 export function useOuterDrop() {
-  const tree = useStaticContext();
+  const tree = useTreeApi();
 
   // In case we drop an item at the bottom of the list
   const [, drop] = useDrop<DragItem, DropResult | null, { isOver: boolean }>(
@@ -20,10 +20,10 @@ export function useOuterDrop() {
           offset: offset,
           indent: tree.indent,
           node: null,
-          prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
+          prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
           nextNode: null,
         });
-        if (cursor) tree.api.showCursor(cursor);
+        if (cursor) tree.showCursor(cursor);
       },
       canDrop: (item, m) => {
         return m.isOver({ shallow: true });
@@ -37,7 +37,7 @@ export function useOuterDrop() {
           offset: offset,
           indent: tree.indent,
           node: null,
-          prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
+          prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
           nextNode: null,
         });
         return drop;

package/src/hooks/use-fresh-node.ts

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import { useTreeApi } from "../context";
+import { IdObj } from "../types/utils";
+
+export function useFreshNode<T extends IdObj>(index: number) {
+  const tree = useTreeApi<T>();
+  const original = tree.at(index);
+  if (!original) throw new Error(`Could not find node for index: ${index}`);
+
+  return useMemo(() => {
+    const fresh = original.clone();
+    tree.visibleNodes[index] = fresh; // sneaky
+    return fresh;
+    // Return a fresh instance if the state values change
+  }, [...Object.values(original.state), original]);
+}

package/src/hooks/use-simple-tree.ts

@@ -0,0 +1,55 @@
+import { useMemo, useState } from "react";
+import { SimpleTree } from "../data/simple-tree";
+import {
+  CreateHandler,
+  DeleteHandler,
+  MoveHandler,
+  RenameHandler,
+} from "../types/handlers";
+import { IdObj } from "../types/utils";
+
+export type SimpleTreeData = {
+  id: string;
+  name: string;
+  children?: SimpleTreeData[];
+};
+
+let nextId = 0;
+
+export function useSimpleTree<T extends IdObj>(initialData: T[]) {
+  const [data, setData] = useState(initialData);
+  const tree = useMemo(() => new SimpleTree<T>(data), [data]);
+
+  const onMove: MoveHandler = (args: {
+    dragIds: string[];
+    parentId: null | string;
+    index: number;
+  }) => {
+    for (const id of args.dragIds) {
+      tree.move({ id, parentId: args.parentId, index: args.index });
+    }
+    setData(tree.data);
+  };
+
+  const onRename: RenameHandler = ({ name, id }) => {
+    tree.update({ id, changes: { name } as any });
+    setData(tree.data);
+  };
+
+  const onCreate: CreateHandler = ({ parentId, index, type }) => {
+    const data = { id: `simple-tree-id-${nextId++}`, name: "" } as any;
+    if (type === "internal") data.children = [];
+    tree.create({ parentId, index, data });
+    setData(tree.data);
+    return data;
+  };
+
+  const onDelete: DeleteHandler = (args: { ids: string[] }) => {
+    args.ids.forEach((id) => tree.drop({ id }));
+    setData(tree.data);
+  };
+
+  const controller = { onMove, onRename, onCreate, onDelete };
+
+  return [data, controller] as const;
+}

package/src/hooks/use-validated-props.ts

@@ -0,0 +1,35 @@
+import { TreeProps } from "../types/tree-props";
+import { IdObj } from "../types/utils";
+import { SimpleTreeData, useSimpleTree } from "./use-simple-tree";
+
+export function useValidatedProps<T extends IdObj>(
+  props: TreeProps<T>
+): TreeProps<T> {
+  if (props.initialData && props.data) {
+    throw new Error(
+      `React Arborist Tree => Provide either a data or initialData prop, but not both.`
+    );
+  }
+  if (
+    props.initialData &&
+    (props.onCreate || props.onDelete || props.onMove || props.onRename)
+  ) {
+    throw new Error(
+      `React Arborist Tree => You passed the initialData prop along with a data handler.
+Use the data prop if you want to provide your own handlers.`
+    );
+  }
+  if (props.initialData) {
+    /**
+     * Let's break the rules of hooks here. If the initialData prop
+     * is provided, we will assume it will not change for the life of
+     * the component.
+     *
+     * We will provide the real data and the handlers to update it.
+     *   */
+    const [data, controller] = useSimpleTree<T>(props.initialData);
+    return { ...props, ...controller, data };
+  } else {
+    return props;
+  }
+}

package/src/index.ts

@@ -1,5 +1,9 @@
-import { Tree } from "./components/tree";
-import { TreeApi } from "./tree-api";
-import type { NodeRenderer, NodeState, NodeHandlers } from "./types";
-
-export { Tree, TreeApi, NodeRenderer, NodeState, NodeHandlers };
+/* The Public Api */
+export { Tree } from "./components/tree";
+export * from "./types/handlers";
+export * from "./types/renderers";
+export * from "./types/state";
+export * from "./interfaces/node-api";
+export * from "./interfaces/tree-api";
+export * from "./data/simple-tree";
+export * from "./hooks/use-simple-tree";