react-arborist 0.1.12 → 0.2.0-beta.0

package/src/dnd/drop-hook.ts

@@ -0,0 +1,66 @@
+import { RefObject } from "react";
+import { ConnectDropTarget, useDrop } from "react-dnd";
+import { useStaticContext } from "../context";
+import { DragItem, Node } from "../types";
+import { isDecendent, isFolder } from "../utils";
+import { computeDrop } from "./compute-drop";
+
+export type DropResult = {
+  parentId: string | null;
+  index: number;
+};
+
+export type CollectedProps = undefined;
+
+export function useDropHook(
+  el: RefObject<HTMLElement | null>,
+  node: Node,
+  prev: Node | null,
+  next: Node | null
+): [CollectedProps, ConnectDropTarget] {
+  const tree = useStaticContext();
+  return useDrop<DragItem, DropResult | null, CollectedProps>(
+    () => ({
+      accept: "NODE",
+      canDrop: (item) => {
+        for (let id of item.dragIds) {
+          const drag = tree.api.getNode(id);
+          if (!drag) return false;
+          if (isFolder(drag) && isDecendent(node, drag)) return false;
+        }
+        return true;
+      },
+      hover: (item, m) => {
+        if (m.canDrop()) {
+          const offset = m.getClientOffset();
+          if (!el.current || !offset) return;
+          const { cursor } = computeDrop({
+            element: el.current,
+            offset: offset,
+            indent: tree.indent,
+            node: node,
+            prevNode: prev,
+            nextNode: next,
+          });
+          if (cursor) tree.api.showCursor(cursor);
+        } else {
+          tree.api.hideCursor();
+        }
+      },
+      drop: (item, m): DropResult | undefined | null => {
+        const offset = m.getClientOffset();
+        if (!el.current || !offset) return;
+        const { drop } = computeDrop({
+          element: el.current,
+          offset: offset,
+          indent: tree.indent,
+          node: node,
+          prevNode: prev,
+          nextNode: next,
+        });
+        return drop;
+      },
+    }),
+    [node, prev, el, tree]
+  );
+}

package/src/dnd/measure-hover.ts

@@ -0,0 +1,26 @@
+import { XYCoord } from "react-dnd";
+import { bound } from "../utils";
+
+export function measureHover(el: HTMLElement, offset: XYCoord, indent: number) {
+  const nextEl = el.nextElementSibling as HTMLElement | null;
+  const prevEl = el.previousElementSibling as HTMLElement | null;
+  const rect = el.getBoundingClientRect();
+  const x = offset.x - Math.round(rect.x);
+  const y = offset.y - Math.round(rect.y);
+  const height = rect.height;
+  const inTopHalf = y < height / 2;
+  const inBottomHalf = !inTopHalf;
+  const pad = height / 4;
+  const inMiddle = y > pad && y < height - pad;
+  const maxLevel = Number(
+    inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0
+  );
+  const minLevel = Number(
+    inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0
+  );
+  const level = bound(Math.floor(x / indent), minLevel, maxLevel);
+
+  return { level, inTopHalf, inBottomHalf, inMiddle };
+}
+
+export type HoverData = ReturnType<typeof measureHover>;

package/src/dnd/outer-drop-hook.ts

@@ -0,0 +1,50 @@
+import { useDrop } from "react-dnd";
+import { useStaticContext } from "../context";
+import { DragItem } from "../types";
+import { computeDrop } from "./compute-drop";
+import { DropResult } from "./drop-hook";
+
+export function useOuterDrop() {
+  const tree = useStaticContext();
+
+  // In case we drop an item at the bottom of the list
+  const [, drop] = useDrop<DragItem, DropResult | null, { isOver: boolean }>(
+    () => ({
+      accept: "NODE",
+      hover: (item, m) => {
+        if (!m.isOver({ shallow: true })) return;
+        const offset = m.getClientOffset();
+        if (!tree.listEl.current || !offset) return;
+        const { cursor } = computeDrop({
+          element: tree.listEl.current,
+          offset: offset,
+          indent: tree.indent,
+          node: null,
+          prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
+          nextNode: null,
+        });
+        if (cursor) tree.api.showCursor(cursor);
+      },
+      canDrop: (item, m) => {
+        return m.isOver({ shallow: true });
+      },
+      drop: (item, m) => {
+        if (m.didDrop()) return;
+        const offset = m.getClientOffset();
+        if (!tree.listEl.current || !offset) return;
+        const { drop } = computeDrop({
+          element: tree.listEl.current,
+          offset: offset,
+          indent: tree.indent,
+          node: null,
+          prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
+          nextNode: null,
+        });
+        return drop;
+      },
+    }),
+    [tree]
+  );
+
+  drop(tree.listEl);
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import { Tree } from "./components/tree";
+import { TreeApi } from "./tree-api";
+import type { NodeRenderer, NodeState, NodeHandlers } from "./types";
+
+export { Tree, TreeApi, NodeRenderer, NodeState, NodeHandlers };

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