react-arborist 1.1.0 → 2.0.0-rc

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

@@ -0,0 +1,92 @@
+import React, { CSSProperties, memo } from "react";
+import { XYCoord } from "react-dnd";
+import { useTreeApi } from "../context";
+import { DragPreviewProps } from "../types/renderers";
+import { IdObj } from "../types/utils";
+
+const layerStyles: CSSProperties = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: 100,
+  left: 0,
+  top: 0,
+  width: "100%",
+  height: "100%",
+};
+
+const getStyle = (offset: XYCoord | null) => {
+  if (!offset) return { display: "none" };
+  const { x, y } = offset;
+  return { transform: `translate(${x}px, ${y}px)` };
+};
+
+const getCountStyle = (offset: XYCoord | null) => {
+  if (!offset) return { display: "none" };
+  const { x, y } = offset;
+  return { transform: `translate(${x + 10}px, ${y + 10}px)` };
+};
+
+export function DefaultDragPreview({
+  offset,
+  mouse,
+  id,
+  dragIds,
+  isDragging,
+}: DragPreviewProps) {
+  return (
+    <Overlay isDragging={isDragging}>
+      <Position offset={offset}>
+        <PreviewNode id={id} dragIds={dragIds} />
+      </Position>
+      <Count mouse={mouse} count={dragIds.length} />
+    </Overlay>
+  );
+}
+
+const Overlay = memo(function Overlay(props: {
+  children: JSX.Element[];
+  isDragging: boolean;
+}) {
+  if (!props.isDragging) return null;
+  return <div style={layerStyles}>{props.children}</div>;
+});
+
+function Position(props: { children: JSX.Element; offset: XYCoord | null }) {
+  return (
+    <div className="row preview" style={getStyle(props.offset)}>
+      {props.children}
+    </div>
+  );
+}
+
+function Count(props: { count: number; mouse: XYCoord | null }) {
+  const { count, mouse } = props;
+  if (count > 1)
+    return (
+      <div className="selected-count" style={getCountStyle(mouse)}>
+        {count}
+      </div>
+    );
+  else return null;
+}
+
+const PreviewNode = memo(function PreviewNode<T extends IdObj>(props: {
+  id: string | null;
+  dragIds: string[];
+}) {
+  const tree = useTreeApi<T>();
+  const node = tree.get(props.id);
+  if (!node) return null;
+  return (
+    <tree.renderNode
+      preview
+      node={node}
+      style={{
+        paddingLeft: node.level * tree.indent,
+        opacity: 0.2,
+        background: "transparent",
+      }}
+      tree={tree}
+    />
+  );
+});

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

@@ -0,0 +1,45 @@
+import { forwardRef } from "react";
+import { useTreeApi } from "../context";
+import { treeBlur } from "../state/focus-slice";
+import { DropCursor } from "./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={(e) => {
+        if (e.currentTarget === e.target) tree.selectNone();
+      }}
+    >
+      <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/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/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,133 +1,24 @@
-import {
-  forwardRef,
-  MouseEventHandler,
-  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 { forwardRef } from "react";
+import { TreeProvider } from "./provider";
+import { TreeApi } from "../interfaces/tree-api";
+import { OuterDrop } from "./outer-drop";
+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
-      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}
-    >
-      <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;
+}