react-arborist 0.1.12 → 0.2.0-beta.0

package/src/selection/selection.ts

@@ -0,0 +1,186 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,129 @@
+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 } from "./types";
+
+export class TreeApi<T = unknown> {
+  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 | null) {
+    this.dispatch(actions.edit(id ? id.toString() : null));
+  }
+
+  select(index: number | null, meta: boolean, shift: boolean) {
+    this.dispatch(actions.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, "start");
+    } else {
+      this.openParents(id);
+      // This appears to be synchronous
+      // But I've only tested it in the console and
+      // not in an event handler which will be batched...
+      // We may need to wrap this in a timeout or trigger an effect somehow
+      setTimeout(() => {
+        const index = this.idToIndex[id];
+        if (index) {
+          this.list?.scrollToItem(index, "start");
+        }
+      });
+    }
+  }
+
+  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

@@ -0,0 +1,147 @@
+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;
+  isFirstOfSelected: boolean;
+  isLastOfSelected: boolean;
+  isEditing: boolean;
+};
+
+export type NodeHandlers = {
+  toggle: MouseEventHandler;
+  select: (e: MouseEvent, selectOnClick?: boolean) => void;
+  edit: () => void;
+  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[];
+};
+export interface TreeProps<T> {
+  children: NodeRenderer<T>;
+  data: T;
+  height?: number;
+  width?: number;
+  rowHeight?: number;
+  indent?: number;
+  hideRoot?: boolean;
+  onToggle?: ToggleHandler;
+  onMove?: MoveHandler;
+  onEdit?: EditHandler;
+  getChildren?: string | ((d: T) => T[]);
+  isOpen?: string | ((d: T) => boolean);
+  disableDrag?: string | boolean | ((d: T) => boolean);
+  disableDrop?: string | boolean | ((d: T) => boolean);
+  openByDefault?: boolean;
+  className?: string | undefined;
+  handle?: Ref<TreeApi<T>>;
+  onClick?: MouseEventHandler;
+  onContextMenu?: MouseEventHandler;
+}
+
+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>;
+};

package/src/utils.ts

@@ -0,0 +1,35 @@
+import { Node } from "./types";
+
+export function bound(n: number, min: number, max: number) {
+  return Math.max(Math.min(n, max), min);
+}
+
+export const isFolder = (node: Node<any>) => !!node.children;
+
+export function isItem(node: Node | null) {
+  return node && !isFolder(node);
+}
+
+export function isClosed(node: Node | null) {
+  return node && isFolder(node) && !node.isOpen;
+}
+
+/**
+ * Is first param a decendent of the second param
+ */
+export const isDecendent = (a: Node, b: Node) => {
+  let n: Node | null = a;
+  while (n) {
+    if (n.id === b.id) return true;
+    n = n.parent;
+  }
+  return false;
+};
+
+export const indexOf = (node: Node) => {
+  // This should probably not throw an error, but instead return null
+  if (!node.parent) throw Error("Node does not have a parent");
+  return node.parent.children!.findIndex((c) => c.id === node.id);
+};
+
+export function noop() {}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "include": ["src/index.ts"],
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Language and Environment */
+    "target": "ES5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "jsx": "preserve",                                /* Specify what JSX code is generated. */
+
+    /* Modules */
+    "module": "CommonJS",                                /* Specify what module code is generated. */
+    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+
+    /* Emit */
+    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+
+    /* Interop Constraints */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    
+    /* Completeness */
+    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
+  }
+}