react-arborist 1.2.0 → 2.0.0-rc

package/src/state/open-slice.ts

@@ -0,0 +1,53 @@
+import { ActionTypes } from "../types/utils";
+
+/* Types */
+export type OpenMap = { [id: string]: boolean };
+export type OpenSlice = { unfiltered: OpenMap; filtered: OpenMap };
+
+/* Actions */
+export const actions = {
+  open(id: string, filtered: boolean) {
+    return { type: "VISIBILITY_OPEN" as const, id, filtered };
+  },
+  close(id: string, filtered: boolean) {
+    return { type: "VISIBILITY_CLOSE" as const, id, filtered };
+  },
+  toggle(id: string, filtered: boolean) {
+    return { type: "VISIBILITY_TOGGLE" as const, id, filtered };
+  },
+  clear(filtered: boolean) {
+    return { type: "VISIBILITY_CLEAR" as const, filtered };
+  },
+};
+
+/* Reducer */
+
+function openMapReducer(
+  state: OpenMap = {},
+  action: ActionTypes<typeof actions>
+) {
+  if (action.type === "VISIBILITY_OPEN") {
+    return { ...state, [action.id]: true };
+  } else if (action.type === "VISIBILITY_CLOSE") {
+    return { ...state, [action.id]: false };
+  } else if (action.type === "VISIBILITY_TOGGLE") {
+    const prev = state[action.id];
+    return { ...state, [action.id]: !prev };
+  } else if (action.type === "VISIBILITY_CLEAR") {
+    return {};
+  } else {
+    return state;
+  }
+}
+
+export function reducer(
+  state: OpenSlice = { filtered: {}, unfiltered: {} },
+  action: ActionTypes<typeof actions>
+): OpenSlice {
+  if (!action.type.startsWith("VISIBILITY")) return state;
+  if (action.filtered) {
+    return { ...state, filtered: openMapReducer(state.filtered, action) };
+  } else {
+    return { ...state, unfiltered: openMapReducer(state.unfiltered, action) };
+  }
+}

package/src/state/root-reducer.ts

@@ -0,0 +1,21 @@
+import { ActionFromReducer, combineReducers } from "redux";
+import { reducer as focus } from "./focus-slice";
+import { reducer as edit } from "./edit-slice";
+import { reducer as dnd } from "./dnd-slice";
+import { reducer as selection } from "./selection-slice";
+import { reducer as open } from "./open-slice";
+import { reducer as drag } from "./drag-slice";
+
+export const rootReducer = combineReducers({
+  nodes: combineReducers({
+    focus,
+    edit,
+    open,
+    selection,
+    drag,
+  }),
+  dnd,
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type Actions = ActionFromReducer<typeof rootReducer>;

package/src/state/selection-slice.ts

@@ -0,0 +1,75 @@
+import { ActionTypes, IdObj } from "../types/utils";
+import { identify } from "../utils";
+import { initialState } from "./initial";
+
+/* Types */
+export type SelectionState = {
+  ids: Set<string>;
+  anchor: string | null;
+  mostRecent: string | null;
+};
+
+/* Actions */
+export const actions = {
+  clear: () => ({ type: "SELECTION_CLEAR" as const }),
+
+  only: (id: string | IdObj) => ({
+    type: "SELECTION_ONLY" as const,
+    id: identify(id),
+  }),
+
+  add: (id: string | string[] | IdObj | IdObj[]) => ({
+    type: "SELECTION_ADD" as const,
+    ids: (Array.isArray(id) ? id : [id]).map(identify),
+  }),
+
+  remove: (id: string | string[] | IdObj | IdObj[]) => ({
+    type: "SELECTION_REMOVE" as const,
+    ids: (Array.isArray(id) ? id : [id]).map(identify),
+  }),
+
+  set: (ids: Set<string>) => ({
+    type: "SELECTION_SET" as const,
+    ids,
+  }),
+
+  mostRecent: (id: string | null | IdObj) => ({
+    type: "SELECTION_MOST_RECENT" as const,
+    id: id === null ? null : identify(id),
+  }),
+
+  anchor: (id: string | null | IdObj) => ({
+    type: "SELECTION_ANCHOR" as const,
+    id: id === null ? null : identify(id),
+  }),
+};
+
+/* Reducer */
+export function reducer(
+  state: SelectionState = initialState()["nodes"]["selection"],
+  action: ActionTypes<typeof actions>
+): SelectionState {
+  const ids = state.ids;
+  switch (action.type) {
+    case "SELECTION_CLEAR":
+      return { ...state, ids: new Set() };
+    case "SELECTION_ONLY":
+      return { ...state, ids: new Set([action.id]) };
+    case "SELECTION_ADD":
+      if (action.ids.length === 0) return state;
+      action.ids.forEach((id) => ids.add(id));
+      return { ...state, ids: new Set(ids) };
+    case "SELECTION_REMOVE":
+      if (action.ids.length === 0) return state;
+      action.ids.forEach((id) => ids.delete(id));
+      return { ...state, ids: new Set(ids) };
+    case "SELECTION_SET":
+      return { ...state, ids: new Set(action.ids) };
+    case "SELECTION_MOST_RECENT":
+      return { ...state, mostRecent: action.id };
+    case "SELECTION_ANCHOR":
+      return { ...state, anchor: action.id };
+    default:
+      return state;
+  }
+}

package/src/types/dnd.ts

@@ -0,0 +1,10 @@
+export type CursorLocation = {
+  index: number | null;
+  level: number | null;
+  parentId: string | null;
+};
+
+export type DragItem = {
+  dragIds: string[];
+  id: string;
+};

package/src/types/handlers.ts

@@ -0,0 +1,24 @@
+import { IdObj } from "./utils";
+
+export type CreateHandler = (args: {
+  parentId: string | null;
+  index: number;
+  type: "internal" | "leaf";
+}) => (IdObj | null) | Promise<IdObj | null>;
+
+export type MoveHandler = (args: {
+  dragIds: string[];
+  parentId: string | null;
+  index: number;
+}) => void | Promise<void>;
+
+export type RenameHandler = (args: {
+  id: string;
+  name: string;
+}) => void | Promise<void>;
+
+export type DeleteHandler = (args: { ids: string[] }) => void | Promise<void>;
+
+export type EditResult =
+  | { cancelled: true }
+  | { cancelled: false; value: string };

package/src/types/renderers.ts

@@ -0,0 +1,34 @@
+import { CSSProperties, HTMLAttributes, ReactElement } from "react";
+import { IdObj } from "./utils";
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+import { XYCoord } from "react-dnd";
+
+export type NodeRendererProps<T extends IdObj> = {
+  style: CSSProperties;
+  node: NodeApi<T>;
+  tree: TreeApi<T>;
+  dragHandle?: (el: HTMLDivElement | null) => void;
+  preview?: boolean;
+};
+
+export type RowRendererProps<T extends IdObj> = {
+  node: NodeApi<T>;
+  innerRef: (el: HTMLDivElement | null) => void;
+  attrs: HTMLAttributes<any>;
+  children: ReactElement;
+};
+
+export type DragPreviewProps = {
+  offset: XYCoord | null;
+  mouse: XYCoord | null;
+  id: string | null;
+  dragIds: string[];
+  isDragging: boolean;
+};
+
+export type DropCursorProps = {
+  top: number;
+  left: number;
+  indent: number;
+};

package/src/types/state.ts

@@ -0,0 +1,3 @@
+import { NodeApi } from "../interfaces/node-api";
+
+export type NodeState = typeof NodeApi.prototype["state"];

package/src/types/tree-props.ts

@@ -0,0 +1,63 @@
+import { BoolFunc, IdObj } from "./utils";
+import * as handlers from "./handlers";
+import * as renderers from "./renderers";
+import { ElementType, MouseEventHandler } from "react";
+import { ListOnScrollProps } from "react-window";
+import { NodeApi } from "../interfaces/node-api";
+import { OpenMap, OpenSlice } from "../state/open-slice";
+
+export interface TreeProps<T extends IdObj> {
+  /* Data Options */
+  data?: T[];
+  initialData?: T[];
+
+  /* Data Handlers */
+  onCreate?: handlers.CreateHandler;
+  onMove?: handlers.MoveHandler;
+  onRename?: handlers.RenameHandler;
+  onDelete?: handlers.DeleteHandler;
+
+  /* Renderers*/
+  children?: ElementType<renderers.NodeRendererProps<T>>;
+  renderRow?: ElementType<renderers.RowRendererProps<T>>;
+  renderDragPreview?: ElementType<renderers.DragPreviewProps>;
+  renderCursor?: ElementType<renderers.DropCursorProps>;
+  renderContainer?: ElementType<{}>;
+
+  /* Sizes */
+  rowHeight?: number;
+  width?: number;
+  height?: number;
+  indent?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  padding?: number;
+
+  /* Config */
+  openByDefault?: boolean;
+  selectionFollowsFocus?: boolean;
+  disableDrag?: string | boolean | BoolFunc<T>;
+  disableDrop?: string | boolean | BoolFunc<T>;
+  getChildren?: string | ((d: T) => T[]);
+
+  /* Event Handlers */
+  onActivate?: (node: NodeApi<T>) => void;
+  onSelect?: (nodes: NodeApi<T>[]) => void;
+  onScroll?: (props: ListOnScrollProps) => void;
+
+  /* Selection */
+  selection?: string;
+
+  /* Open State */
+  initialOpenState?: OpenMap;
+
+  /* Search */
+  searchTerm?: string;
+  searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
+
+  /* Extra */
+  className?: string | undefined;
+  dndRootElement?: globalThis.Node | null;
+  onClick?: MouseEventHandler;
+  onContextMenu?: MouseEventHandler;
+}

package/src/types/utils.ts

@@ -0,0 +1,26 @@
+import { AnyAction } from "redux";
+import { NodeApi } from "../interfaces/node-api";
+
+export interface IdObj {
+  id: string;
+}
+
+export type Identity = string | IdObj | null;
+
+// 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 BoolFunc<T> = (data: T) => boolean;
+
+export type ActionTypes<
+  Actions extends { [name: string]: (...args: any[]) => AnyAction }
+> = ReturnType<Actions[keyof Actions]>;
+
+export type SelectOptions = { multi?: boolean; contiguous?: boolean };
+
+export type NodesById<T extends IdObj> = { [id: string]: NodeApi<T> };

package/src/utils/props.ts

@@ -0,0 +1,8 @@
+import { TreeProps } from "../types/tree-props";
+import { IdObj } from "../types/utils";
+
+export function validateProps<T extends IdObj>(
+  props: TreeProps<T>
+): TreeProps<T> {
+  return props;
+}

package/src/utils.ts

@@ -1,24 +1,23 @@
-import { Node } from "./types";
+import { NodeApi } from "./interfaces/node-api";
+import { IdObj } from "./types/utils";
 
 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 isItem(node: NodeApi<any> | null) {
+  return node && node.isLeaf;
 }
 
-export function isClosed(node: Node | null) {
-  return node && isFolder(node) && !node.isOpen;
+export function isClosed(node: NodeApi<any> | null) {
+  return node && node.isInternal && !node.isOpen;
 }
 
 /**
  * Is first param a decendent of the second param
  */
-export const isDecendent = (a: Node, b: Node) => {
-  let n: Node | null = a;
+export const isDecendent = (a: NodeApi<any>, b: NodeApi<any>) => {
+  let n: NodeApi<any> | null = a;
   while (n) {
     if (n.id === b.id) return true;
     n = n.parent;
@@ -26,10 +25,125 @@ export const isDecendent = (a: Node, b: Node) => {
   return false;
 };
 
-export const indexOf = (node: Node) => {
-  // This should probably not throw an error, but instead return null
+export const indexOf = (node: NodeApi<any>) => {
   if (!node.parent) throw Error("Node does not have a parent");
   return node.parent.children!.findIndex((c) => c.id === node.id);
 };
 
 export function noop() {}
+
+export function dfs(node: NodeApi<any>, id: string): NodeApi<any> | 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;
+}
+
+export function focusNextElement(target: HTMLElement) {
+  const elements = getFocusable(target);
+
+  let next: HTMLElement;
+  for (let i = 0; i < elements.length; ++i) {
+    const item = elements[i];
+    if (item === target) {
+      next = nextItem(elements, i);
+      break;
+    }
+  }
+
+  // @ts-ignore ??
+  next?.focus();
+}
+
+export function focusPrevElement(target: HTMLElement) {
+  const elements = getFocusable(target);
+  let next: HTMLElement;
+  for (let i = 0; i < elements.length; ++i) {
+    const item = elements[i];
+    if (item === target) {
+      next = prevItem(elements, i);
+      break;
+    }
+  }
+  // @ts-ignore
+  next?.focus();
+}
+
+function nextItem(list: HTMLElement[], index: number) {
+  if (index + 1 < list.length) {
+    return list[index + 1] as HTMLElement;
+  } else {
+    return list[0] as HTMLElement;
+  }
+}
+
+function prevItem(list: HTMLElement[], index: number) {
+  if (index - 1 >= 0) {
+    return list[index - 1];
+  } else {
+    return list[list.length - 1];
+  }
+}
+
+function getFocusable(target: HTMLElement) {
+  return Array.from(
+    document.querySelectorAll(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
+    )
+  ).filter((e) => e === target || !target.contains(e)) as HTMLElement[];
+}
+
+export function access<T = boolean>(
+  obj: any,
+  accessor: string | boolean | Function
+): T {
+  if (typeof accessor === "boolean") return accessor as unknown as T;
+  if (typeof accessor === "string") return obj[accessor] as T;
+  return accessor(obj) as T;
+}
+
+export function identifyNull(obj: string | IdObj | null) {
+  if (obj === null) return null;
+  else return identify(obj);
+}
+
+export function identify(obj: string | IdObj) {
+  return typeof obj === "string" ? obj : obj.id;
+}
+
+export function mergeRefs(...refs: any) {
+  return (instance: any) => {
+    refs.forEach((ref: any) => {
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref != null) {
+        ref.current = instance;
+      }
+    });
+  };
+}
+
+export function safeRun<T extends (...args: any[]) => any>(
+  fn: T | undefined,
+  ...args: Parameters<T>
+) {
+  if (fn) return fn(...args);
+}
+
+export function waitFor(fn: () => boolean) {
+  return new Promise<void>((resolve, reject) => {
+    let tries = 0;
+    function check() {
+      tries += 1;
+      if (tries === 100) reject();
+      if (fn()) resolve();
+      else setTimeout(check, 10);
+    }
+    check();
+  });
+}