react-arborist 2.0.0-rc → 2.0.0-rc.1

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

@@ -28,7 +28,8 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "2.0.0-rc",
+  "version": "2.0.0-rc.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -29,6 +29,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/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-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

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

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/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/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;
   }
@@ -89,14 +74,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);
   }
@@ -118,6 +95,29 @@ export class NodeApi<T extends IdObj = IdObj> {
     };
   }
 
+  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";
@@ -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() {
@@ -348,7 +353,7 @@ export class TreeApi<T extends IdObj> {
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
-  selectNone() {
+  deselectAll() {
     this.dispatch(selection.clear());
     this.dispatch(selection.anchor(null));
     this.dispatch(selection.mostRecent(null));

package/src/types/tree-props.ts

@@ -38,7 +38,8 @@ 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);
 
   /* Event Handlers */
   onActivate?: (node: NodeApi<T>) => void;

package/tsconfig.json

@@ -5,7 +5,7 @@
 
     /* Language and Environment */
     "target": "ES5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
 
     /* Modules */
     "module": "CommonJS",                                /* Specify what module code is generated. */

package/dist/data/flatten-tree.d.ts

@@ -1,4 +0,0 @@
-import { NodeApi } from "../interfaces/node-api";
-import { IdObj } from "../types/utils";
-export declare function flattenTree<T extends IdObj>(root: NodeApi<T>): NodeApi<T>[];
-export declare function filterTree<T extends IdObj>(root: NodeApi<T>, isMatch: (n: NodeApi<T>) => boolean): NodeApi<T>[];

package/dist/hooks/use-uncontrolled-tree.d.ts

@@ -1,24 +0,0 @@
-declare type Data = {
-    id: string;
-    name: string;
-    children?: Data[];
-};
-export declare function useUncontrolledTree(initialData: Data[]): readonly [Data[], {
-    move: (args: {
-        dragIds: string[];
-        parentId: string;
-        index: number;
-    }) => void;
-    rename: (args: {
-        id: string;
-        name: string;
-    }) => void;
-    create: ({ parentId, index }: {
-        parentId: string;
-        index: number;
-    }) => Data;
-    drop: (args: {
-        id: string;
-    }) => void;
-}];
-export {};

package/dist/utils/props.d.ts

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

package/src/utils/props.ts

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