react-arborist 0.1.13 → 0.2.0-beta.1

package/src/provider.tsx

@@ -0,0 +1,61 @@
+import { useImperativeHandle, useMemo, useReducer, useRef } from "react";
+import { FixedSizeList } from "react-window";
+import {
+  CursorLocationContext,
+  CursorParentId,
+  EditingIdContext,
+  IsCursorOverFolder,
+  SelectionContext,
+  Static,
+} from "./context";
+import { Cursor } from "./dnd/compute-drop";
+import { initState, reducer } from "./reducer";
+import { useSelectionKeys } from "./selection/selection-hook";
+import { useTreeApi } from "./tree-api-hook";
+import { StateContext, StaticContext, TreeProviderProps } from "./types";
+
+export function TreeViewProvider<T>(props: TreeProviderProps<T>) {
+  const [state, dispatch] = useReducer(reducer, initState());
+  const list = useRef<FixedSizeList>();
+  const api = useTreeApi<T>(state, dispatch, props, list.current);
+
+  useImperativeHandle(props.imperativeHandle, () => api);
+  useSelectionKeys(props.listEl, api);
+  const staticValue = useMemo<StaticContext<T>>(
+    () => ({ ...props, api, list }),
+    [props, api, list]
+  );
+
+  /**
+   * This context pattern is ridiculous, next time use redux.
+   */
+  return (
+    // @ts-ignore
+    <Static.Provider value={staticValue}>
+      <EditingIdContext.Provider value={state.editingId}>
+        <SelectionContext.Provider value={state.selection}>
+          <CursorParentId.Provider value={getParentId(state.cursor)}>
+            <IsCursorOverFolder.Provider value={isOverFolder(state)}>
+              <CursorLocationContext.Provider value={state.cursor}>
+                {props.children}
+              </CursorLocationContext.Provider>
+            </IsCursorOverFolder.Provider>
+          </CursorParentId.Provider>
+        </SelectionContext.Provider>
+      </EditingIdContext.Provider>
+    </Static.Provider>
+  );
+}
+
+function getParentId(cursor: Cursor) {
+  switch (cursor.type) {
+    case "highlight":
+      return cursor.id;
+    default:
+      return null;
+  }
+}
+
+function isOverFolder(state: StateContext) {
+  return state.cursor.type === "highlight";
+}

package/src/reducer.ts

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

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

@@ -0,0 +1,24 @@
+import { MutableRefObject, useEffect } from "react";
+import { TreeApi } from "../tree-api";
+
+export function useSelectionKeys<T>(
+  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

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

@@ -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;
+}