react-arborist 1.1.0 → 2.0.0-rc

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-hook.ts

@@ -1,34 +0,0 @@
-import { Dispatch, useLayoutEffect, useMemo } from "react";
-import { FixedSizeList } from "react-window";
-import { Action, actions } from "./reducer";
-import { TreeApi } from "./tree-api";
-import { StateContext, TreeProviderProps } from "./types";
-
-export function useTreeApi<T>(
-  state: StateContext,
-  dispatch: Dispatch<Action>,
-  props: TreeProviderProps<T>,
-  list: FixedSizeList | undefined
-) {
-  /**
-   * We only ever want one instance of the api object
-   * It will get updated as the props change, but the
-   * reference will not.
-   */
-  const api = useMemo(
-    () => new TreeApi<T>(dispatch, state, props, list),
-    // eslint-disable-next-line
-    []
-  );
-  api.assign(dispatch, state, props, list);
-
-  /**
-   * This ensures that the selection remains correct even
-   * after opening and closing a folders
-   */
-  useLayoutEffect(() => {
-    dispatch(actions.setVisibleIds(api.visibleIds, api.idToIndex));
-  }, [dispatch, api, props.root]);
-
-  return api;
-}

package/src/tree-api.ts

@@ -1,156 +0,0 @@
-import memoizeOne from "memoize-one";
-import { Dispatch } 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 } from "./types";
-import ReactDOM from "react-dom";
-
-export class TreeApi<T = unknown> {
-  private edits = new Map<string, (args: EditResult) => void>();
-
-  constructor(
-    public dispatch: Dispatch<Action>,
-    public state: StateContext,
-    public props: TreeProviderProps<T>,
-    public list: FixedSizeList | undefined
-  ) {}
-
-  assign(
-    dispatch: Dispatch<Action>,
-    state: StateContext,
-    props: TreeProviderProps<T>,
-    list: FixedSizeList | undefined
-  ) {
-    this.dispatch = dispatch;
-    this.state = state;
-    this.props = props;
-    this.list = list;
-  }
-
-  getNode(id: string): Node<unknown> | 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.props.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.scrollToItem(index);
-    } else {
-      this.openParents(id);
-      ReactDOM.flushSync(() => {
-        const index = this.idToIndex[id];
-        if (index) {
-          this.list?.scrollToItem(index);
-        }
-      });
-    }
-  }
-
-  open(id: string) {
-    this.props.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);
-  }
-}
-
-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,155 +0,0 @@
-import React, {
-  ComponentType,
-  CSSProperties,
-  MouseEvent,
-  MouseEventHandler,
-  MutableRefObject,
-  ReactElement,
-  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> = {
-  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> = 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> {
-  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;
-}
-
-export type TreeProviderProps<T> = {
-  imperativeHandle: React.Ref<TreeApi<T>> | undefined;
-  children: ReactElement;
-  height: number;
-  indent: number;
-  listEl: MutableRefObject<HTMLDivElement | null>;
-  onToggle: ToggleHandler;
-  onMove: MoveHandler;
-  onEdit: EditHandler;
-  onClick?: MouseEventHandler;
-  onContextMenu?: MouseEventHandler;
-  renderer: NodeRenderer<any>;
-  rowHeight: number;
-  root: Node<T>;
-  width: number;
-};
-
-export type StaticContext<T> = TreeProviderProps<T> & {
-  api: TreeApi<T>;
-  list: MutableRefObject<FixedSizeList | undefined>;
-};
-
-export type EditResult =
-  | { cancelled: true }
-  | { cancelled: false; value: string };