react-arborist 1.2.0 → 2.0.0-rc.1

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,64 @@
+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>;
+  childrenAccessor?: string | ((d: T) => T[]);
+  idAccessor?: string | ((d: T) => string);
+
+  /* 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.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();
+  });
+}

package/tsconfig.json

@@ -5,7 +5,7 @@
 
     /* 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. */
+    "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
 
     /* Modules */
     "module": "CommonJS",                                /* Specify what module code is generated. */

package/dist/components/default-drop-cursor.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { DropCursorProps } from "../types";
-export declare function defaultDropCursor(props: DropCursorProps): JSX.Element;

package/dist/components/list.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare function List(props: {
-    className?: string;
-}): JSX.Element;

package/dist/components/preview.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function Preview(): JSX.Element;

package/dist/components/row.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { IdObj } from "../types";
-declare type Props = {
-    style: React.CSSProperties;
-    index: number;
-};
-export declare const Row: React.MemoExoticComponent<(<T extends IdObj>({ index, style, }: Props) => JSX.Element)>;
-export {};

package/dist/data/enrich-tree.d.ts

@@ -1,2 +0,0 @@
-import { TreeProps, IdObj, Node } from "../types";
-export declare function enrichTree<T extends IdObj>(model: T, hideRoot?: boolean, getChildren?: TreeProps<T>["getChildren"], isOpen?: TreeProps<T>["isOpen"], disableDrag?: TreeProps<T>["disableDrag"], disableDrop?: TreeProps<T>["disableDrop"], openByDefault?: boolean): Node<T>;

package/dist/data/flatten-tree.d.ts

@@ -1,2 +0,0 @@
-import { Node } from "../types";
-export declare function flattenTree<T>(root: Node<T>): Node<T>[];

package/dist/provider.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IdObj, TreeProviderProps } from "./types";
-export declare function TreeViewProvider<T extends IdObj>(props: TreeProviderProps<T>): JSX.Element;

package/dist/reducer.d.ts

@@ -1,46 +0,0 @@
-import { Cursor } from "./dnd/compute-drop";
-import { StateContext } from "./types";
-export declare const initState: () => StateContext;
-export declare const actions: {
-    setCursorLocation: (cursor: Cursor) => {
-        type: "SET_CURSOR_LOCATION";
-        cursor: Cursor;
-    };
-    setVisibleIds: (ids: string[], idMap: {
-        [id: string]: number;
-    }) => {
-        type: "SET_VISIBLE_IDS";
-        ids: string[];
-        idMap: {
-            [id: string]: number;
-        };
-    };
-    select: (index: number | null, meta: boolean, shift: boolean) => {
-        type: "SELECT";
-        index: number | null;
-        meta: boolean;
-        shift: boolean;
-    };
-    selectId: (id: string) => {
-        type: "SELECT_ID";
-        id: string;
-    };
-    edit: (id: string | null) => {
-        type: "EDIT";
-        id: string | null;
-    };
-    stepUp: (shift: boolean, ids: string[]) => {
-        type: "STEP_UP";
-        shift: boolean;
-    };
-    stepDown: (shift: boolean, ids: string[]) => {
-        type: "STEP_DOWN";
-        shift: boolean;
-    };
-};
-declare type ActionObj = {
-    [Prop in keyof typeof actions]: ReturnType<typeof actions[Prop]>;
-};
-export declare type Action = ActionObj[keyof ActionObj];
-export declare function reducer(state: StateContext, action: Action): StateContext;
-export {};

package/dist/selection/range.d.ts

@@ -1,13 +0,0 @@
-export declare class Range {
-    start: number;
-    end: number;
-    constructor(start: number, end: number);
-    serialize(): [number, number];
-    contains(n: number): boolean;
-    overlaps(r: Range): boolean;
-    combine(r: Range): void;
-    get size(): number;
-    clone(): Range;
-    map(fn: (index: any) => string): any;
-    isEqual(other: Range): boolean;
-}

package/dist/selection/selection-hook.d.ts

@@ -1,4 +0,0 @@
-import { MutableRefObject } from "react";
-import { TreeApi } from "../tree-api";
-import { IdObj } from "../types";
-export declare function useSelectionKeys<T extends IdObj>(ref: MutableRefObject<HTMLDivElement | null>, api: TreeApi<T>): void;

package/dist/selection/selection.d.ts

@@ -1,33 +0,0 @@
-import { Range } from "./range";
-declare type SelectionDirection = "forward" | "backward" | "none";
-export declare type SelectionData = {
-    ranges: [number, number][];
-    currentIndex: number | null;
-    direction: SelectionDirection;
-};
-export declare class Selection {
-    ranges: Range[];
-    currentIndex: number | null;
-    direction: SelectionDirection;
-    items: any[];
-    static parse(data: SelectionData | null, items: any[]): Selection;
-    constructor(ranges?: [number, number][], currentIndex?: number | null, direction?: SelectionDirection, items?: any[]);
-    get current(): Range | null;
-    select(n: number): void;
-    multiSelect(n: number): void;
-    deselect(n: number): void;
-    getSelectedItems<T>(): T[];
-    extend(n: number): void;
-    contains(n: number | null): boolean;
-    getRanges(): [number, number][];
-    clear(): void;
-    serialize(): SelectionData;
-    isEqual(other: Selection): boolean;
-    private addRange;
-    private removeRange;
-    private isEmpty;
-    getAnchor(): number | null;
-    getFocus(): number;
-    private compact;
-}
-export {};

package/dist/tree-api.d.ts

@@ -1,50 +0,0 @@
-import { Dispatch, MutableRefObject } from "react";
-import { FixedSizeList } from "react-window";
-import { Cursor } from "./dnd/compute-drop";
-import { Action } from "./reducer";
-import { Node, StateContext, TreeProviderProps, EditResult, IdObj, DropCursorProps } from "./types";
-export declare class TreeApi<T extends IdObj> {
-    dispatch: Dispatch<Action>;
-    state: StateContext;
-    props: TreeProviderProps<T>;
-    list: MutableRefObject<FixedSizeList | null>;
-    listEl: MutableRefObject<HTMLDivElement | null>;
-    private edits;
-    constructor(dispatch: Dispatch<Action>, state: StateContext, props: TreeProviderProps<T>, list: MutableRefObject<FixedSizeList | null>, listEl: MutableRefObject<HTMLDivElement | null>);
-    sync(other: TreeApi<T>): void;
-    getNode(id: string): Node<T> | null;
-    getSelectedIds(): string[];
-    edit(id: string | number): Promise<EditResult>;
-    submit(id: string | number, value: string): void;
-    reset(id: string | number): void;
-    private resolveEdit;
-    select(index: number | null, meta?: boolean, shift?: boolean): void;
-    selectById(id: string | number, meta?: boolean, shift?: boolean): void;
-    selectUpwards(shiftKey: boolean): void;
-    selectDownwards(shiftKey: boolean): void;
-    hideCursor(): void;
-    showCursor(cursor: Cursor): void;
-    scrollToId(id: string): void;
-    open(id: string): void;
-    openParents(id: string): void;
-    get visibleIds(): string[];
-    get idToIndex(): {
-        [id: string]: number;
-    };
-    get visibleNodes(): Node<T>[];
-    get width(): number;
-    get height(): number;
-    get indent(): number;
-    get renderer(): import("./types").NodeRenderer<T>;
-    get onToggle(): import("./types").ToggleHandler;
-    get rowHeight(): number;
-    get onClick(): import("react").MouseEventHandler<Element>;
-    get onContextMenu(): import("react").MouseEventHandler<Element>;
-    get onMove(): import("./types").MoveHandler;
-    get onEdit(): import("./types").EditHandler;
-    get cursorParentId(): string | null;
-    get cursorOverFolder(): boolean;
-    get editingId(): string | null;
-    isSelected(index: number | null): boolean;
-    renderDropCursor(props: DropCursorProps): JSX.Element;
-}