react-arborist 1.2.0 → 2.0.0-rc

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]);
-}

package/src/selection/selection.test.ts

@@ -1,111 +0,0 @@
-import { Selection } from "./selection";
-
-const createSelection = (...ranges: [number, number][]) => {
-  return new Selection(ranges);
-};
-
-describe("select", () => {
-  test("select one after end", () => {
-    const s = createSelection([0, 0]);
-    s.multiSelect(1);
-    expect(s.getRanges()).toEqual([[0, 1]]);
-    expect(s.direction).toEqual("forward");
-  });
-
-  test("select one before start", () => {
-    const s = createSelection([1, 1]);
-    s.multiSelect(0);
-    expect(s.getRanges()).toEqual([[0, 1]]);
-    expect(s.direction).toEqual("backward");
-  });
-
-  test("select between two ranges", () => {
-    const s = createSelection([0, 0], [2, 2]);
-    s.multiSelect(1);
-    expect(s.getRanges()).toEqual([[0, 2]]);
-    expect(s.direction).toEqual("forward");
-  });
-
-  test("select new spot", () => {
-    const s = createSelection([0, 0]);
-    s.multiSelect(5);
-    expect(s.getRanges()).toEqual([
-      [0, 0],
-      [5, 5],
-    ]);
-    expect(s.direction).toEqual("none");
-  });
-});
-
-describe("deselect", () => {
-  test("one", () => {
-    const s = createSelection([0, 0]);
-    s.deselect(0);
-    expect(s.getRanges()).toEqual([]);
-  });
-
-  test("start of a range", () => {
-    const s = createSelection([0, 5]);
-    s.deselect(0);
-    expect(s.getRanges()).toEqual([[1, 5]]);
-  });
-
-  test("end of a range", () => {
-    const s = createSelection([0, 5]);
-    s.deselect(5);
-    expect(s.getRanges()).toEqual([[0, 4]]);
-  });
-
-  test("between a range", () => {
-    const s = createSelection([0, 5]);
-    s.deselect(3);
-    expect(s.getRanges()).toEqual([
-      [0, 2],
-      [4, 5],
-    ]);
-  });
-});
-
-describe("extend", () => {
-  test("up", () => {
-    const s = createSelection();
-    s.multiSelect(5);
-    s.extend(6);
-    expect(s.getRanges()).toEqual([[5, 6]]);
-  });
-
-  test("down", () => {
-    const s = createSelection();
-    s.multiSelect(5);
-    s.extend(4);
-    expect(s.getRanges()).toEqual([[4, 5]]);
-  });
-
-  test("around anchor", () => {
-    const s = createSelection([5, 10]);
-    s.extend(1);
-    expect(s.getRanges()).toEqual([[1, 5]]);
-  });
-
-  test("through other ranges", () => {
-    const s = createSelection([0, 0], [5, 5], [9, 10]);
-    s.multiSelect(2);
-    s.extend(20);
-    expect(s.getRanges()).toEqual([
-      [0, 0],
-      [2, 20],
-    ]);
-  });
-
-  test("clicking backward", () => {
-    const s = createSelection([15, 15]);
-    s.extend(3);
-    expect(s.getRanges()).toEqual([[3, 15]]);
-  });
-
-  test("split range then extend", () => {
-    const s = createSelection([5, 10]);
-    s.deselect(8);
-    expect(s.currentIndex).toEqual(1);
-  });
-});