react-arborist 1.2.0 → 2.0.0-rc.1

package/dist/types.d.ts

@@ -1,122 +0,0 @@
-import React, { ComponentType, CSSProperties, MouseEvent, MouseEventHandler, ReactElement, Ref } from "react";
-import { Cursor } from "./dnd/compute-drop";
-import { SelectionData } from "./selection/selection";
-import { TreeApi } from "./tree-api";
-declare module "react" {
-    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-export declare type Node<T = unknown> = {
-    id: string;
-    model: T;
-    level: number;
-    children: Node<T>[] | null;
-    parent: Node<T> | null;
-    isOpen: boolean;
-    isDraggable: boolean;
-    isDroppable: boolean;
-    rowIndex: number | null;
-};
-export declare type NodesById<T> = {
-    [id: string]: Node<T>;
-};
-export interface IdObj {
-    id: string;
-}
-export declare type NodeRendererProps<T extends IdObj> = {
-    innerRef: (el: HTMLDivElement | null) => void;
-    styles: {
-        row: CSSProperties;
-        indent: CSSProperties;
-    };
-    data: T;
-    state: NodeState;
-    handlers: NodeHandlers;
-    tree: TreeApi<T>;
-    preview: boolean;
-};
-export declare type NodeState = {
-    isOpen: boolean;
-    isSelected: boolean;
-    isHoveringOverChild: boolean;
-    isDragging: boolean;
-    isSelectedStart: boolean;
-    isSelectedEnd: boolean;
-    isEditing: boolean;
-};
-export declare type NodeHandlers = {
-    toggle: MouseEventHandler;
-    select: (e: MouseEvent, args: {
-        selectOnClick: boolean;
-    }) => void;
-    edit: () => Promise<EditResult>;
-    submit: (name: string) => void;
-    reset: () => void;
-};
-export declare type NodeRenderer<T extends IdObj> = ComponentType<NodeRendererProps<T>>;
-export declare type MoveHandler = (dragIds: string[], parentId: string | null, index: number) => void;
-export declare type ToggleHandler = (id: string, isOpen: boolean) => void;
-export declare type EditHandler = (id: string, name: string) => void;
-export declare type NodeClickHandler<T> = (e: MouseEvent, n: Node<T>) => void;
-export declare type IndexClickHandler = (e: MouseEvent, index: number) => void;
-export declare type SelectedCheck = (index: number) => boolean;
-export declare type CursorLocation = {
-    index: number | null;
-    level: number | null;
-    parentId: string | null;
-};
-export declare type DragItem = {
-    dragIds: string[];
-    id: string;
-};
-export declare type SelectionState = {
-    data: SelectionData | null;
-    ids: string[];
-};
-export declare type StateContext = {
-    cursor: Cursor;
-    editingId: string | null;
-    selection: SelectionState;
-    visibleIds: string[];
-};
-declare 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>>;
-    height?: number;
-    hideRoot?: boolean;
-    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 declare type TreeProviderProps<T extends IdObj> = {
-    treeProps: TreeProps<T>;
-    imperativeHandle: React.Ref<TreeApi<T>> | undefined;
-    children: ReactElement;
-    root: Node<T>;
-};
-export declare type EditResult = {
-    cancelled: true;
-} | {
-    cancelled: false;
-    value: string;
-};
-export declare type DropCursorProps = {
-    top: number;
-    left: number;
-    indent: number;
-};
-export {};

package/src/components/drop-cursor.tsx

@@ -1,12 +0,0 @@
-import { useTreeApi } from "../context";
-
-export function DropCursor() {
-  const tree = useTreeApi();
-  const cursor = tree.state.cursor;
-  if (!cursor || cursor.type !== "line") return null;
-  const indent = tree.indent;
-  const top = tree.rowHeight * cursor.index;
-  const left = indent * cursor.level;
-
-  return tree.renderDropCursor({ top, left, indent });
-}

package/src/components/list.tsx

@@ -1,25 +0,0 @@
-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/row.tsx

@@ -1,112 +0,0 @@
-import React, { useCallback, useMemo, useRef } from "react";
-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<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 === 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(() => {
-    return {
-      isEditing,
-      isDragging,
-      isSelectedStart: isSelected && !prevSelected,
-      isSelectedEnd: isSelected && !nextSelected,
-      isSelected,
-      isHoveringOverChild,
-      isOpen,
-      isOverFolder,
-    };
-  }, [
-    isEditing,
-    isSelected,
-    prevSelected,
-    nextSelected,
-    isHoveringOverChild,
-    isOpen,
-    isDragging,
-    isOverFolder,
-  ]);
-
-  const ref = useCallback(
-    (n: HTMLDivElement | null) => {
-      el.current = n;
-      dragRef(dropRef(n));
-    },
-    [dragRef, dropRef]
-  );
-
-  const styles = useMemo(
-    () => ({
-      row: { ...style },
-      indent: { paddingLeft: indent },
-    }),
-    [indent, style]
-  );
-
-  const handlers = useMemo(() => {
-    return {
-      select: (
-        e: React.MouseEvent,
-        args: { selectOnClick: boolean } = { selectOnClick: true }
-      ) => {
-        if (node.rowIndex === null) return;
-        if (args.selectOnClick || e.metaKey || e.shiftKey) {
-          tree.select(node.rowIndex, e.metaKey, e.shiftKey);
-        } else {
-          tree.select(null, false, false);
-        }
-      },
-      toggle: (e: React.MouseEvent) => {
-        e.stopPropagation();
-        tree.onToggle(node.id, !node.isOpen);
-      },
-      edit: () => tree.edit(node.id),
-      submit: (name: string) => {
-        name.trim() ? tree.submit(node.id, name) : tree.reset(node.id);
-      },
-      reset: () => tree.reset(node.id),
-    };
-  }, [node, tree]);
-
-  const Renderer = useMemo(() => {
-    return React.memo(tree.renderer);
-  }, [tree.renderer]);
-
-  return (
-    <Renderer
-      innerRef={ref}
-      data={node.model}
-      styles={styles}
-      state={state}
-      handlers={handlers}
-      preview={false}
-      tree={tree}
-    />
-  );
-});

package/src/context.tsx

@@ -1,13 +0,0 @@
-import React, { createContext, useContext, useMemo } from "react";
-import { TreeApi } from "./tree-api";
-import { IdObj } from "./types";
-
-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;
-}

package/src/data/enrich-tree.ts

@@ -1,74 +0,0 @@
-import { TreeProps, IdObj, Node } from "../types";
-
-function createNode<T extends IdObj>(
-  model: T,
-  level: number,
-  parent: Node<T> | null,
-  children: Node<T>[] | null,
-  isOpen: boolean,
-  isDraggable: boolean,
-  isDroppable: boolean
-): Node<T> {
-  return {
-    id: model.id,
-    level,
-    parent,
-    children,
-    isOpen,
-    isDraggable,
-    isDroppable,
-    model,
-    rowIndex: null,
-  };
-}
-
-function access(obj: any, accessor: string | boolean | Function) {
-  if (typeof accessor === "boolean") {
-    return accessor;
-  }
-
-  if (typeof accessor === "string") {
-    return obj[accessor];
-  }
-
-  return accessor(obj);
-}
-
-export function enrichTree<T extends IdObj>(
-  model: T,
-  hideRoot: boolean = false,
-  getChildren: TreeProps<T>["getChildren"] = "children",
-  isOpen: TreeProps<T>["isOpen"] = "isOpen",
-  disableDrag: TreeProps<T>["disableDrag"] = false,
-  disableDrop: TreeProps<T>["disableDrop"] = false,
-  openByDefault: boolean = true
-): Node<T> {
-  function visitSelfAndChildren(
-    model: T,
-    level: number,
-    parent: Node<T> | null
-  ) {
-    const open = access(model, isOpen) as boolean;
-    const draggable = !access(model, disableDrag) as boolean;
-    const droppable = !access(model, disableDrop) as boolean;
-    const node = createNode<T>(
-      model,
-      level,
-      parent,
-      null,
-      open === undefined ? openByDefault : open,
-      draggable,
-      droppable
-    );
-    const children = access(model, getChildren) as T[];
-
-    if (children) {
-      node.children = children.map((child: T) =>
-        visitSelfAndChildren(child, level + 1, node)
-      );
-    }
-    return node;
-  }
-
-  return visitSelfAndChildren(model, hideRoot ? -1 : 0, null);
-}

package/src/data/flatten-tree.ts

@@ -1,17 +0,0 @@
-import { Node } from "../types";
-
-export function flattenTree<T>(root: Node<T>): Node<T>[] {
-  const list: Node<T>[] = [];
-  let index = 0;
-  function collect(node: Node<T>) {
-    if (node.level >= 0) {
-      node.rowIndex = index++;
-      list.push(node);
-    }
-    if (node.isOpen) {
-      node.children?.forEach(collect);
-    }
-  }
-  collect(root);
-  return list;
-}

package/src/provider.tsx

@@ -1,41 +0,0 @@
-import {
-  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 { TreeApi } from "./tree-api";
-import { IdObj, TreeProviderProps } from "./types";
-
-export function TreeViewProvider<T extends IdObj>(props: TreeProviderProps<T>) {
-  const [state, dispatch] = useReducer(reducer, initState());
-  const list = useRef<FixedSizeList | null>(null);
-  const listEl = useRef<HTMLDivElement | null>(null);
-
-  const api = useMemo(
-    () => new TreeApi<T>(dispatch, state, props, list, listEl),
-    [dispatch, state, props, list, listEl]
-  );
-
-  /**
-   * This ensures that the selection remains correct even
-   * after opening and closing a folders
-   */
-  useLayoutEffect(() => {
-    dispatch(actions.setVisibleIds(api.visibleIds, api.idToIndex));
-  }, [dispatch, api.visibleIds, api.idToIndex, props.root]);
-
-  useImperativeHandle(props.imperativeHandle, () => api);
-  useSelectionKeys(listEl, api);
-
-  return (
-    <TreeApiContext.Provider value={api}>
-      {props.children}
-    </TreeApiContext.Provider>
-  );
-}

package/src/reducer.ts

@@ -1,161 +0,0 @@
-import { Cursor } from "./dnd/compute-drop";
-import { Selection } from "./selection/selection";
-import { StateContext } from "./types";
-
-export const initState = (): StateContext => ({
-  visibleIds: [],
-  cursor: { type: "none" } as Cursor,
-  editingId: null,
-  selection: {
-    data: null,
-    ids: [],
-  },
-});
-
-export const actions = {
-  setCursorLocation: (cursor: Cursor) => ({
-    type: "SET_CURSOR_LOCATION" as "SET_CURSOR_LOCATION",
-    cursor,
-  }),
-
-  setVisibleIds: (
-    ids: string[], // index to id
-    idMap: { [id: string]: number } // id to index
-  ) => ({
-    type: "SET_VISIBLE_IDS" as "SET_VISIBLE_IDS",
-    ids,
-    idMap,
-  }),
-
-  select: (index: number | null, meta: boolean, shift: boolean) => ({
-    type: "SELECT" as "SELECT",
-    index,
-    meta,
-    shift,
-  }),
-
-  selectId: (id: string) => ({
-    type: "SELECT_ID" as "SELECT_ID",
-    id,
-  }),
-
-  edit: (id: string | null) => ({
-    type: "EDIT" as "EDIT",
-    id,
-  }),
-
-  stepUp: (shift: boolean, ids: string[]) => ({
-    type: "STEP_UP" as "STEP_UP",
-    shift,
-  }),
-
-  stepDown: (shift: boolean, ids: string[]) => ({
-    type: "STEP_DOWN" as "STEP_DOWN",
-    shift,
-  }),
-};
-
-type ActionObj = {
-  [Prop in keyof typeof actions]: ReturnType<typeof actions[Prop]>;
-};
-export type Action = ActionObj[keyof ActionObj];
-
-export function reducer(state: StateContext, action: Action): StateContext {
-  switch (action.type) {
-    case "EDIT":
-      return {
-        ...state,
-        editingId: action.id,
-      };
-    case "SET_CURSOR_LOCATION":
-      if (equal(state.cursor, action.cursor)) {
-        return state;
-      } else {
-        return { ...state, cursor: action.cursor };
-      }
-    case "SELECT":
-      var s = Selection.parse(state.selection.data, state.visibleIds);
-      if (action.index === null) {
-        s.clear();
-      } else if (action.meta) {
-        if (s.contains(action.index)) {
-          s.deselect(action.index);
-        } else {
-          s.multiSelect(action.index);
-        }
-      } else if (action.shift) {
-        s.extend(action.index);
-      } else {
-        s.select(action.index);
-      }
-      return {
-        ...state,
-        selection: {
-          data: s.serialize(),
-          ids: s.getSelectedItems(),
-        },
-      };
-    case "SELECT_ID":
-      return {
-        ...state,
-        selection: {
-          ...state.selection,
-          ids: [action.id],
-        },
-      };
-    case "STEP_UP":
-      var s3 = Selection.parse(state.selection.data, state.visibleIds);
-      var f = s3.getFocus();
-      if (action.shift) {
-        s3.extend(f - 1);
-      } else {
-        s3.select(f - 1);
-      }
-      return {
-        ...state,
-        selection: {
-          data: s3.serialize(),
-          ids: s3.getSelectedItems(),
-        },
-      };
-    case "STEP_DOWN":
-      var s6 = Selection.parse(state.selection.data, state.visibleIds);
-      var f2 = s6.getFocus();
-      if (action.shift) {
-        s6.extend(f2 + 1);
-      } else {
-        s6.select(f2 + 1);
-      }
-      return {
-        ...state,
-        selection: {
-          data: s6.serialize(),
-          ids: s6.getSelectedItems(),
-        },
-      };
-    case "SET_VISIBLE_IDS":
-      // The visible ids changed
-      var ids = state.selection.ids;
-      // Start with a blank selection
-      var s2 = new Selection([], null, "none", state.visibleIds);
-      // Add each of the old selected ids to this new selection
-      for (let id of ids) {
-        if (id in action.idMap) s2.multiSelect(action.idMap[id]);
-      }
-      return {
-        ...state,
-        visibleIds: action.ids,
-        selection: {
-          ids,
-          data: s2.serialize(),
-        },
-      };
-    default:
-      return state;
-  }
-}
-
-function equal(a: Cursor | null, b: Cursor | null) {
-  if (a === null || b === null) return false;
-  return JSON.stringify(a) === JSON.stringify(b);
-}

package/src/selection/range.ts

@@ -1,41 +0,0 @@
-export class Range {
-  constructor(public start: number, public end: number) {
-    if (this.start > this.end)
-      throw new Error("Invalid range: start larger than end");
-  }
-
-  serialize(): [number, number] {
-    return [this.start, this.end];
-  }
-
-  contains(n: number) {
-    return n >= this.start && n <= this.end;
-  }
-
-  overlaps(r: Range) {
-    return this.contains(r.start - 1) || this.contains(r.end + 1);
-  }
-
-  combine(r: Range) {
-    this.start = Math.min(r.start, this.start);
-    this.end = Math.max(r.end, this.end);
-  }
-
-  get size() {
-    return this.end - this.start + 1;
-  }
-
-  clone() {
-    return new Range(this.start, this.end);
-  }
-
-  map(fn: (index: any) => string): any {
-    let returns = [];
-    for (let i = this.start; i <= this.end; i++) returns.push(fn(i));
-    return returns;
-  }
-
-  isEqual(other: Range) {
-    return this.start === other.start && this.end === other.end;
-  }
-}

package/src/selection/selection-hook.ts

@@ -1,25 +0,0 @@
-import { MutableRefObject, useEffect } from "react";
-import { TreeApi } from "../tree-api";
-import { IdObj } from "../types";
-
-export function useSelectionKeys<T extends IdObj>(
-  ref: MutableRefObject<HTMLDivElement | null>,
-  api: TreeApi<T>
-) {
-  useEffect(() => {
-    const el = ref.current;
-    const cb = (e: KeyboardEvent) => {
-      if (e.code === "ArrowDown") {
-        e.preventDefault();
-        api.selectDownwards(e.shiftKey);
-      } else if (e.code === "ArrowUp") {
-        e.preventDefault();
-        api.selectUpwards(e.shiftKey);
-      }
-    };
-    el?.addEventListener("keydown", cb);
-    return () => {
-      el?.removeEventListener("keydown", cb);
-    };
-  }, [ref, api]);
-}