react-arborist 2.0.0-rc → 2.0.0-rc.2

package/dist/types/renderers.d.ts

@@ -23,7 +23,7 @@ export declare type DragPreviewProps = {
     dragIds: string[];
     isDragging: boolean;
 };
-export declare type DropCursorProps = {
+export declare type CursorProps = {
     top: number;
     left: number;
     indent: number;

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

@@ -15,7 +15,7 @@ export interface TreeProps<T extends IdObj> {
     children?: ElementType<renderers.NodeRendererProps<T>>;
     renderRow?: ElementType<renderers.RowRendererProps<T>>;
     renderDragPreview?: ElementType<renderers.DragPreviewProps>;
-    renderCursor?: ElementType<renderers.DropCursorProps>;
+    renderCursor?: ElementType<renderers.CursorProps>;
     renderContainer?: ElementType<{}>;
     rowHeight?: number;
     width?: number;
@@ -28,15 +28,19 @@ export interface TreeProps<T extends IdObj> {
     selectionFollowsFocus?: boolean;
     disableDrag?: string | boolean | BoolFunc<T>;
     disableDrop?: string | boolean | BoolFunc<T>;
-    getChildren?: string | ((d: T) => T[]);
+    childrenAccessor?: string | ((d: T) => T[]);
+    idAccessor?: string | ((d: T) => string);
     onActivate?: (node: NodeApi<T>) => void;
     onSelect?: (nodes: NodeApi<T>[]) => void;
     onScroll?: (props: ListOnScrollProps) => void;
+    onToggle?: (id: string) => void;
+    onFocus?: (node: NodeApi<T>) => void;
     selection?: string;
     initialOpenState?: OpenMap;
     searchTerm?: string;
     searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
     className?: string | undefined;
+    rowClassName?: string | undefined;
     dndRootElement?: globalThis.Node | null;
     onClick?: MouseEventHandler;
     onContextMenu?: MouseEventHandler;

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import { NodeApi } from "./interfaces/node-api";
+import { TreeApi } from "./interfaces/tree-api";
 import { IdObj } from "./types/utils";
 export declare function bound(n: number, min: number, max: number): number;
 export declare function isItem(node: NodeApi<any> | null): boolean | null;
@@ -10,6 +11,7 @@ export declare const isDecendent: (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;
+export declare function walk(node: NodeApi<any>, fn: (node: NodeApi<any>) => void): void;
 export declare function focusNextElement(target: HTMLElement): void;
 export declare function focusPrevElement(target: HTMLElement): void;
 export declare function access<T = boolean>(obj: any, accessor: string | boolean | Function): T;
@@ -18,3 +20,5 @@ export declare function identify(obj: string | IdObj): string;
 export declare function mergeRefs(...refs: any): (instance: any) => void;
 export declare function safeRun<T extends (...args: any[]) => any>(fn: T | undefined, ...args: Parameters<T>): any;
 export declare function waitFor(fn: () => boolean): Promise<void>;
+export declare function getInsertIndex(tree: TreeApi<any>): number;
+export declare function getInsertParentId(tree: TreeApi<any>): string | null;

package/package.json

@@ -1,13 +1,24 @@
 {
   "name": "react-arborist",
-  "version": "2.0.0-rc",
+  "version": "2.0.0-rc.2",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/module.js",
   "types": "dist/index.d.ts",
-  "repository": "github:brimdata/react-arborist",
+  "repository": "https://github.com/brimdata/react-arborist",
   "homepage": "https://react-arborist.netlify.app",
+  "keywords": [
+    "react",
+    "arborist",
+    "react-arborist",
+    "treeview",
+    "tree",
+    "vitualized",
+    "dnd",
+    "multiselection",
+    "filterable"
+  ],
   "dependencies": {
     "react-dnd": "^14.0.3",
     "react-dnd-html5-backend": "^14.0.1",
@@ -29,6 +40,7 @@
     "react-dom": ">= 16.14"
   },
   "devDependencies": {
+    "@parcel/core": "^2.3.2",
     "@types/jest": "^27.4.1",
     "@types/react": "^18.0.0",
     "@types/react-window": "^1.8.5",

package/src/components/cursor.tsx

@@ -1,6 +1,6 @@
 import { useDndContext, useTreeApi } from "../context";
 
-export function DropCursor() {
+export function Cursor() {
   const tree = useTreeApi();
   const state = useDndContext();
   const cursor = state.cursor;

package/src/components/default-container.tsx

@@ -8,6 +8,11 @@ import { RowContainer } from "./row-container";
 let focusSearchTerm = "";
 let timeoutId: any = null;
 
+/**
+ * All these keyboard shortcuts seem like they should be configurable.
+ * Each operation should be a given a name and separated from
+ * the event handler. Future clean up welcome.
+ */
 export function DefaultContainer() {
   useDataUpdates();
   const tree = useTreeApi();
@@ -37,6 +42,7 @@ export function DefaultContainer() {
           return;
         }
         if (e.key === "Backspace") {
+          if (!tree.props.onDelete) return;
           const ids = Array.from(tree.selectedIds);
           if (ids.length > 1) {
             let nextFocus = tree.mostRecentNode;
@@ -129,10 +135,12 @@ export function DefaultContainer() {
           return;
         }
         if (e.key === "a" && !e.metaKey) {
+          if (!tree.props.onCreate) return;
           tree.createLeaf();
           return;
         }
         if (e.key === "A" && !e.metaKey) {
+          if (!tree.props.onCreate) return;
           tree.createInternal();
           return;
         }
@@ -150,6 +158,7 @@ export function DefaultContainer() {
           return;
         }
         if (e.key === "Enter") {
+          if (!tree.props.onRename) return;
           setTimeout(() => {
             if (tree.focusedNode) tree.edit(tree.focusedNode);
           });

package/src/components/default-cursor.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from "react";
-import { DropCursorProps } from "../types/renderers";
+import { CursorProps } from "../types/renderers";
 
 const placeholderStyle = {
   display: "flex",
@@ -25,7 +25,7 @@ export const DefaultCursor = React.memo(function DefaultCursor({
   top,
   left,
   indent,
-}: DropCursorProps) {
+}: CursorProps) {
   const style: CSSProperties = {
     position: "absolute",
     pointerEvents: "none",

package/src/components/default-node.tsx

@@ -1,15 +1,50 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { NodeRendererProps } from "../types/renderers";
 import { IdObj } from "../types/utils";
 
-export function DefaultNode<T extends IdObj>({
-  style,
-  node,
-  dragHandle,
-}: NodeRendererProps<T>) {
+export function DefaultNode<T extends IdObj>(props: NodeRendererProps<T>) {
   return (
-    <div style={style} ref={dragHandle}>
-      ID: {node.data.id}
+    <div ref={props.dragHandle} style={props.style}>
+      <span
+        onClick={(e) => {
+          e.stopPropagation();
+          props.node.toggle();
+        }}
+      >
+        {props.node.isLeaf ? "🌳" : props.node.isOpen ? "🗁" : "🗀"}
+      </span>{" "}
+      {props.node.isEditing ? <Edit {...props} /> : <Show {...props} />}
     </div>
   );
 }
+
+function Show<T extends IdObj>(props: NodeRendererProps<T>) {
+  return (
+    <>
+      {/* @ts-ignore */}
+      <span>{props.node.data.name}</span>
+    </>
+  );
+}
+
+function Edit<T extends IdObj>({ node }: NodeRendererProps<T>) {
+  const input = useRef<any>();
+
+  useEffect(() => {
+    input.current?.focus();
+    input.current?.select();
+  }, []);
+
+  return (
+    <input
+      ref={input}
+      // @ts-ignore
+      defaultValue={node.data.name}
+      onBlur={() => node.reset()}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") node.reset();
+        if (e.key === "Enter") node.submit(input.current?.value || "");
+      }}
+    ></input>
+  );
+}

package/src/components/list-outer-element.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import { useTreeApi } from "../context";
 import { treeBlur } from "../state/focus-slice";
-import { DropCursor } from "./cursor";
+import { Cursor } from "./cursor";
 
 export const ListOuterElement = forwardRef(function Outer(
   props: React.HTMLProps<HTMLDivElement>,
@@ -15,7 +15,7 @@ export const ListOuterElement = forwardRef(function Outer(
       ref={ref}
       {...rest}
       onClick={(e) => {
-        if (e.currentTarget === e.target) tree.selectNone();
+        if (e.currentTarget === e.target) tree.deselectAll();
       }}
     >
       <DropContainer />
@@ -35,11 +35,8 @@ const DropContainer = () => {
         left: "0",
         right: "0",
       }}
-      onClick={(e) => {
-        console.log(e.currentTarget, e.target);
-      }}
     >
-      <DropCursor />
+      <Cursor />
     </div>
   );
 };

package/src/components/provider.tsx

@@ -67,7 +67,7 @@ export function TreeProvider<T extends IdObj>({
     if (api.props.selection) {
       api.select(api.props.selection);
     } else {
-      api.selectNone();
+      api.deselectAll();
     }
   }, [api.props.selection]);
 

package/src/components/row-container.tsx

@@ -63,6 +63,7 @@ export const RowContainer = React.memo(function RowContainer<T extends IdObj>({
     "aria-selected": node.isSelected,
     style: rowStyle,
     tabIndex: -1,
+    className: tree.props.rowClassName,
   };
 
   useEffect(() => {

package/src/data/create-root.ts

@@ -10,18 +10,19 @@ export function createRoot<T extends IdObj>(tree: TreeApi<T>): NodeApi<T> {
     level: number,
     parent: NodeApi<T> | null
   ) {
+    const id = tree.accessId(data);
     const node = new NodeApi<T>({
       tree,
       data,
       level,
       parent,
-      id: data.id,
+      id,
       children: null,
       isDraggable: tree.isDraggable(data),
       isDroppable: tree.isDroppable(data),
       rowIndex: null,
     });
-    const children = tree.getChildren(data);
+    const children = tree.accessChildren(data);
     if (children) {
       node.children = children.map((child: T) =>
         visitSelfAndChildren(child, level + 1, node)

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

@@ -1,6 +1,7 @@
 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";
 
@@ -13,9 +14,28 @@ export function useOuterDrop() {
       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) => {
+        if (!m.isOver({ shallow: true })) return false;
+        if (tree.isFiltered) return false;
         const offset = m.getClientOffset();
-        if (!tree.listEl.current || !offset) return;
-        const { cursor } = computeDrop({
+        if (!tree.listEl.current || !offset) return false;
+        const { drop } = computeDrop({
           element: tree.listEl.current,
           offset: offset,
           indent: tree.indent,
@@ -23,10 +43,16 @@ export function useOuterDrop() {
           prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
           nextNode: null,
         });
-        if (cursor) tree.showCursor(cursor);
-      },
-      canDrop: (item, m) => {
-        return m.isOver({ shallow: true });
+        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;
       },
       drop: (item, m) => {
         if (m.didDrop()) return;

package/src/interfaces/node-api.ts

@@ -38,21 +38,6 @@ export class NodeApi<T extends IdObj = IdObj> {
     this.rowIndex = params.rowIndex;
   }
 
-  get next(): NodeApi<T> | null {
-    if (this.rowIndex === null) return null;
-    return this.tree.at(this.rowIndex + 1);
-  }
-
-  get prev(): NodeApi<T> | null {
-    if (this.rowIndex === null) return null;
-    return this.tree.at(this.rowIndex - 1);
-  }
-
-  get nextSibling(): NodeApi<T> | null {
-    const i = this.childIndex;
-    return this.parent?.children![i + 1] ?? null;
-  }
-
   get isRoot() {
     return this.id === ROOT_ID;
   }
@@ -69,6 +54,10 @@ export class NodeApi<T extends IdObj = IdObj> {
     return this.isLeaf ? false : this.tree.isOpen(this.id);
   }
 
+  get isClosed() {
+    return this.isLeaf ? false : !this.tree.isOpen(this.id);
+  }
+
   get isEditing() {
     return this.tree.editingId === this.id;
   }
@@ -77,6 +66,10 @@ export class NodeApi<T extends IdObj = IdObj> {
     return this.tree.isSelected(this.id);
   }
 
+  get isOnlySelection() {
+    return this.isSelected && this.tree.hasOneSelection;
+  }
+
   get isSelectedStart() {
     return this.isSelected && !this.prev?.isSelected;
   }
@@ -89,14 +82,6 @@ export class NodeApi<T extends IdObj = IdObj> {
     return this.tree.isFocused(this.id);
   }
 
-  get childIndex() {
-    if (this.parent && this.parent.children) {
-      return this.parent.children.findIndex((child) => child.id === this.id);
-    } else {
-      return -1;
-    }
-  }
-
   get isDragging() {
     return this.tree.isDragging(this.id);
   }
@@ -107,17 +92,43 @@ export class NodeApi<T extends IdObj = IdObj> {
 
   get state() {
     return {
-      isEditing: this.isEditing,
+      isClosed: this.isClosed,
       isDragging: this.isDragging,
-      isSelected: this.isSelected,
-      isSelectedStart: this.isSelectedStart,
-      isSelectedEnd: this.isSelectedEnd,
+      isEditing: this.isEditing,
       isFocused: this.isFocused,
+      isInternal: this.isInternal,
+      isLeaf: this.isLeaf,
       isOpen: this.isOpen,
+      isSelected: this.isSelected,
+      isSelectedEnd: this.isSelectedEnd,
+      isSelectedStart: this.isSelectedStart,
       willReceiveDrop: this.willReceiveDrop,
     };
   }
 
+  get childIndex() {
+    if (this.parent && this.parent.children) {
+      return this.parent.children.findIndex((child) => child.id === this.id);
+    } else {
+      return -1;
+    }
+  }
+
+  get next(): NodeApi<T> | null {
+    if (this.rowIndex === null) return null;
+    return this.tree.at(this.rowIndex + 1);
+  }
+
+  get prev(): NodeApi<T> | null {
+    if (this.rowIndex === null) return null;
+    return this.tree.at(this.rowIndex - 1);
+  }
+
+  get nextSibling(): NodeApi<T> | null {
+    const i = this.childIndex;
+    return this.parent?.children![i + 1] ?? null;
+  }
+
   select() {
     this.tree.select(this);
   }

package/src/interfaces/tree-api.ts

@@ -2,12 +2,7 @@ import { EditResult } from "../types/handlers";
 import { Identity, IdObj } from "../types/utils";
 import { TreeProps } from "../types/tree-props";
 import { MutableRefObject } from "react";
-import {
-  Align,
-  FixedSizeList,
-  ListOnItemsRenderedProps,
-  ListOnScrollProps,
-} from "react-window";
+import { Align, FixedSizeList, ListOnItemsRenderedProps } from "react-window";
 import * as utils from "../utils";
 import { DefaultCursor } from "../components/default-cursor";
 import { DefaultRow } from "../components/default-row";
@@ -73,19 +68,19 @@ export class TreeApi<T extends IdObj> {
   /* Tree Props */
 
   get width() {
-    return this.props.width || 300;
+    return this.props.width ?? 300;
   }
 
   get height() {
-    return this.props.height || 500;
+    return this.props.height ?? 500;
   }
 
   get indent() {
-    return this.props.indent || 24;
+    return this.props.indent ?? 24;
   }
 
   get rowHeight() {
-    return this.props.rowHeight || 24;
+    return this.props.rowHeight ?? 24;
   }
 
   get searchTerm() {
@@ -102,11 +97,21 @@ export class TreeApi<T extends IdObj> {
     return (node: NodeApi<T>) => match(node, this.searchTerm);
   }
 
-  getChildren(data: T) {
-    const get = this.props.getChildren || "children";
+  accessChildren(data: T) {
+    const get = this.props.childrenAccessor || "children";
     return utils.access<T[] | undefined>(data, get) ?? null;
   }
 
+  accessId(data: T) {
+    const get = this.props.idAccessor || "id";
+    const id = utils.access<string>(data, get);
+    if (!id)
+      throw new Error(
+        "Data must contain an 'id' property or props.idAccessor must return a string"
+      );
+    return id;
+  }
+
   /* Node Access */
 
   get firstNode() {
@@ -171,33 +176,27 @@ export class TreeApi<T extends IdObj> {
   }
 
   createInternal() {
-    return this.create("internal");
+    return this.create({ type: "internal" });
   }
 
   createLeaf() {
-    return this.create("leaf");
-  }
-
-  private async create(type: "internal" | "leaf") {
-    let index;
-    let parentId;
-    const focus = this.focusedNode;
-    if (focus && focus.parent) {
-      if (focus.isInternal && focus.isOpen) {
-        parentId = focus.id;
-        index = 0;
-      } else {
-        index = focus.childIndex + 1;
-        parentId = focus.parent.isRoot ? null : focus.parent.id;
-      }
-    } else {
-      index = this.root?.children?.length || -1;
-      parentId = null;
-    }
+    return this.create({ type: "leaf" });
+  }
+
+  async create(
+    opts: {
+      type?: "internal" | "leaf";
+      parentId?: null | string;
+      index?: null | number;
+    } = {}
+  ) {
     const data = await safeRun(this.props.onCreate, {
-      parentId,
-      index,
-      type,
+      type: opts.type ?? "leaf",
+      parentId:
+        opts.parentId === undefined
+          ? utils.getInsertParentId(this)
+          : opts.parentId,
+      index: opts.index ?? utils.getInsertIndex(this),
     });
     if (data) {
       this.focus(data);
@@ -279,6 +278,7 @@ export class TreeApi<T extends IdObj> {
     } else {
       this.dispatch(focus(identify(node)));
       if (opts.scroll !== false) this.scrollTo(node);
+      if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     }
   }
 
@@ -316,6 +316,7 @@ export class TreeApi<T extends IdObj> {
     this.dispatch(selection.anchor(id));
     this.dispatch(selection.mostRecent(id));
     this.scrollTo(id, opts.align);
+    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
@@ -333,6 +334,7 @@ export class TreeApi<T extends IdObj> {
     this.dispatch(selection.anchor(node.id));
     this.dispatch(selection.mostRecent(node.id));
     this.scrollTo(node);
+    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
@@ -345,10 +347,11 @@ export class TreeApi<T extends IdObj> {
     this.dispatch(selection.add(this.nodesBetween(anchor, identifyNull(id))));
     this.dispatch(selection.mostRecent(id));
     this.scrollTo(id);
+    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
-  selectNone() {
+  deselectAll() {
     this.dispatch(selection.clear());
     this.dispatch(selection.anchor(null));
     this.dispatch(selection.mostRecent(null));
@@ -360,6 +363,7 @@ export class TreeApi<T extends IdObj> {
     this.dispatch(focus(this.lastNode?.id));
     this.dispatch(selection.anchor(this.firstNode));
     this.dispatch(selection.mostRecent(this.lastNode));
+    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
@@ -392,13 +396,17 @@ export class TreeApi<T extends IdObj> {
   open(identity: Identity) {
     const id = identifyNull(identity);
     if (!id) return;
+    if (this.isOpen(id)) return;
     this.dispatch(visibility.open(id, this.isFiltered));
+    safeRun(this.props.onToggle, id);
   }
 
   close(identity: Identity) {
     const id = identifyNull(identity);
     if (!id) return;
+    if (!this.isOpen(id)) return;
     this.dispatch(visibility.close(id, this.isFiltered));
+    safeRun(this.props.onToggle, id);
   }
 
   toggle(identity: Identity) {
@@ -434,6 +442,18 @@ export class TreeApi<T extends IdObj> {
     }
   }
 
+  openAll() {
+    utils.walk(this.root, (node) => {
+      if (node.isInternal) node.open();
+    });
+  }
+
+  closeAll() {
+    utils.walk(this.root, (node) => {
+      if (node.isInternal) node.close();
+    });
+  }
+
   /* Scrolling */
 
   scrollTo(identity: Identity, align: Align = "smart") {
@@ -466,6 +486,18 @@ export class TreeApi<T extends IdObj> {
     return this.state.nodes.focus.treeFocused;
   }
 
+  get hasNoSelection() {
+    return this.state.nodes.selection.ids.size === 0;
+  }
+
+  get hasOneSelection() {
+    return this.state.nodes.selection.ids.size === 1;
+  }
+
+  get hasMultipleSelections() {
+    return this.state.nodes.selection.ids.size > 1;
+  }
+
   isSelected(id?: string) {
     if (!id) return false;
     return this.state.nodes.selection.ids.has(id);

package/src/types/renderers.ts

@@ -27,7 +27,7 @@ export type DragPreviewProps = {
   isDragging: boolean;
 };
 
-export type DropCursorProps = {
+export type CursorProps = {
   top: number;
   left: number;
   indent: number;