react-arborist 1.2.0 → 2.0.0-rc.1

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

package/src/selection/selection.ts

@@ -1,186 +0,0 @@
-import { Range } from "./range";
-
-type SelectionDirection = "forward" | "backward" | "none";
-
-export type SelectionData = {
-  ranges: [number, number][];
-  currentIndex: number | null;
-  direction: SelectionDirection;
-};
-
-export class Selection {
-  ranges: Range[] = [];
-  currentIndex: number | null;
-  direction: SelectionDirection = "none";
-  items: any[];
-
-  static parse(data: SelectionData | null, items: any[]) {
-    if (data) {
-      return new Selection(
-        data.ranges,
-        data.currentIndex,
-        data.direction,
-        items
-      );
-    } else {
-      return new Selection();
-    }
-  }
-
-  constructor(
-    ranges: [number, number][] = [],
-    currentIndex: number | null = ranges.length ? ranges.length - 1 : null,
-    direction: SelectionDirection = "none",
-    items: any[] = []
-  ) {
-    ranges.forEach(([s, e]) => this.addRange(s, e));
-    this.currentIndex = currentIndex;
-    this.direction = direction;
-    this.items = items;
-  }
-
-  get current() {
-    if (this.currentIndex === null) return null;
-    const range = this.ranges[this.currentIndex];
-    if (!range) {
-      return null;
-    } else {
-      return range;
-    }
-  }
-
-  select(n: number) {
-    if (n < 0 || n >= this.items.length) return;
-    this.clear();
-    this.currentIndex = this.addRange(n, n);
-  }
-
-  multiSelect(n: number) {
-    if (n < 0 || n >= this.items.length) return;
-    if (this.contains(n)) return;
-    this.currentIndex = this.addRange(n, n);
-    this.compact(n);
-  }
-
-  deselect(n: number) {
-    if (n < 0 || n >= this.items.length) return;
-    const r = this.ranges.find((r) => r.contains(n));
-    if (!r) return;
-    else if (r.size === 1) this.removeRange(r);
-    else if (r.start === n) r.start++;
-    else if (r.end === n) r.end--;
-    else {
-      this.removeRange(r);
-      this.addRange(r.start, n - 1);
-      this.currentIndex = this.addRange(n + 1, r.end);
-    }
-  }
-
-  getSelectedItems<T>(): T[] {
-    return this.ranges.flatMap((range) =>
-      range.map((index) => this.items[index])
-    );
-  }
-
-  extend(n: number) {
-    if (n < 0 || n >= this.items.length) return;
-    if (this.isEmpty()) {
-      this.select(n);
-    } else {
-      const anchor = this.getAnchor();
-      if (anchor !== null && this.current) {
-        const [start, end] = [n, anchor].sort((a, b) => a - b);
-        this.current.start = start;
-        this.current.end = end;
-        this.compact(n);
-      }
-    }
-  }
-
-  contains(n: number | null) {
-    if (n === null) return false;
-    return this.ranges.some((r) => r.contains(n));
-  }
-
-  getRanges() {
-    return this.ranges.map((r) => r.serialize());
-  }
-
-  clear() {
-    this.ranges = [];
-    this.currentIndex = null;
-    this.direction = "none";
-  }
-
-  serialize(): SelectionData {
-    return {
-      ranges: this.getRanges(),
-      currentIndex: this.currentIndex,
-      direction: this.direction,
-    };
-  }
-
-  isEqual(other: Selection) {
-    if (other.ranges.length !== this.ranges.length) return false;
-
-    for (let i = 0; i < this.ranges.length; ++i) {
-      if (!this.ranges[i].isEqual(other.ranges[i])) return false;
-    }
-    return true;
-  }
-
-  private addRange(start: number, end: number) {
-    const r = new Range(start, end);
-    // Keep ranges sorted by start
-    const index = this.ranges.findIndex((r) => r.start >= start);
-    if (index === -1) this.ranges.push(r);
-    else this.ranges.splice(index, 0, r);
-    return index === -1 ? this.ranges.length - 1 : index;
-  }
-
-  private removeRange(r: Range) {
-    const index = this.ranges.indexOf(r);
-    this.ranges.splice(index, 1);
-    if (this.isEmpty()) {
-      this.currentIndex = null;
-    } else if (index === this.currentIndex) {
-      this.currentIndex = this.ranges.length - 1;
-    }
-  }
-
-  private isEmpty() {
-    return this.ranges.length === 0;
-  }
-
-  getAnchor() {
-    if (!this.current) return null;
-    return this.direction === "backward"
-      ? this.current.end
-      : this.current.start;
-  }
-
-  getFocus() {
-    if (!this.current) return -1;
-    return this.direction === "backward"
-      ? this.current.start
-      : this.current.end;
-  }
-
-  private compact(focus: number) {
-    const removals = [];
-    const current = this.current;
-    for (let r of this.ranges) {
-      if (!this.current || r === this.current) continue;
-      if (this.current.overlaps(r)) {
-        this.current.combine(r);
-        removals.push(r);
-      }
-    }
-    removals.forEach((r) => this.removeRange(r));
-    if (current) this.currentIndex = this.ranges.indexOf(current);
-    if (!this.current) return;
-    if (this.current.start < focus) this.direction = "forward";
-    else if (this.current.end > focus) this.direction = "backward";
-    else this.direction = "none";
-  }
-}

package/src/tree-api.ts

@@ -1,230 +0,0 @@
-import memoizeOne from "memoize-one";
-import { Dispatch, MutableRefObject } from "react";
-import { FixedSizeList } from "react-window";
-import { flattenTree } from "./data/flatten-tree";
-import { Cursor } from "./dnd/compute-drop";
-import { Action, actions } from "./reducer";
-import {
-  Node,
-  StateContext,
-  TreeProviderProps,
-  EditResult,
-  IdObj,
-  DropCursorProps,
-} from "./types";
-import ReactDOM from "react-dom";
-import { noop } from "./utils";
-import { Selection } from "./selection/selection";
-import { defaultDropCursor } from "./components/default-drop-cursor";
-export class TreeApi<T extends IdObj> {
-  private edits = new Map<string, (args: EditResult) => void>();
-
-  constructor(
-    public dispatch: Dispatch<Action>,
-    public state: StateContext,
-    public props: TreeProviderProps<T>,
-    public list: MutableRefObject<FixedSizeList | null>,
-    public listEl: MutableRefObject<HTMLDivElement | null>
-  ) {}
-
-  sync(other: TreeApi<T>) {
-    this.dispatch = other.dispatch;
-    this.state = other.state;
-    this.props = other.props;
-    this.list = other.list;
-    this.listEl = other.listEl;
-  }
-
-  getNode(id: string): Node<T> | null {
-    if (id in this.idToIndex)
-      return this.visibleNodes[this.idToIndex[id]] || null;
-    else return null;
-  }
-
-  getSelectedIds() {
-    return this.state.selection.ids;
-  }
-
-  edit(id: string | number): Promise<EditResult> {
-    const sid = id.toString();
-    this.resolveEdit(sid, { cancelled: true });
-    this.scrollToId(sid);
-    this.dispatch(actions.edit(sid));
-    return new Promise((resolve) => this.edits.set(sid, resolve));
-  }
-
-  submit(id: string | number, value: string) {
-    const sid = id.toString();
-    this.onEdit(sid, value);
-    this.dispatch(actions.edit(null));
-    this.resolveEdit(sid, { cancelled: false, value });
-  }
-
-  reset(id: string | number) {
-    const sid = id.toString();
-    this.dispatch(actions.edit(null));
-    this.resolveEdit(sid, { cancelled: true });
-  }
-
-  private resolveEdit(id: string, value: EditResult) {
-    const resolve = this.edits.get(id.toString());
-    if (resolve) resolve(value);
-    this.edits.delete(id);
-  }
-
-  select(index: number | null, meta = false, shift = false) {
-    this.dispatch(actions.select(index, meta, shift));
-  }
-
-  selectById(id: string | number, meta = false, shift = false) {
-    const index = this.idToIndex[id];
-    this.select(index, meta, shift);
-  }
-
-  selectUpwards(shiftKey: boolean) {
-    this.dispatch(actions.stepUp(shiftKey, this.visibleIds));
-  }
-
-  selectDownwards(shiftKey: boolean) {
-    this.dispatch(actions.stepDown(shiftKey, this.visibleIds));
-  }
-
-  hideCursor() {
-    this.dispatch(actions.setCursorLocation({ type: "none" }));
-  }
-
-  showCursor(cursor: Cursor) {
-    this.dispatch(actions.setCursorLocation(cursor));
-  }
-
-  scrollToId(id: string) {
-    if (!this.list) return;
-    const index = this.idToIndex[id];
-    if (index) {
-      this.list.current?.scrollToItem(index);
-    } else {
-      this.openParents(id);
-      ReactDOM.flushSync(() => {
-        const index = this.idToIndex[id];
-        if (index) {
-          this.list.current?.scrollToItem(index);
-        }
-      });
-    }
-  }
-
-  open(id: string) {
-    this.onToggle(id, true);
-  }
-
-  openParents(id: string) {
-    const node = dfs(this.props.root, id);
-    let parent = node?.parent;
-
-    while (parent) {
-      this.open(parent.id);
-      parent = parent.parent;
-    }
-  }
-
-  get visibleIds() {
-    return getIds(this.visibleNodes);
-  }
-
-  get idToIndex() {
-    return createIndex(this.visibleNodes);
-  }
-
-  get visibleNodes() {
-    return createList(this.props.root) as Node<T>[];
-  }
-
-  get width() {
-    return this.props.treeProps.width || 300;
-  }
-
-  get height() {
-    return this.props.treeProps.height || 500;
-  }
-
-  get indent() {
-    return this.props.treeProps.indent || 24;
-  }
-
-  get renderer() {
-    return this.props.treeProps.children;
-  }
-
-  get onToggle() {
-    return this.props.treeProps.onToggle || noop;
-  }
-
-  get rowHeight() {
-    return this.props.treeProps.rowHeight || 24;
-  }
-
-  get onClick() {
-    return this.props.treeProps.onClick || noop;
-  }
-
-  get onContextMenu() {
-    return this.props.treeProps.onContextMenu || noop;
-  }
-
-  get onMove() {
-    return this.props.treeProps.onMove || noop;
-  }
-
-  get onEdit() {
-    return this.props.treeProps.onEdit || noop;
-  }
-
-  get cursorParentId() {
-    const { cursor } = this.state;
-    switch (cursor.type) {
-      case "highlight":
-        return cursor.id;
-      default:
-        return null;
-    }
-  }
-
-  get cursorOverFolder() {
-    return this.state.cursor.type === "highlight";
-  }
-
-  get editingId() {
-    return this.state.editingId;
-  }
-
-  isSelected(index: number | null) {
-    const selection = Selection.parse(this.state.selection.data, []);
-    return selection.contains(index);
-  }
-
-  renderDropCursor(props: DropCursorProps) {
-    const render = this.props.treeProps.dropCursor || defaultDropCursor;
-    return render(props);
-  }
-}
-
-const getIds = memoizeOne((nodes: Node[]) => nodes.map((n) => n.id));
-const createIndex = memoizeOne((nodes: Node[]) => {
-  return nodes.reduce<{ [id: string]: number }>((map, node, index) => {
-    map[node.id] = index;
-    return map;
-  }, {});
-});
-const createList = memoizeOne(flattenTree);
-
-function dfs(node: Node<unknown>, id: string): Node<unknown> | null {
-  if (!node) return null;
-  if (node.id === id) return node;
-  if (node.children) {
-    for (let child of node.children) {
-      const result = dfs(child, id);
-      if (result) return result;
-    }
-  }
-  return null;
-}

package/src/types.ts

@@ -1,148 +0,0 @@
-import React, {
-  ComponentType,
-  CSSProperties,
-  MouseEvent,
-  MouseEventHandler,
-  MutableRefObject,
-  ReactElement,
-  ReactNode,
-  Ref,
-} from "react";
-import { FixedSizeList } from "react-window";
-import { Cursor } from "./dnd/compute-drop";
-import { SelectionData } from "./selection/selection";
-import { TreeApi } from "./tree-api";
-
-// Forward ref can't forward generics without this little re-declare
-// https://fettblog.eu/typescript-react-generic-forward-refs/
-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 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 type NodesById<T> = { [id: string]: Node<T> };
-
-export interface IdObj {
-  id: string;
-}
-
-export 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 type NodeState = {
-  isOpen: boolean;
-  isSelected: boolean;
-  isHoveringOverChild: boolean;
-  isDragging: boolean;
-  isSelectedStart: boolean;
-  isSelectedEnd: boolean;
-  isEditing: boolean;
-};
-
-export type NodeHandlers = {
-  toggle: MouseEventHandler;
-  select: (e: MouseEvent, args: { selectOnClick: boolean }) => void;
-  edit: () => Promise<EditResult>;
-  submit: (name: string) => void;
-  reset: () => void;
-};
-
-export type NodeRenderer<T extends IdObj> = ComponentType<NodeRendererProps<T>>;
-
-export type MoveHandler = (
-  dragIds: string[],
-  parentId: string | null,
-  index: number
-) => void;
-
-export type ToggleHandler = (id: string, isOpen: boolean) => void;
-export type EditHandler = (id: string, name: string) => void;
-export type NodeClickHandler<T> = (e: MouseEvent, n: Node<T>) => void;
-export type IndexClickHandler = (e: MouseEvent, index: number) => void;
-export type SelectedCheck = (index: number) => boolean;
-
-export type CursorLocation = {
-  index: number | null;
-  level: number | null;
-  parentId: string | null;
-};
-
-export type DragItem = {
-  dragIds: string[];
-  id: string;
-};
-
-export type SelectionState = {
-  data: SelectionData | null;
-  ids: string[];
-};
-
-export type StateContext = {
-  cursor: Cursor;
-  editingId: string | null;
-  selection: SelectionState;
-  visibleIds: string[];
-};
-
-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>>; // Deprecated
-  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 type TreeProviderProps<T extends IdObj> = {
-  treeProps: TreeProps<T>;
-  imperativeHandle: React.Ref<TreeApi<T>> | undefined;
-  children: ReactElement;
-  root: Node<T>;
-};
-
-export type EditResult =
-  | { cancelled: true }
-  | { cancelled: false; value: string };
-
-export type DropCursorProps = {
-  top: number;
-  left: number;
-  indent: number;
-};