react-arborist 1.1.0 → 1.2.0

package/src/components/drop-cursor.tsx

@@ -1,47 +1,12 @@
-import React, { CSSProperties } from "react";
-import { useCursorLocation, useStaticContext } from "../context";
+import { useTreeApi } from "../context";
 
 export function DropCursor() {
-  const treeView = useStaticContext();
-  const cursor = useCursorLocation();
+  const tree = useTreeApi();
+  const cursor = tree.state.cursor;
   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",
-  };
+  const indent = tree.indent;
+  const top = tree.rowHeight * cursor.index;
+  const left = indent * cursor.level;
 
-  return <DefaultCursor style={style} />;
-}
-
-const placeholderStyle = {
-  display: "flex",
-  alignItems: "center",
-};
-
-const lineStyle = {
-  flex: 1,
-  height: "2px",
-  background: "#4B91E2",
-  borderRadius: "1px",
-};
-
-const circleStyle = {
-  width: "4px",
-  height: "4px",
-  boxShadow: "0 0 0 3px #4B91E2",
-  borderRadius: "50%",
-};
-
-function DefaultCursor({ style }: { style: CSSProperties }) {
-  return (
-    <div style={{ ...placeholderStyle, ...style }}>
-      <div style={{ ...circleStyle }}></div>
-      <div style={{ ...lineStyle }}></div>
-    </div>
-  );
+  return tree.renderDropCursor({ top, left, indent });
 }

package/src/components/list-outer-element.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+import { useTreeApi } from "../context";
+import { DropCursor } from "./drop-cursor";
+
+export const ListOuterElement = forwardRef(function Outer(
+  props: React.HTMLProps<HTMLDivElement>,
+  ref
+) {
+  const { children, ...rest } = props;
+  const tree = useTreeApi();
+  return (
+    <div
+      // @ts-ignore
+      ref={ref}
+      {...rest}
+      onClick={tree.onClick}
+      onContextMenu={tree.onContextMenu}
+    >
+      <div
+        style={{
+          height: tree.visibleNodes.length * tree.rowHeight,
+          width: "100%",
+          overflow: "hidden",
+          position: "absolute",
+          left: "0",
+          right: "0",
+        }}
+      >
+        <DropCursor />
+      </div>
+      {children}
+    </div>
+  );
+});

package/src/components/list.tsx

@@ -0,0 +1,25 @@
+import { FixedSizeList } from "react-window";
+import { useTreeApi } from "../context";
+import { ListOuterElement } from "./list-outer-element";
+import { Row } from "./row";
+
+export function List(props: { className?: string }) {
+  const tree = useTreeApi();
+  return (
+    <div style={{ height: tree.height, width: tree.width, overflow: "hidden" }}>
+      <FixedSizeList
+        className={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}
+        ref={tree.list}
+      >
+        {Row}
+      </FixedSizeList>
+    </div>
+  );
+}

package/src/components/outer-drop.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+import { useOuterDrop } from "../dnd/outer-drop-hook";
+
+export function OuterDrop(props: { children: ReactElement }) {
+  useOuterDrop();
+  return props.children;
+}

package/src/components/preview.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, memo } from "react";
 import { useDragLayer, XYCoord } from "react-dnd";
-import { useStaticContext } from "../context";
-import { DragItem } from "../types";
+import { useTreeApi } from "../context";
+import { DragItem, IdObj } from "../types";
 
 const layerStyles: CSSProperties = {
   position: "fixed",
@@ -70,12 +70,12 @@ function Count(props: { item: DragItem; mouse: XYCoord | null }) {
   else return null;
 }
 
-const PreviewNode = memo(function PreviewNode(props: {
+const PreviewNode = memo(function PreviewNode<T extends IdObj>(props: {
   item: DragItem | null;
 }) {
-  const tree = useStaticContext();
+  const tree = useTreeApi<T>();
   if (!props.item) return null;
-  const node = tree.api.getNode(props.item.id);
+  const node = tree.getNode(props.item.id);
   if (!node) return null;
   return (
     <tree.renderer
@@ -86,7 +86,7 @@ const PreviewNode = memo(function PreviewNode(props: {
         row: {},
         indent: { paddingLeft: node.level * tree.indent },
       }}
-      tree={tree.api}
+      tree={tree}
       state={{
         isDragging: false,
         isEditing: false,

package/src/components/row.tsx

@@ -1,36 +1,34 @@
 import React, { useCallback, useMemo, useRef } from "react";
-import {
-  useCursorParentId,
-  useEditingId,
-  useIsCursorOverFolder,
-  useIsSelected,
-  useStaticContext,
-} from "../context";
+import { useTreeApi } from "../context";
 import { useDragHook } from "../dnd/drag-hook";
 import { useDropHook } from "../dnd/drop-hook";
+import { IdObj } from "../types";
 
 type Props = {
   style: React.CSSProperties;
   index: number;
 };
 
-export const Row = React.memo(function Row({ index, style }: Props) {
-  const tree = useStaticContext();
-  const selected = useIsSelected();
-  const node = tree.api.visibleNodes[index];
-  const next = tree.api.visibleNodes[index + 1] || null;
-  const prev = tree.api.visibleNodes[index - 1] || null;
-  const cursorParentId = useCursorParentId();
-  const cursorOverFolder = useIsCursorOverFolder();
+export const Row = React.memo(function Row<T extends IdObj>({
+  index,
+  style,
+}: Props) {
+  const realTree = useTreeApi<T>();
+  const tree = useMemo(() => realTree, []);
+  tree.sync(realTree);
+
+  const node = tree.visibleNodes[index];
+  const next = tree.visibleNodes[index + 1] || null;
+  const prev = tree.visibleNodes[index - 1] || null;
   const el = useRef<HTMLDivElement | null>(null);
   const [{ isDragging }, dragRef] = useDragHook(node);
   const [, dropRef] = useDropHook(el, node, prev, next);
-  const isEditing = node.id === useEditingId();
-  const isSelected = selected(index);
-  const nextSelected = next && selected(index + 1);
-  const prevSelected = prev && selected(index - 1);
-  const isHoveringOverChild = node.id === cursorParentId;
-  const isOverFolder = node.id === cursorParentId && cursorOverFolder;
+  const isEditing = node.id === tree.editingId;
+  const isSelected = tree.isSelected(index);
+  const nextSelected = next && tree.isSelected(index + 1);
+  const prevSelected = prev && tree.isSelected(index - 1);
+  const isHoveringOverChild = node.id === tree.cursorParentId;
+  const isOverFolder = node.id === tree.cursorParentId && tree.cursorOverFolder;
   const isOpen = node.isOpen;
   const indent = tree.indent * node.level;
   const state = useMemo(() => {
@@ -79,22 +77,22 @@ export const Row = React.memo(function Row({ index, style }: Props) {
       ) => {
         if (node.rowIndex === null) return;
         if (args.selectOnClick || e.metaKey || e.shiftKey) {
-          tree.api.select(node.rowIndex, e.metaKey, e.shiftKey);
+          tree.select(node.rowIndex, e.metaKey, e.shiftKey);
         } else {
-          tree.api.select(null, false, false);
+          tree.select(null, false, false);
         }
       },
       toggle: (e: React.MouseEvent) => {
         e.stopPropagation();
         tree.onToggle(node.id, !node.isOpen);
       },
-      edit: () => tree.api.edit(node.id),
+      edit: () => tree.edit(node.id),
       submit: (name: string) => {
-        name.trim() ? tree.api.submit(node.id, name) : tree.api.reset(node.id);
+        name.trim() ? tree.submit(node.id, name) : tree.reset(node.id);
       },
-      reset: () => tree.api.reset(node.id),
+      reset: () => tree.reset(node.id),
     };
-  }, [tree, node]);
+  }, [node, tree]);
 
   const Renderer = useMemo(() => {
     return React.memo(tree.renderer);
@@ -108,7 +106,7 @@ export const Row = React.memo(function Row({ index, style }: Props) {
       state={state}
       handlers={handlers}
       preview={false}
-      tree={tree.api}
+      tree={tree}
     />
   );
 });

package/src/components/tree.tsx

@@ -1,81 +1,14 @@
-import {
-  forwardRef,
-  MouseEventHandler,
-  ReactElement,
-  useMemo,
-  useRef,
-} from "react";
+import { forwardRef, ReactElement, useMemo, useRef } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { FixedSizeList } from "react-window";
-import { useStaticContext } from "../context";
 import { enrichTree } from "../data/enrich-tree";
-import { useOuterDrop } from "../dnd/outer-drop-hook";
 import { TreeViewProvider } from "../provider";
 import { TreeApi } from "../tree-api";
 import { IdObj, Node, TreeProps } from "../types";
 import { noop } from "../utils";
-import { DropCursor } from "./drop-cursor";
 import { Preview } from "./preview";
-import { Row } from "./row";
-
-const OuterElement = forwardRef(function Outer(
-  props: React.HTMLProps<HTMLDivElement>,
-  ref
-) {
-  const { children, ...rest } = props;
-  const tree = useStaticContext();
-  return (
-    <div
-      // @ts-ignore
-      ref={ref}
-      {...rest}
-      onClick={tree.onClick}
-      onContextMenu={tree.onContextMenu}
-    >
-      <div
-        style={{
-          height: tree.api.visibleNodes.length * tree.rowHeight,
-          width: "100%",
-          overflow: "hidden",
-          position: "absolute",
-          left: "0",
-          right: "0",
-        }}
-      >
-        <DropCursor />
-      </div>
-      {children}
-    </div>
-  );
-});
-
-function List(props: { className?: string }) {
-  const tree = useStaticContext();
-  return (
-    <div style={{ height: tree.height, width: tree.width, overflow: "hidden" }}>
-      <FixedSizeList
-        className={props.className}
-        outerRef={tree.listEl}
-        itemCount={tree.api.visibleNodes.length}
-        height={tree.height}
-        width={tree.width}
-        itemSize={tree.rowHeight}
-        itemKey={(index) => tree.api.visibleNodes[index]?.id || index}
-        outerElementType={OuterElement}
-        // @ts-ignore
-        ref={tree.list}
-      >
-        {Row}
-      </FixedSizeList>
-    </div>
-  );
-}
-
-function OuterDrop(props: { children: ReactElement }) {
-  useOuterDrop();
-  return props.children;
-}
+import { OuterDrop } from "./outer-drop";
+import { List } from "./list";
 
 export const Tree = forwardRef(function Tree<T extends IdObj>(
   props: TreeProps<T>,
@@ -104,21 +37,7 @@ export const Tree = forwardRef(function Tree<T extends IdObj>(
   );
 
   return (
-    <TreeViewProvider
-      imperativeHandle={ref}
-      root={root}
-      listEl={useRef<HTMLDivElement | null>(null)}
-      renderer={props.children}
-      width={props.width === undefined ? 300 : props.width}
-      height={props.height === undefined ? 500 : props.height}
-      indent={props.indent === undefined ? 24 : props.indent}
-      rowHeight={props.rowHeight === undefined ? 24 : props.rowHeight}
-      onMove={props.onMove || noop}
-      onToggle={props.onToggle || noop}
-      onEdit={props.onEdit || noop}
-      onClick={props.onClick}
-      onContextMenu={props.onContextMenu}
-    >
+    <TreeViewProvider treeProps={props} imperativeHandle={ref} root={root}>
       <DndProvider
         backend={HTML5Backend}
         options={{ rootElement: props.dndRootElement || undefined }}

package/src/context.tsx

@@ -1,52 +1,13 @@
-import { createContext, useContext, useMemo } from "react";
-import { Cursor } from "./dnd/compute-drop";
-import { Selection } from "./selection/selection";
-import { IdObj, SelectionState, StaticContext } from "./types";
+import React, { createContext, useContext, useMemo } from "react";
+import { TreeApi } from "./tree-api";
+import { IdObj } from "./types";
 
-export const CursorParentId = createContext<string | null>(null);
-export function useCursorParentId() {
-  return useContext(CursorParentId);
-}
-
-export const IsCursorOverFolder = createContext<boolean>(false);
-export function useIsCursorOverFolder() {
-  return useContext(IsCursorOverFolder);
-}
+export const TreeApiContext = createContext<TreeApi<any> | null>(null);
 
-export const CursorLocationContext = createContext<Cursor | null>(null);
-export function useCursorLocation() {
-  return useContext(CursorLocationContext);
-}
-
-export const Static = createContext<StaticContext<IdObj> | null>(null);
-export function useStaticContext() {
-  const value = useContext(Static);
-  if (!value) throw new Error("Context must be in a provider");
+export function useTreeApi<T extends IdObj>() {
+  const value = useContext<TreeApi<T> | null>(
+    TreeApiContext as unknown as React.Context<TreeApi<T> | null>
+  );
+  if (value === null) throw new Error("No Tree Api Provided");
   return value;
 }
-
-export const DispatchContext = createContext(null);
-export function useDispatch() {
-  const dispatch = useContext(DispatchContext);
-  if (!dispatch) throw new Error("No dispatch provided");
-  return dispatch;
-}
-
-export const SelectionContext = createContext<SelectionState | null>(null);
-export function useSelectedIds(): string[] {
-  const value = useContext(SelectionContext);
-  if (!value) throw new Error("Must provide selection context");
-  return value.ids;
-}
-
-export function useIsSelected(): (index: number | null) => boolean {
-  const value = useContext(SelectionContext);
-  if (!value) throw new Error("Must provide selection context");
-  const s = useMemo(() => Selection.parse(value.data, []), [value.data]);
-  return (i) => s.contains(i);
-}
-
-export const EditingIdContext = createContext<string | null>(null);
-export function useEditingId(): string | null {
-  return useContext(EditingIdContext);
-}

package/src/dnd/drag-hook.ts

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { ConnectDragSource, useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
-import { useIsSelected, useSelectedIds, useStaticContext } from "../context";
+import { useTreeApi } from "../context";
 import { DragItem, Node } from "../types";
 import { DropResult } from "./drop-hook";
 
@@ -10,9 +10,8 @@ type CollectedProps = { isDragging: boolean };
 export function useDragHook(
   node: Node
 ): [{ isDragging: boolean }, ConnectDragSource] {
-  const tree = useStaticContext();
-  const isSelected = useIsSelected();
-  const ids = useSelectedIds();
+  const tree = useTreeApi();
+  const ids = tree.getSelectedIds();
   const [{ isDragging }, ref, preview] = useDrag<
     DragItem,
     DropResult,
@@ -23,13 +22,13 @@ export function useDragHook(
       type: "NODE",
       item: () => ({
         id: node.id,
-        dragIds: isSelected(node.rowIndex) ? ids : [node.id],
+        dragIds: tree.isSelected(node.rowIndex) ? ids : [node.id],
       }),
       collect: (m) => ({
         isDragging: m.isDragging(),
       }),
       end: (item, monitor) => {
-        tree.api.hideCursor();
+        tree.hideCursor();
         const drop = monitor.getDropResult();
         if (drop && drop.parentId) {
           tree.onMove(item.dragIds, drop.parentId, drop.index);

package/src/dnd/drop-hook.ts

@@ -1,6 +1,6 @@
 import { RefObject } from "react";
 import { ConnectDropTarget, useDrop } from "react-dnd";
-import { useStaticContext } from "../context";
+import { useTreeApi } from "../context";
 import { DragItem, Node } from "../types";
 import { isDecendent, isFolder } from "../utils";
 import { computeDrop } from "./compute-drop";
@@ -18,13 +18,13 @@ export function useDropHook(
   prev: Node | null,
   next: Node | null
 ): [CollectedProps, ConnectDropTarget] {
-  const tree = useStaticContext();
+  const tree = useTreeApi();
   return useDrop<DragItem, DropResult | null, CollectedProps>(
     () => ({
       accept: "NODE",
       canDrop: (item) => {
         for (let id of item.dragIds) {
-          const drag = tree.api.getNode(id);
+          const drag = tree.getNode(id);
           if (!drag) return false;
           if (isFolder(drag) && isDecendent(node, drag)) return false;
         }
@@ -42,9 +42,9 @@ export function useDropHook(
             prevNode: prev,
             nextNode: next,
           });
-          if (cursor) tree.api.showCursor(cursor);
+          if (cursor) tree.showCursor(cursor);
         } else {
-          tree.api.hideCursor();
+          tree.hideCursor();
         }
       },
       drop: (item, m): DropResult | undefined | null => {

package/src/dnd/outer-drop-hook.ts

@@ -1,11 +1,11 @@
 import { useDrop } from "react-dnd";
-import { useStaticContext } from "../context";
+import { useTreeApi } from "../context";
 import { DragItem } from "../types";
 import { computeDrop } from "./compute-drop";
 import { DropResult } from "./drop-hook";
 
 export function useOuterDrop() {
-  const tree = useStaticContext();
+  const tree = useTreeApi();
 
   // In case we drop an item at the bottom of the list
   const [, drop] = useDrop<DragItem, DropResult | null, { isOver: boolean }>(
@@ -20,10 +20,10 @@ export function useOuterDrop() {
           offset: offset,
           indent: tree.indent,
           node: null,
-          prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
+          prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
           nextNode: null,
         });
-        if (cursor) tree.api.showCursor(cursor);
+        if (cursor) tree.showCursor(cursor);
       },
       canDrop: (item, m) => {
         return m.isOver({ shallow: true });
@@ -37,7 +37,7 @@ export function useOuterDrop() {
           offset: offset,
           indent: tree.indent,
           node: null,
-          prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
+          prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
           nextNode: null,
         });
         return drop;

package/src/index.ts

@@ -1,5 +1,19 @@
 import { Tree } from "./components/tree";
 import { TreeApi } from "./tree-api";
-import type { NodeRenderer, NodeState, NodeHandlers } from "./types";
+import type {
+  NodeRenderer,
+  NodeState,
+  NodeHandlers,
+  NodeRendererProps,
+  DropCursorProps,
+} from "./types";
 
-export { Tree, TreeApi, NodeRenderer, NodeState, NodeHandlers };
+export {
+  Tree,
+  TreeApi,
+  NodeRenderer,
+  NodeState,
+  NodeHandlers,
+  NodeRendererProps,
+  DropCursorProps,
+};

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>
 ) {