react-arborist 1.1.0 → 2.0.0-rc

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

@@ -0,0 +1,12 @@
+export declare type FocusState = {
+    id: string | null;
+    treeFocused: boolean;
+};
+export declare function focus(id: string | null): {
+    type: "FOCUS";
+    id: string | null;
+};
+export declare function treeBlur(): {
+    readonly type: "TREE_BLUR";
+};
+export declare function reducer(state: FocusState | undefined, action: ReturnType<typeof focus> | ReturnType<typeof treeBlur>): FocusState;

package/dist/state/initial.d.ts

@@ -0,0 +1,3 @@
+import { TreeProps } from "../types/tree-props";
+import { RootState } from "./root-reducer";
+export declare const initialState: (props?: TreeProps<any>) => RootState;

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

@@ -0,0 +1,30 @@
+import { ActionTypes } from "../types/utils";
+export declare type OpenMap = {
+    [id: string]: boolean;
+};
+export declare type OpenSlice = {
+    unfiltered: OpenMap;
+    filtered: OpenMap;
+};
+export declare const actions: {
+    open(id: string, filtered: boolean): {
+        type: "VISIBILITY_OPEN";
+        id: string;
+        filtered: boolean;
+    };
+    close(id: string, filtered: boolean): {
+        type: "VISIBILITY_CLOSE";
+        id: string;
+        filtered: boolean;
+    };
+    toggle(id: string, filtered: boolean): {
+        type: "VISIBILITY_TOGGLE";
+        id: string;
+        filtered: boolean;
+    };
+    clear(filtered: boolean): {
+        type: "VISIBILITY_CLEAR";
+        filtered: boolean;
+    };
+};
+export declare function reducer(state: OpenSlice | undefined, action: ActionTypes<typeof actions>): OpenSlice;

package/dist/state/root-reducer.d.ts

@@ -0,0 +1,13 @@
+import { ActionFromReducer } from "redux";
+export declare const rootReducer: import("redux").Reducer<import("redux").CombinedState<{
+    nodes: import("redux").CombinedState<{
+        focus: import("./focus-slice").FocusState;
+        edit: import("./edit-slice").EditState;
+        open: import("./open-slice").OpenSlice;
+        selection: import("./selection-slice").SelectionState;
+        drag: import("./drag-slice").DragSlice;
+    }>;
+    dnd: import("./dnd-slice").DndState;
+}>, import("redux").AnyAction>;
+export declare type RootState = ReturnType<typeof rootReducer>;
+export declare type Actions = ActionFromReducer<typeof rootReducer>;

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

@@ -0,0 +1,36 @@
+import { ActionTypes, IdObj } from "../types/utils";
+export declare type SelectionState = {
+    ids: Set<string>;
+    anchor: string | null;
+    mostRecent: string | null;
+};
+export declare const actions: {
+    clear: () => {
+        type: "SELECTION_CLEAR";
+    };
+    only: (id: string | IdObj) => {
+        type: "SELECTION_ONLY";
+        id: string;
+    };
+    add: (id: string | string[] | IdObj | IdObj[]) => {
+        type: "SELECTION_ADD";
+        ids: string[];
+    };
+    remove: (id: string | string[] | IdObj | IdObj[]) => {
+        type: "SELECTION_REMOVE";
+        ids: string[];
+    };
+    set: (ids: Set<string>) => {
+        type: "SELECTION_SET";
+        ids: Set<string>;
+    };
+    mostRecent: (id: string | null | IdObj) => {
+        type: "SELECTION_MOST_RECENT";
+        id: string | null;
+    };
+    anchor: (id: string | null | IdObj) => {
+        type: "SELECTION_ANCHOR";
+        id: string | null;
+    };
+};
+export declare function reducer(state: SelectionState | undefined, action: ActionTypes<typeof actions>): SelectionState;

package/dist/types/dnd.d.ts

@@ -0,0 +1,9 @@
+export declare type CursorLocation = {
+    index: number | null;
+    level: number | null;
+    parentId: string | null;
+};
+export declare type DragItem = {
+    dragIds: string[];
+    id: string;
+};

package/dist/types/handlers.d.ts

@@ -0,0 +1,24 @@
+import { IdObj } from "./utils";
+export declare type CreateHandler = (args: {
+    parentId: string | null;
+    index: number;
+    type: "internal" | "leaf";
+}) => (IdObj | null) | Promise<IdObj | null>;
+export declare type MoveHandler = (args: {
+    dragIds: string[];
+    parentId: string | null;
+    index: number;
+}) => void | Promise<void>;
+export declare type RenameHandler = (args: {
+    id: string;
+    name: string;
+}) => void | Promise<void>;
+export declare type DeleteHandler = (args: {
+    ids: string[];
+}) => void | Promise<void>;
+export declare type EditResult = {
+    cancelled: true;
+} | {
+    cancelled: false;
+    value: string;
+};

package/dist/types/renderers.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties, HTMLAttributes, ReactElement } from "react";
+import { IdObj } from "./utils";
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+import { XYCoord } from "react-dnd";
+export declare type NodeRendererProps<T extends IdObj> = {
+    style: CSSProperties;
+    node: NodeApi<T>;
+    tree: TreeApi<T>;
+    dragHandle?: (el: HTMLDivElement | null) => void;
+    preview?: boolean;
+};
+export declare type RowRendererProps<T extends IdObj> = {
+    node: NodeApi<T>;
+    innerRef: (el: HTMLDivElement | null) => void;
+    attrs: HTMLAttributes<any>;
+    children: ReactElement;
+};
+export declare type DragPreviewProps = {
+    offset: XYCoord | null;
+    mouse: XYCoord | null;
+    id: string | null;
+    dragIds: string[];
+    isDragging: boolean;
+};
+export declare type DropCursorProps = {
+    top: number;
+    left: number;
+    indent: number;
+};

package/dist/types/state.d.ts

@@ -0,0 +1,2 @@
+import { NodeApi } from "../interfaces/node-api";
+export declare type NodeState = typeof NodeApi.prototype["state"];

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

@@ -0,0 +1,43 @@
+import { BoolFunc, IdObj } from "./utils";
+import * as handlers from "./handlers";
+import * as renderers from "./renderers";
+import { ElementType, MouseEventHandler } from "react";
+import { ListOnScrollProps } from "react-window";
+import { NodeApi } from "../interfaces/node-api";
+import { OpenMap } from "../state/open-slice";
+export interface TreeProps<T extends IdObj> {
+    data?: T[];
+    initialData?: T[];
+    onCreate?: handlers.CreateHandler;
+    onMove?: handlers.MoveHandler;
+    onRename?: handlers.RenameHandler;
+    onDelete?: handlers.DeleteHandler;
+    children?: ElementType<renderers.NodeRendererProps<T>>;
+    renderRow?: ElementType<renderers.RowRendererProps<T>>;
+    renderDragPreview?: ElementType<renderers.DragPreviewProps>;
+    renderCursor?: ElementType<renderers.DropCursorProps>;
+    renderContainer?: ElementType<{}>;
+    rowHeight?: number;
+    width?: number;
+    height?: number;
+    indent?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    padding?: number;
+    openByDefault?: boolean;
+    selectionFollowsFocus?: boolean;
+    disableDrag?: string | boolean | BoolFunc<T>;
+    disableDrop?: string | boolean | BoolFunc<T>;
+    getChildren?: string | ((d: T) => T[]);
+    onActivate?: (node: NodeApi<T>) => void;
+    onSelect?: (nodes: NodeApi<T>[]) => void;
+    onScroll?: (props: ListOnScrollProps) => void;
+    selection?: string;
+    initialOpenState?: OpenMap;
+    searchTerm?: string;
+    searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
+    className?: string | undefined;
+    dndRootElement?: globalThis.Node | null;
+    onClick?: MouseEventHandler;
+    onContextMenu?: MouseEventHandler;
+}

package/dist/types/utils.d.ts

@@ -0,0 +1,21 @@
+/// <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;
+}> = ReturnType<Actions[keyof Actions]>;
+export declare type SelectOptions = {
+    multi?: boolean;
+    contiguous?: boolean;
+};
+export declare type NodesById<T extends IdObj> = {
+    [id: string]: NodeApi<T>;
+};

package/dist/utils/props.d.ts

@@ -0,0 +1,3 @@
+import { TreeProps } from "../types/tree-props";
+import { IdObj } from "../types/utils";
+export declare function validateProps<T extends IdObj>(props: TreeProps<T>): TreeProps<T>;

package/dist/utils.d.ts

@@ -1,11 +1,20 @@
-import { Node } from "./types";
+import { NodeApi } from "./interfaces/node-api";
+import { IdObj } from "./types/utils";
 export declare function bound(n: number, min: number, max: number): number;
-export declare const isFolder: (node: Node<any>) => boolean;
-export declare function isItem(node: Node | null): boolean | null;
-export declare function isClosed(node: Node | null): boolean | null;
+export declare function isItem(node: NodeApi<any> | null): boolean | null;
+export declare function isClosed(node: NodeApi<any> | null): boolean | null;
 /**
  * Is first param a decendent of the second param
  */
-export declare const isDecendent: (a: Node, b: Node) => boolean;
-export declare const indexOf: (node: Node) => number;
+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 focusNextElement(target: HTMLElement): void;
+export declare function focusPrevElement(target: HTMLElement): void;
+export declare function access<T = boolean>(obj: any, accessor: string | boolean | Function): T;
+export declare function identifyNull(obj: string | IdObj | null): string | null;
+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>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "1.1.0",
+  "version": "2.0.0-rc",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -9,16 +9,20 @@
   "repository": "github:brimdata/react-arborist",
   "homepage": "https://react-arborist.netlify.app",
   "dependencies": {
-    "memoize-one": "^6.0.0",
     "react-dnd": "^14.0.3",
     "react-dnd-html5-backend": "^14.0.1",
-    "react-window": "^1.8.6"
+    "react-window": "^1.8.6",
+    "redux": "^4.1.1",
+    "use-sync-external-store": "^1.2.0"
   },
   "scripts": {
     "build": "run-p 'build:**'",
     "build:js": "parcel build --target main --target module",
     "build:types": "tsc --outDir dist",
-    "watch": "yarn build:types --watch"
+    "watch:js": "parcel watch --target main --target module --no-hmr --no-cache",
+    "watch:types": "tsc --outDir dist --watch",
+    "watch": "run-p 'watch:**'",
+    "prepack": "yarn build"
   },
   "peerDependencies": {
     "react": ">= 16.14",
@@ -26,13 +30,12 @@
   },
   "devDependencies": {
     "@types/jest": "^27.4.1",
-    "@types/react": "^17.0.40",
+    "@types/react": "^18.0.0",
     "@types/react-window": "^1.8.5",
+    "@types/use-sync-external-store": "^0.0.3",
     "jest": "^27.5.1",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.3.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "typescript": "^4.6.2"
   }
 }

package/src/components/cursor.tsx

@@ -0,0 +1,15 @@
+import { useDndContext, useTreeApi } from "../context";
+
+export function DropCursor() {
+  const tree = useTreeApi();
+  const state = useDndContext();
+  const cursor = state.cursor;
+  if (!cursor || cursor.type !== "line") return null;
+  const indent = tree.indent;
+  const top =
+    tree.rowHeight * cursor.index +
+    (tree.props.padding ?? tree.props.paddingTop ?? 0);
+  const left = indent * cursor.level;
+  const Cursor = tree.renderCursor;
+  return <Cursor {...{ top, left, indent }} />;
+}

package/src/components/default-container.tsx

@@ -0,0 +1,229 @@
+import { FixedSizeList } from "react-window";
+import { useDataUpdates, useTreeApi } from "../context";
+import { focusNextElement, focusPrevElement } from "../utils";
+import { ListOuterElement } from "./list-outer-element";
+import { ListInnerElement } from "./list-inner-element";
+import { RowContainer } from "./row-container";
+
+let focusSearchTerm = "";
+let timeoutId: any = null;
+
+export function DefaultContainer() {
+  useDataUpdates();
+  const tree = useTreeApi();
+  return (
+    <div
+      style={{
+        height: tree.height,
+        width: tree.width,
+        minHeight: 0,
+        minWidth: 0,
+      }}
+      onContextMenu={tree.props.onContextMenu}
+      onClick={tree.props.onClick}
+      tabIndex={0}
+      onFocus={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          tree.onFocus();
+        }
+      }}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          tree.onBlur();
+        }
+      }}
+      onKeyDown={(e) => {
+        if (tree.isEditing) {
+          return;
+        }
+        if (e.key === "Backspace") {
+          const ids = Array.from(tree.selectedIds);
+          if (ids.length > 1) {
+            let nextFocus = tree.mostRecentNode;
+            while (nextFocus && nextFocus.isSelected) {
+              nextFocus = nextFocus.nextSibling;
+            }
+            if (!nextFocus) nextFocus = tree.lastNode;
+            tree.focus(nextFocus, { scroll: false });
+            tree.delete(Array.from(ids));
+          } else {
+            const node = tree.focusedNode;
+            if (node) {
+              const sib = node.nextSibling;
+              const parent = node.parent;
+              tree.focus(sib || parent, { scroll: false });
+              tree.delete(node);
+            }
+          }
+          return;
+        }
+        if (e.key === "Tab" && !e.shiftKey) {
+          e.preventDefault();
+          focusNextElement(e.currentTarget);
+          return;
+        }
+        if (e.key === "Tab" && e.shiftKey) {
+          e.preventDefault();
+          focusPrevElement(e.currentTarget);
+          return;
+        }
+        if (e.key === "ArrowDown" && !e.shiftKey && !e.metaKey) {
+          e.preventDefault();
+          const next = tree.nextNode;
+          tree.focus(next);
+          return;
+        }
+        if (e.key === "ArrowDown" && e.shiftKey) {
+          e.preventDefault();
+          const next = tree.nextNode;
+          if (!next) return;
+          const current = tree.focusedNode;
+          if (!current) {
+            tree.focus(tree.firstNode);
+          } else if (current.isSelected) {
+            tree.selectContiguous(next);
+          } else {
+            tree.selectMulti(next);
+          }
+          return;
+        }
+        if (e.key === "ArrowUp" && !e.shiftKey) {
+          e.preventDefault();
+          tree.focus(tree.prevNode);
+          return;
+        }
+        if (e.key === "ArrowUp" && e.shiftKey) {
+          e.preventDefault();
+          const prev = tree.prevNode;
+          const current = tree.focusedNode;
+          if (!prev) return;
+          if (!current) {
+            tree.focus(tree.lastNode); // ?
+          } else if (current.isSelected) {
+            tree.selectContiguous(prev);
+          } else {
+            tree.selectMulti(prev);
+          }
+          return;
+        }
+        if (e.key === "ArrowRight") {
+          const node = tree.focusedNode;
+          if (!node) return;
+          if (node.isInternal && node.isOpen) {
+            tree.focus(tree.nextNode);
+          } else if (node.isInternal) tree.open(node.id);
+          return;
+        }
+        if (e.key === "ArrowLeft") {
+          const node = tree.focusedNode;
+          if (!node || node.isRoot) return;
+          if (node.isInternal && node.isOpen) tree.close(node.id);
+          else if (!node.parent?.isRoot) {
+            tree.focus(node.parent);
+          }
+          return;
+        }
+        if (e.key === "a" && e.metaKey) {
+          e.preventDefault();
+          tree.selectAll();
+          return;
+        }
+        if (e.key === "a" && !e.metaKey) {
+          tree.createLeaf();
+          return;
+        }
+        if (e.key === "A" && !e.metaKey) {
+          tree.createInternal();
+          return;
+        }
+
+        if (e.key === "Home") {
+          // add shift keys
+          e.preventDefault();
+          tree.focus(tree.firstNode);
+          return;
+        }
+        if (e.key === "End") {
+          // add shift keys
+          e.preventDefault();
+          tree.focus(tree.lastNode);
+          return;
+        }
+        if (e.key === "Enter") {
+          setTimeout(() => {
+            if (tree.focusedNode) tree.edit(tree.focusedNode);
+          });
+          return;
+        }
+        if (e.key === " ") {
+          e.preventDefault();
+          const node = tree.focusedNode;
+          if (!node) return;
+          if (node.isLeaf) {
+            node.select();
+            node.activate();
+          } else {
+            node.toggle();
+          }
+          return;
+        }
+        if (e.key === "*") {
+          const node = tree.focusedNode;
+          if (!node) return;
+          tree.openSiblings(node);
+          return;
+        }
+        if (e.key === "ArrowDown" && e.metaKey) {
+          e.preventDefault();
+          tree.select(tree.focusedNode);
+          tree.activate(tree.focusedNode);
+          return;
+        }
+        if (e.key === "PageUp") {
+          e.preventDefault();
+          tree.pageUp();
+          return;
+        }
+        if (e.key === "PageDown") {
+          e.preventDefault();
+          tree.pageDown();
+        }
+
+        // If they type a sequence of characters
+        // collect them. Reset them after a timeout.
+        // Use it to search the tree for a node, then focus it.
+        // Clean this up a bit later
+        clearTimeout(timeoutId);
+        focusSearchTerm += e.key;
+        timeoutId = setTimeout(() => {
+          focusSearchTerm = "";
+        }, 600);
+        const node = tree.visibleNodes.find((n) => {
+          // @ts-ignore
+          const name = n.data.name;
+          if (typeof name === "string") {
+            return name.toLowerCase().startsWith(focusSearchTerm);
+          } else return false;
+        });
+        if (node) tree.focus(node.id);
+      }}
+    >
+      <FixedSizeList
+        className={tree.props.className}
+        outerRef={tree.listEl}
+        itemCount={tree.visibleNodes.length}
+        height={tree.height}
+        width={tree.width}
+        itemSize={tree.rowHeight}
+        itemKey={(index) => tree.visibleNodes[index]?.id || index}
+        outerElementType={ListOuterElement}
+        innerElementType={ListInnerElement}
+        onScroll={tree.props.onScroll}
+        onItemsRendered={tree.onItemsRendered.bind(tree)}
+        ref={tree.list}
+      >
+        {RowContainer}
+      </FixedSizeList>
+    </div>
+  );
+}

package/src/components/{drop-cursor.tsx → default-cursor.tsx}

@@ -1,26 +1,10 @@
 import React, { CSSProperties } from "react";
-import { useCursorLocation, useStaticContext } from "../context";
-
-export function DropCursor() {
-  const treeView = useStaticContext();
-  const cursor = useCursorLocation();
-  if (!cursor || cursor.type !== "line") return null;
-  const top = treeView.rowHeight * cursor.index;
-  const left = treeView.indent * cursor.level;
-  const style: CSSProperties = {
-    position: "absolute",
-    pointerEvents: "none",
-    top: top - 2 + "px",
-    left: treeView.indent + left + "px",
-    right: treeView.indent + "px",
-  };
-
-  return <DefaultCursor style={style} />;
-}
+import { DropCursorProps } from "../types/renderers";
 
 const placeholderStyle = {
   display: "flex",
   alignItems: "center",
+  zIndex: 1,
 };
 
 const lineStyle = {
@@ -37,11 +21,22 @@ const circleStyle = {
   borderRadius: "50%",
 };
 
-function DefaultCursor({ style }: { style: CSSProperties }) {
+export const DefaultCursor = React.memo(function DefaultCursor({
+  top,
+  left,
+  indent,
+}: DropCursorProps) {
+  const style: CSSProperties = {
+    position: "absolute",
+    pointerEvents: "none",
+    top: top - 2 + "px",
+    left: left + "px",
+    right: indent + "px",
+  };
   return (
     <div style={{ ...placeholderStyle, ...style }}>
       <div style={{ ...circleStyle }}></div>
       <div style={{ ...lineStyle }}></div>
     </div>
   );
-}
+});