react-arborist 1.1.0 → 1.2.0

package/src/tree-api.ts

@@ -1,35 +1,41 @@
 import memoizeOne from "memoize-one";
-import { Dispatch } from "react";
+import { Dispatch, MutableRefObject } from "react";
 import { FixedSizeList } from "react-window";
 import { flattenTree } from "./data/flatten-tree";
 import { Cursor } from "./dnd/compute-drop";
 import { Action, actions } from "./reducer";
-import { Node, StateContext, TreeProviderProps, EditResult } from "./types";
+import {
+  Node,
+  StateContext,
+  TreeProviderProps,
+  EditResult,
+  IdObj,
+  DropCursorProps,
+} from "./types";
 import ReactDOM from "react-dom";
-
-export class TreeApi<T = unknown> {
+import { noop } from "./utils";
+import { Selection } from "./selection/selection";
+import { defaultDropCursor } from "./components/default-drop-cursor";
+export class TreeApi<T extends IdObj> {
   private edits = new Map<string, (args: EditResult) => void>();
 
   constructor(
     public dispatch: Dispatch<Action>,
     public state: StateContext,
     public props: TreeProviderProps<T>,
-    public list: FixedSizeList | undefined
+    public list: MutableRefObject<FixedSizeList | null>,
+    public listEl: MutableRefObject<HTMLDivElement | null>
   ) {}
 
-  assign(
-    dispatch: Dispatch<Action>,
-    state: StateContext,
-    props: TreeProviderProps<T>,
-    list: FixedSizeList | undefined
-  ) {
-    this.dispatch = dispatch;
-    this.state = state;
-    this.props = props;
-    this.list = list;
+  sync(other: TreeApi<T>) {
+    this.dispatch = other.dispatch;
+    this.state = other.state;
+    this.props = other.props;
+    this.list = other.list;
+    this.listEl = other.listEl;
   }
 
-  getNode(id: string): Node<unknown> | null {
+  getNode(id: string): Node<T> | null {
     if (id in this.idToIndex)
       return this.visibleNodes[this.idToIndex[id]] || null;
     else return null;
@@ -49,7 +55,7 @@ export class TreeApi<T = unknown> {
 
   submit(id: string | number, value: string) {
     const sid = id.toString();
-    this.props.onEdit(sid, value);
+    this.onEdit(sid, value);
     this.dispatch(actions.edit(null));
     this.resolveEdit(sid, { cancelled: false, value });
   }
@@ -95,20 +101,20 @@ export class TreeApi<T = unknown> {
     if (!this.list) return;
     const index = this.idToIndex[id];
     if (index) {
-      this.list.scrollToItem(index);
+      this.list.current?.scrollToItem(index);
     } else {
       this.openParents(id);
       ReactDOM.flushSync(() => {
         const index = this.idToIndex[id];
         if (index) {
-          this.list?.scrollToItem(index);
+          this.list.current?.scrollToItem(index);
         }
       });
     }
   }
 
   open(id: string) {
-    this.props.onToggle(id, true);
+    this.onToggle(id, true);
   }
 
   openParents(id: string) {
@@ -130,7 +136,75 @@ export class TreeApi<T = unknown> {
   }
 
   get visibleNodes() {
-    return createList(this.props.root);
+    return createList(this.props.root) as Node<T>[];
+  }
+
+  get width() {
+    return this.props.treeProps.width || 300;
+  }
+
+  get height() {
+    return this.props.treeProps.height || 500;
+  }
+
+  get indent() {
+    return this.props.treeProps.indent || 24;
+  }
+
+  get renderer() {
+    return this.props.treeProps.children;
+  }
+
+  get onToggle() {
+    return this.props.treeProps.onToggle || noop;
+  }
+
+  get rowHeight() {
+    return this.props.treeProps.rowHeight || 24;
+  }
+
+  get onClick() {
+    return this.props.treeProps.onClick || noop;
+  }
+
+  get onContextMenu() {
+    return this.props.treeProps.onContextMenu || noop;
+  }
+
+  get onMove() {
+    return this.props.treeProps.onMove || noop;
+  }
+
+  get onEdit() {
+    return this.props.treeProps.onEdit || noop;
+  }
+
+  get cursorParentId() {
+    const { cursor } = this.state;
+    switch (cursor.type) {
+      case "highlight":
+        return cursor.id;
+      default:
+        return null;
+    }
+  }
+
+  get cursorOverFolder() {
+    return this.state.cursor.type === "highlight";
+  }
+
+  get editingId() {
+    return this.state.editingId;
+  }
+
+  isSelected(index: number | null) {
+    const selection = Selection.parse(this.state.selection.data, []);
+    return selection.contains(index);
+  }
+
+  renderDropCursor(props: DropCursorProps) {
+    const render = this.props.treeProps.dropCursor || defaultDropCursor;
+    return render(props);
   }
 }
 

package/src/types.ts

@@ -5,6 +5,7 @@ import React, {
   MouseEventHandler,
   MutableRefObject,
   ReactElement,
+  ReactNode,
   Ref,
 } from "react";
 import { FixedSizeList } from "react-window";
@@ -38,7 +39,7 @@ export interface IdObj {
   id: string;
 }
 
-export type NodeRendererProps<T> = {
+export type NodeRendererProps<T extends IdObj> = {
   innerRef: (el: HTMLDivElement | null) => void;
   styles: { row: CSSProperties; indent: CSSProperties };
   data: T;
@@ -66,7 +67,7 @@ export type NodeHandlers = {
   reset: () => void;
 };
 
-export type NodeRenderer<T> = ComponentType<NodeRendererProps<T>>;
+export type NodeRenderer<T extends IdObj> = ComponentType<NodeRendererProps<T>>;
 
 export type MoveHandler = (
   dragIds: string[],
@@ -105,7 +106,7 @@ export type StateContext = {
 
 type BoolFunc<T> = (data: T) => boolean;
 
-export interface TreeProps<T> {
+export interface TreeProps<T extends IdObj> {
   children: NodeRenderer<T>;
   className?: string | undefined;
   data: T;
@@ -126,30 +127,22 @@ export interface TreeProps<T> {
   openByDefault?: boolean;
   rowHeight?: number;
   width?: number;
+  dropCursor?: (props: DropCursorProps) => ReactElement;
 }
 
-export type TreeProviderProps<T> = {
+export type TreeProviderProps<T extends IdObj> = {
+  treeProps: TreeProps<T>;
   imperativeHandle: React.Ref<TreeApi<T>> | undefined;
   children: ReactElement;
-  height: number;
-  indent: number;
-  listEl: MutableRefObject<HTMLDivElement | null>;
-  onToggle: ToggleHandler;
-  onMove: MoveHandler;
-  onEdit: EditHandler;
-  onClick?: MouseEventHandler;
-  onContextMenu?: MouseEventHandler;
-  renderer: NodeRenderer<any>;
-  rowHeight: number;
   root: Node<T>;
-  width: number;
-};
-
-export type StaticContext<T> = TreeProviderProps<T> & {
-  api: TreeApi<T>;
-  list: MutableRefObject<FixedSizeList | undefined>;
 };
 
 export type EditResult =
   | { cancelled: true }
   | { cancelled: false; value: string };
+
+export type DropCursorProps = {
+  top: number;
+  left: number;
+  indent: number;
+};

package/dist/tree-api-hook.d.ts

@@ -1,6 +0,0 @@
-import { Dispatch } from "react";
-import { FixedSizeList } from "react-window";
-import { Action } from "./reducer";
-import { TreeApi } from "./tree-api";
-import { StateContext, TreeProviderProps } from "./types";
-export declare function useTreeApi<T>(state: StateContext, dispatch: Dispatch<Action>, props: TreeProviderProps<T>, list: FixedSizeList | undefined): TreeApi<T>;

package/src/tree-api-hook.ts

@@ -1,34 +0,0 @@
-import { Dispatch, useLayoutEffect, useMemo } from "react";
-import { FixedSizeList } from "react-window";
-import { Action, actions } from "./reducer";
-import { TreeApi } from "./tree-api";
-import { StateContext, TreeProviderProps } from "./types";
-
-export function useTreeApi<T>(
-  state: StateContext,
-  dispatch: Dispatch<Action>,
-  props: TreeProviderProps<T>,
-  list: FixedSizeList | undefined
-) {
-  /**
-   * We only ever want one instance of the api object
-   * It will get updated as the props change, but the
-   * reference will not.
-   */
-  const api = useMemo(
-    () => new TreeApi<T>(dispatch, state, props, list),
-    // eslint-disable-next-line
-    []
-  );
-  api.assign(dispatch, state, props, list);
-
-  /**
-   * This ensures that the selection remains correct even
-   * after opening and closing a folders
-   */
-  useLayoutEffect(() => {
-    dispatch(actions.setVisibleIds(api.visibleIds, api.idToIndex));
-  }, [dispatch, api, props.root]);
-
-  return api;
-}