react-arborist 1.2.0 → 2.0.0-rc

package/src/components/{preview.tsx → default-drag-preview.tsx}

@@ -1,7 +1,8 @@
 import React, { CSSProperties, memo } from "react";
-import { useDragLayer, XYCoord } from "react-dnd";
+import { XYCoord } from "react-dnd";
 import { useTreeApi } from "../context";
-import { DragItem, IdObj } from "../types";
+import { DragPreviewProps } from "../types/renderers";
+import { IdObj } from "../types/utils";
 
 const layerStyles: CSSProperties = {
   position: "fixed",
@@ -25,20 +26,19 @@ const getCountStyle = (offset: XYCoord | null) => {
   return { transform: `translate(${x + 10}px, ${y + 10}px)` };
 };
 
-export function Preview() {
-  const { offset, mouse, item, isDragging } = useDragLayer((m) => ({
-    offset: m.getSourceClientOffset(),
-    mouse: m.getClientOffset(),
-    item: m.getItem(),
-    isDragging: m.isDragging(),
-  }));
-
+export function DefaultDragPreview({
+  offset,
+  mouse,
+  id,
+  dragIds,
+  isDragging,
+}: DragPreviewProps) {
   return (
     <Overlay isDragging={isDragging}>
       <Position offset={offset}>
-        <PreviewNode item={item} />
+        <PreviewNode id={id} dragIds={dragIds} />
       </Position>
-      <Count mouse={mouse} item={item} />
+      <Count mouse={mouse} count={dragIds.length} />
     </Overlay>
   );
 }
@@ -59,50 +59,34 @@ function Position(props: { children: JSX.Element; offset: XYCoord | null }) {
   );
 }
 
-function Count(props: { item: DragItem; mouse: XYCoord | null }) {
-  const { item, mouse } = props;
-  if (item?.dragIds?.length > 1)
+function Count(props: { count: number; mouse: XYCoord | null }) {
+  const { count, mouse } = props;
+  if (count > 1)
     return (
       <div className="selected-count" style={getCountStyle(mouse)}>
-        {item.dragIds.length}
+        {count}
       </div>
     );
   else return null;
 }
 
 const PreviewNode = memo(function PreviewNode<T extends IdObj>(props: {
-  item: DragItem | null;
+  id: string | null;
+  dragIds: string[];
 }) {
   const tree = useTreeApi<T>();
-  if (!props.item) return null;
-  const node = tree.getNode(props.item.id);
+  const node = tree.get(props.id);
   if (!node) return null;
   return (
-    <tree.renderer
+    <tree.renderNode
       preview
-      innerRef={() => {}}
-      data={node.model}
-      styles={{
-        row: {},
-        indent: { paddingLeft: node.level * tree.indent },
+      node={node}
+      style={{
+        paddingLeft: node.level * tree.indent,
+        opacity: 0.2,
+        background: "transparent",
       }}
       tree={tree}
-      state={{
-        isDragging: false,
-        isEditing: false,
-        isSelected: false,
-        isSelectedStart: false,
-        isSelectedEnd: false,
-        isHoveringOverChild: false,
-        isOpen: node.isOpen,
-      }}
-      handlers={{
-        edit: () => Promise.resolve({ cancelled: true }),
-        select: () => {},
-        toggle: () => {},
-        submit: () => {},
-        reset: () => {},
-      }}
     />
   );
 });

package/src/components/default-node.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { NodeRendererProps } from "../types/renderers";
+import { IdObj } from "../types/utils";
+
+export function DefaultNode<T extends IdObj>({
+  style,
+  node,
+  dragHandle,
+}: NodeRendererProps<T>) {
+  return (
+    <div style={style} ref={dragHandle}>
+      ID: {node.data.id}
+    </div>
+  );
+}

package/src/components/default-row.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { RowRendererProps } from "../types/renderers";
+import { IdObj } from "../types/utils";
+
+export function DefaultRow<T extends IdObj>({
+  node,
+  attrs,
+  innerRef,
+  children,
+}: RowRendererProps<T>) {
+  return (
+    <div
+      {...attrs}
+      ref={innerRef}
+      onFocus={(e) => e.stopPropagation()}
+      onClick={node.handleClick}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/drag-preview-container.tsx

@@ -0,0 +1,26 @@
+import { useDragLayer } from "react-dnd";
+import { useDndContext, useTreeApi } from "../context";
+import { DefaultDragPreview } from "./default-drag-preview";
+
+export function DragPreviewContainer() {
+  const tree = useTreeApi();
+  const { offset, mouse, item, isDragging } = useDragLayer((m) => {
+    return {
+      offset: m.getSourceClientOffset(),
+      mouse: m.getClientOffset(),
+      item: m.getItem(),
+      isDragging: m.isDragging(),
+    };
+  });
+
+  const DragPreview = tree.props.renderDragPreview || DefaultDragPreview;
+  return (
+    <DragPreview
+      offset={offset}
+      mouse={mouse}
+      id={item?.id || null}
+      dragIds={item?.dragIds || []}
+      isDragging={isDragging}
+    />
+  );
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { forwardRef } from "react";
+import { useTreeApi } from "../context";
+
+export const ListInnerElement = forwardRef<any, any>(function InnerElement(
+  { style, ...rest },
+  ref
+) {
+  const tree = useTreeApi();
+  const paddingTop = tree.props.padding ?? tree.props.paddingTop ?? 0;
+  const paddingBottom = tree.props.padding ?? tree.props.paddingBottom ?? 0;
+  return (
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`,
+      }}
+      {...rest}
+    />
+  );
+});

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

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 import { useTreeApi } from "../context";
-import { DropCursor } from "./drop-cursor";
+import { treeBlur } from "../state/focus-slice";
+import { DropCursor } from "./cursor";
 
 export const ListOuterElement = forwardRef(function Outer(
   props: React.HTMLProps<HTMLDivElement>,
@@ -13,22 +14,32 @@ export const ListOuterElement = forwardRef(function Outer(
       // @ts-ignore
       ref={ref}
       {...rest}
-      onClick={tree.onClick}
-      onContextMenu={tree.onContextMenu}
+      onClick={(e) => {
+        if (e.currentTarget === e.target) tree.selectNone();
+      }}
     >
-      <div
-        style={{
-          height: tree.visibleNodes.length * tree.rowHeight,
-          width: "100%",
-          overflow: "hidden",
-          position: "absolute",
-          left: "0",
-          right: "0",
-        }}
-      >
-        <DropCursor />
-      </div>
+      <DropContainer />
       {children}
     </div>
   );
 });
+
+const DropContainer = () => {
+  const tree = useTreeApi();
+  return (
+    <div
+      style={{
+        height: tree.visibleNodes.length * tree.rowHeight,
+        width: "100%",
+        position: "absolute",
+        left: "0",
+        right: "0",
+      }}
+      onClick={(e) => {
+        console.log(e.currentTarget, e.target);
+      }}
+    >
+      <DropCursor />
+    </div>
+  );
+};

package/src/components/provider.tsx

@@ -0,0 +1,97 @@
+import {
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { FixedSizeList } from "react-window";
+import {
+  DataUpdatesContext,
+  DndContext,
+  NodesContext,
+  TreeApiContext,
+} from "../context";
+import { TreeApi } from "../interfaces/tree-api";
+import { IdObj } from "../types/utils";
+import { initialState } from "../state/initial";
+import { rootReducer, RootState } from "../state/root-reducer";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { DndProvider } from "react-dnd";
+import { TreeProps } from "../types/tree-props";
+import { createStore, Store } from "redux";
+import { actions as visibility } from "../state/open-slice";
+
+type Props<T extends IdObj> = {
+  treeProps: TreeProps<T>;
+  imperativeHandle: React.Ref<TreeApi<T> | undefined>;
+  children: ReactNode;
+};
+
+const SERVER_STATE = initialState();
+
+export function TreeProvider<T extends IdObj>({
+  treeProps,
+  imperativeHandle,
+  children,
+}: Props<T>) {
+  const list = useRef<FixedSizeList | null>(null);
+  const listEl = useRef<HTMLDivElement | null>(null);
+  const store = useRef<Store>(
+    createStore(rootReducer, initialState(treeProps))
+  );
+  const state = useSyncExternalStore<RootState>(
+    store.current.subscribe,
+    store.current.getState,
+    () => SERVER_STATE
+  );
+
+  /* The tree api object is stable. */
+  const api = useMemo(() => {
+    return new TreeApi<T>(store.current, treeProps, list, listEl);
+  }, []);
+
+  /* Make sure the tree instance stays in sync */
+  const updateCount = useRef(0);
+  useMemo(() => {
+    updateCount.current += 1;
+    api.update(treeProps);
+  }, [...Object.values(treeProps), state.nodes.open]);
+
+  /* Expose the tree api */
+  useImperativeHandle(imperativeHandle, () => api);
+
+  /* Change selection based on props */
+  useEffect(() => {
+    if (api.props.selection) {
+      api.select(api.props.selection);
+    } else {
+      api.selectNone();
+    }
+  }, [api.props.selection]);
+
+  /* Clear visability for filtered nodes */
+  useEffect(() => {
+    if (!api.props.searchTerm) {
+      store.current.dispatch(visibility.clear(true));
+    }
+  }, [api.props.searchTerm]);
+
+  return (
+    <TreeApiContext.Provider value={api}>
+      <DataUpdatesContext.Provider value={updateCount.current}>
+        <NodesContext.Provider value={state.nodes}>
+          <DndContext.Provider value={state.dnd}>
+            <DndProvider
+              backend={HTML5Backend}
+              options={{ rootElement: api.props.dndRootElement || undefined }}
+            >
+              {children}
+            </DndProvider>
+          </DndContext.Provider>
+        </NodesContext.Provider>
+      </DataUpdatesContext.Provider>
+    </TreeApiContext.Provider>
+  );
+}

package/src/components/row-container.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useDataUpdates, useNodesContext, useTreeApi } from "../context";
+import { useDragHook } from "../dnd/drag-hook";
+import { useDropHook } from "../dnd/drop-hook";
+import { IdObj } from "../types/utils";
+import { useFreshNode } from "../hooks/use-fresh-node";
+
+type Props = {
+  style: React.CSSProperties;
+  index: number;
+};
+
+export const RowContainer = React.memo(function RowContainer<T extends IdObj>({
+  index,
+  style,
+}: Props) {
+  /* When will the <Row> will re-render.
+   *
+   * The row component is memo'd so it will only render
+   * when a new instance of the NodeApi class is passed
+   * to it.
+   *
+   * The TreeApi instance is stable. It does not
+   * change when the internal state changes.
+   *
+   * The TreeApi has all the references to the nodes.
+   * We need to clone the nodes when their state
+   * changes. The node class contains no state itself,
+   * It always checks the tree for state. The tree's
+   * state will always be up to date.
+   */
+
+  useDataUpdates(); // Re-render when tree props or visability changes
+  const _ = useNodesContext(); // So that we re-render appropriately
+  const tree = useTreeApi<T>(); // Tree already has the fresh state
+  const node = useFreshNode<T>(index);
+
+  const el = useRef<HTMLDivElement | null>(null);
+  const dragRef = useDragHook<T>(node);
+  const dropRef = useDropHook(el, node);
+  const innerRef = useCallback(
+    (n: any) => {
+      el.current = n;
+      dropRef(n);
+    },
+    [dropRef]
+  );
+
+  const indent = tree.indent * node.level;
+  const nodeStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const rowStyle = useMemo(
+    () => ({
+      ...style,
+      top:
+        parseFloat(style.top as string) +
+        (tree.props.padding ?? tree.props.paddingTop ?? 0),
+    }),
+    [style, tree.props.padding, tree.props.paddingTop]
+  );
+  const rowAttrs: React.HTMLAttributes<any> = {
+    role: "treeitem",
+    "aria-level": node.level,
+    "aria-selected": node.isSelected,
+    style: rowStyle,
+    tabIndex: -1,
+  };
+
+  useEffect(() => {
+    if (!node.isEditing && node.isFocused) {
+      el.current?.focus();
+    }
+  }, [node.isEditing, node.isFocused, el.current]);
+
+  const Node = tree.renderNode;
+  const Row = tree.renderRow;
+
+  return (
+    <Row node={node} innerRef={innerRef} attrs={rowAttrs}>
+      <Node node={node} tree={tree} style={nodeStyle} dragHandle={dragRef} />
+    </Row>
+  );
+});

package/src/components/tree-container.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { useTreeApi } from "../context";
+import { DefaultContainer } from "./default-container";
+
+export function TreeContainer() {
+  const tree = useTreeApi();
+  const Container = tree.props.renderContainer || DefaultContainer;
+  return (
+    <>
+      <Container />
+    </>
+  );
+}

package/src/components/tree.tsx

@@ -1,52 +1,24 @@
-import { forwardRef, ReactElement, useMemo, useRef } from "react";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { enrichTree } from "../data/enrich-tree";
-import { TreeViewProvider } from "../provider";
-import { TreeApi } from "../tree-api";
-import { IdObj, Node, TreeProps } from "../types";
-import { noop } from "../utils";
-import { Preview } from "./preview";
+import { forwardRef } from "react";
+import { TreeProvider } from "./provider";
+import { TreeApi } from "../interfaces/tree-api";
 import { OuterDrop } from "./outer-drop";
-import { List } from "./list";
+import { TreeContainer } from "./tree-container";
+import { DragPreviewContainer } from "./drag-preview-container";
+import { TreeProps } from "../types/tree-props";
+import { IdObj } from "../types/utils";
+import { useValidatedProps } from "../hooks/use-validated-props";
 
 export const Tree = forwardRef(function Tree<T extends IdObj>(
   props: TreeProps<T>,
-  ref: React.Ref<TreeApi<T>>
+  ref: React.Ref<TreeApi<T> | undefined>
 ) {
-  const root = useMemo<Node<T>>(
-    () =>
-      enrichTree<T>(
-        props.data,
-        props.hideRoot,
-        props.getChildren,
-        props.isOpen,
-        props.disableDrag,
-        props.disableDrop,
-        props.openByDefault
-      ),
-    [
-      props.data,
-      props.hideRoot,
-      props.getChildren,
-      props.isOpen,
-      props.disableDrag,
-      props.disableDrop,
-      props.openByDefault,
-    ]
-  );
-
+  const treeProps = useValidatedProps(props);
   return (
-    <TreeViewProvider treeProps={props} imperativeHandle={ref} root={root}>
-      <DndProvider
-        backend={HTML5Backend}
-        options={{ rootElement: props.dndRootElement || undefined }}
-      >
-        <OuterDrop>
-          <List className={props.className} />
-        </OuterDrop>
-        <Preview />
-      </DndProvider>
-    </TreeViewProvider>
+    <TreeProvider treeProps={treeProps} imperativeHandle={ref}>
+      <OuterDrop>
+        <TreeContainer />
+      </OuterDrop>
+      <DragPreviewContainer />
+    </TreeProvider>
   );
 });

package/src/context.ts

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { TreeApi } from "./interfaces/tree-api";
+import { RootState } from "./state/root-reducer";
+import { IdObj } from "./types/utils";
+
+export const TreeApiContext = createContext<TreeApi<any> | null>(null);
+
+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 NodesContext = createContext<RootState["nodes"] | null>(null);
+
+export function useNodesContext() {
+  const value = useContext(NodesContext);
+  if (value === null) throw new Error("Provide a NodesContext");
+  return value;
+}
+
+export const DndContext = createContext<RootState["dnd"] | null>(null);
+
+export function useDndContext() {
+  const value = useContext(DndContext);
+  if (value === null) throw new Error("Provide a DnDContext");
+  return value;
+}
+
+export const DataUpdatesContext = createContext<number>(0);
+
+export function useDataUpdates() {
+  useContext(DataUpdatesContext);
+}

package/src/data/create-index.ts

@@ -0,0 +1,9 @@
+import { NodeApi } from "../interfaces/node-api";
+import { IdObj } from "../types/utils";
+
+export const createIndex = <T extends IdObj>(nodes: NodeApi<T>[]) => {
+  return nodes.reduce<{ [id: string]: number }>((map, node, index) => {
+    map[node.id] = index;
+    return map;
+  }, {});
+};

package/src/data/create-list.ts

@@ -0,0 +1,56 @@
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+import { IdObj } from "../types/utils";
+
+export function createList<T extends IdObj>(tree: TreeApi<T>) {
+  if (tree.isFiltered) {
+    return flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
+  } else {
+    return flattenTree(tree.root);
+  }
+}
+
+function flattenTree<T extends IdObj>(root: NodeApi<T>): NodeApi<T>[] {
+  const list: NodeApi<T>[] = [];
+  function collect(node: NodeApi<T>) {
+    if (node.level >= 0) {
+      list.push(node);
+    }
+    if (node.isOpen) {
+      node.children?.forEach(collect);
+    }
+  }
+  collect(root);
+  list.forEach(assignRowIndex);
+  return list;
+}
+
+function flattenAndFilterTree<T extends IdObj>(
+  root: NodeApi<T>,
+  isMatch: (n: NodeApi<T>) => boolean
+): NodeApi<T>[] {
+  function collect(node: NodeApi<T>) {
+    let result: NodeApi<T>[] = [];
+    const yes = !node.isRoot && isMatch(node);
+
+    if (node.children) {
+      for (let child of node.children) {
+        result = result.concat(collect(child));
+      }
+    }
+    if (result.length) {
+      if (!node.isRoot) result.unshift(node);
+      return result;
+    }
+    if (yes) return [node];
+    else return [];
+  }
+
+  const list = collect(root).filter((n) => n.parent?.isOpen);
+  list.forEach(assignRowIndex);
+  return list;
+}
+
+function assignRowIndex(node: NodeApi<any>, index: number) {
+  node.rowIndex = index;
+}

package/src/data/create-root.ts

@@ -0,0 +1,53 @@
+import { IdObj } from "../types/utils";
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+
+export const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
+
+export function createRoot<T extends IdObj>(tree: TreeApi<T>): NodeApi<T> {
+  function visitSelfAndChildren(
+    data: T,
+    level: number,
+    parent: NodeApi<T> | null
+  ) {
+    const node = new NodeApi<T>({
+      tree,
+      data,
+      level,
+      parent,
+      id: data.id,
+      children: null,
+      isDraggable: tree.isDraggable(data),
+      isDroppable: tree.isDroppable(data),
+      rowIndex: null,
+    });
+    const children = tree.getChildren(data);
+    if (children) {
+      node.children = children.map((child: T) =>
+        visitSelfAndChildren(child, level + 1, node)
+      );
+    }
+    return node;
+  }
+
+  const root = new NodeApi<T>({
+    tree,
+    id: ROOT_ID,
+    // @ts-ignore
+    data: { id: ROOT_ID },
+    level: -1,
+    parent: null,
+    children: null,
+    isDraggable: true,
+    isDroppable: true,
+    rowIndex: null,
+  });
+
+  const data: T[] = tree.props.data ?? [];
+
+  root.children = data.map((child) => {
+    return visitSelfAndChildren(child, 0, root);
+  });
+
+  return root;
+}