react-arborist 1.0.3 → 1.2.0

package/src/provider.tsx

@@ -1,61 +1,41 @@
-import { useImperativeHandle, useMemo, useReducer, useRef } from "react";
-import { FixedSizeList } from "react-window";
 import {
-  CursorLocationContext,
-  CursorParentId,
-  EditingIdContext,
-  IsCursorOverFolder,
-  SelectionContext,
-  Static,
-} from "./context";
-import { Cursor } from "./dnd/compute-drop";
-import { initState, reducer } from "./reducer";
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from "react";
+import { FixedSizeList } from "react-window";
+import { TreeApiContext } from "./context";
+import { actions, initState, reducer } from "./reducer";
 import { useSelectionKeys } from "./selection/selection-hook";
-import { useTreeApi } from "./tree-api-hook";
-import { StateContext, StaticContext, TreeProviderProps } from "./types";
+import { TreeApi } from "./tree-api";
+import { IdObj, TreeProviderProps } from "./types";
 
-export function TreeViewProvider<T>(props: TreeProviderProps<T>) {
+export function TreeViewProvider<T extends IdObj>(props: TreeProviderProps<T>) {
   const [state, dispatch] = useReducer(reducer, initState());
-  const list = useRef<FixedSizeList>();
-  const api = useTreeApi<T>(state, dispatch, props, list.current);
+  const list = useRef<FixedSizeList | null>(null);
+  const listEl = useRef<HTMLDivElement | null>(null);
 
-  useImperativeHandle(props.imperativeHandle, () => api);
-  useSelectionKeys(props.listEl, api);
-  const staticValue = useMemo<StaticContext<T>>(
-    () => ({ ...props, api, list }),
-    [props, api, list]
+  const api = useMemo(
+    () => new TreeApi<T>(dispatch, state, props, list, listEl),
+    [dispatch, state, props, list, listEl]
   );
 
   /**
-   * This context pattern is ridiculous, next time use redux.
+   * This ensures that the selection remains correct even
+   * after opening and closing a folders
    */
-  return (
-    // @ts-ignore
-    <Static.Provider value={staticValue}>
-      <EditingIdContext.Provider value={state.editingId}>
-        <SelectionContext.Provider value={state.selection}>
-          <CursorParentId.Provider value={getParentId(state.cursor)}>
-            <IsCursorOverFolder.Provider value={isOverFolder(state)}>
-              <CursorLocationContext.Provider value={state.cursor}>
-                {props.children}
-              </CursorLocationContext.Provider>
-            </IsCursorOverFolder.Provider>
-          </CursorParentId.Provider>
-        </SelectionContext.Provider>
-      </EditingIdContext.Provider>
-    </Static.Provider>
-  );
-}
+  useLayoutEffect(() => {
+    dispatch(actions.setVisibleIds(api.visibleIds, api.idToIndex));
+  }, [dispatch, api.visibleIds, api.idToIndex, props.root]);
 
-function getParentId(cursor: Cursor) {
-  switch (cursor.type) {
-    case "highlight":
-      return cursor.id;
-    default:
-      return null;
-  }
-}
+  useImperativeHandle(props.imperativeHandle, () => api);
+  useSelectionKeys(listEl, api);
 
-function isOverFolder(state: StateContext) {
-  return state.cursor.type === "highlight";
+  return (
+    <TreeApiContext.Provider value={api}>
+      {props.children}
+    </TreeApiContext.Provider>
+  );
 }

package/src/selection/selection-hook.ts

@@ -1,7 +1,8 @@
 import { MutableRefObject, useEffect } from "react";
 import { TreeApi } from "../tree-api";
+import { IdObj } from "../types";
 
-export function useSelectionKeys<T>(
+export function useSelectionKeys<T extends IdObj>(
   ref: MutableRefObject<HTMLDivElement | null>,
   api: TreeApi<T>
 ) {

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, "start");
+      this.list.current?.scrollToItem(index);
     } else {
       this.openParents(id);
       ReactDOM.flushSync(() => {
         const index = this.idToIndex[id];
         if (index) {
-          this.list?.scrollToItem(index, "start");
+          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[],
@@ -102,50 +103,46 @@ export type StateContext = {
   selection: SelectionState;
   visibleIds: string[];
 };
-export interface TreeProps<T> {
+
+type BoolFunc<T> = (data: T) => boolean;
+
+export interface TreeProps<T extends IdObj> {
   children: NodeRenderer<T>;
+  className?: string | undefined;
   data: T;
+  disableDrag?: string | boolean | BoolFunc<T>;
+  disableDrop?: string | boolean | BoolFunc<T>;
+  dndRootElement?: globalThis.Node | null;
+  getChildren?: string | ((d: T) => T[]);
+  handle?: Ref<TreeApi<T>>; // Deprecated
   height?: number;
-  width?: number;
-  rowHeight?: number;
-  indent?: number;
   hideRoot?: boolean;
-  onToggle?: ToggleHandler;
-  onMove?: MoveHandler;
-  onEdit?: EditHandler;
-  getChildren?: string | ((d: T) => T[]);
-  isOpen?: string | ((d: T) => boolean);
-  disableDrag?: string | boolean | ((d: T) => boolean);
-  disableDrop?: string | boolean | ((d: T) => boolean);
-  openByDefault?: boolean;
-  className?: string | undefined;
-  handle?: Ref<TreeApi<T>>;
+  indent?: number;
+  isOpen?: string | BoolFunc<T>;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;
+  onEdit?: EditHandler;
+  onMove?: MoveHandler;
+  onToggle?: ToggleHandler;
+  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;
-}