react-arborist 2.0.0-rc.1 → 2.0.0

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;
@@ -33,11 +33,14 @@ export interface TreeProps<T extends IdObj> {
     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.1",
+  "version": "2.0.0",
   "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",

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-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/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>,
@@ -35,11 +35,8 @@ const DropContainer = () => {
         left: "0",
         right: "0",
       }}
-      onClick={(e) => {
-        console.log(e.currentTarget, e.target);
-      }}
     >
-      <DropCursor />
+      <Cursor />
     </div>
   );
 };

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/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

@@ -54,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;
   }
@@ -62,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;
   }
@@ -84,13 +92,16 @@ 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,
     };
   }

package/src/interfaces/tree-api.ts

@@ -68,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() {
@@ -176,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);
@@ -284,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);
     }
   }
 
@@ -321,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);
   }
 
@@ -338,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);
   }
 
@@ -350,6 +347,7 @@ 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);
   }
 
@@ -365,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);
   }
 
@@ -397,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) {
@@ -439,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") {
@@ -471,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;

package/src/types/tree-props.ts

@@ -21,7 +21,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<{}>;
 
   /* Sizes */
@@ -45,6 +45,8 @@ export interface TreeProps<T extends IdObj> {
   onActivate?: (node: NodeApi<T>) => void;
   onSelect?: (nodes: NodeApi<T>[]) => void;
   onScroll?: (props: ListOnScrollProps) => void;
+  onToggle?: (id: string) => void;
+  onFocus?: (node: NodeApi<T>) => void;
 
   /* Selection */
   selection?: string;
@@ -58,6 +60,8 @@ export interface TreeProps<T extends IdObj> {
 
   /* Extra */
   className?: string | undefined;
+  rowClassName?: string | undefined;
+
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;

package/src/utils.ts

@@ -1,4 +1,5 @@
 import { NodeApi } from "./interfaces/node-api";
+import { TreeApi } from "./interfaces/tree-api";
 import { IdObj } from "./types/utils";
 
 export function bound(n: number, min: number, max: number) {
@@ -44,6 +45,18 @@ export function dfs(node: NodeApi<any>, id: string): NodeApi<any> | null {
   return null;
 }
 
+export function walk(
+  node: NodeApi<any>,
+  fn: (node: NodeApi<any>) => void
+): void {
+  fn(node);
+  if (node.children) {
+    for (let child of node.children) {
+      walk(child, fn);
+    }
+  }
+}
+
 export function focusNextElement(target: HTMLElement) {
   const elements = getFocusable(target);
 
@@ -147,3 +160,19 @@ export function waitFor(fn: () => boolean) {
     check();
   });
 }
+
+export function getInsertIndex(tree: TreeApi<any>) {
+  const focus = tree.focusedNode;
+  if (!focus) return tree.root.children?.length ?? 0;
+  if (focus.isOpen) return 0;
+  if (focus.parent) return focus.childIndex + 1;
+  return 0;
+}
+
+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;
+  return null;
+}