@headless-tree/core 0.0.0-20230802230636

package/src/features/drag-and-drop/utils.ts

@@ -0,0 +1,117 @@
+import { ItemInstance, TreeInstance } from "../../types/core";
+import {
+  DndState,
+  DragAndDropFeatureDef,
+  DropTarget,
+  DropTargetPosition,
+} from "./types";
+
+export const getDragCode = ({ item, childIndex }: DropTarget<any>) =>
+  `${item.getId()}__${childIndex ?? "none"}`;
+
+export const getDropOffset = (e: any, item: ItemInstance<any>): number => {
+  const bb = item.getElement()?.getBoundingClientRect();
+  return bb ? (e.pageY - bb.top) / bb.height : 0.5;
+};
+
+export const canDrop = (
+  dataTransfer: DataTransfer | null,
+  target: DropTarget<any>,
+  tree: TreeInstance<any>
+) => {
+  const draggedItems = tree.getState().dnd?.draggedItems;
+  const config = tree.getConfig();
+
+  if (draggedItems && !(config.canDrop?.(draggedItems, target) ?? true)) {
+    return false;
+  }
+
+  if (
+    !draggedItems &&
+    dataTransfer &&
+    !config.canDropForeignDragObject?.(dataTransfer, target)
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+const getDropTargetPosition = (
+  offset: number,
+  topLinePercentage: number,
+  bottomLinePercentage: number
+) => {
+  if (offset < topLinePercentage) {
+    return DropTargetPosition.Top;
+  }
+  if (offset > bottomLinePercentage) {
+    return DropTargetPosition.Bottom;
+  }
+  return DropTargetPosition.Item;
+};
+
+export const getDropTarget = (
+  e: any,
+  item: ItemInstance<any>,
+  tree: TreeInstance<any>,
+  canDropInbetween = tree.getConfig().canDropInbetween
+): DropTarget<any> => {
+  const config = tree.getConfig();
+  const draggedItems = tree.getState().dnd?.draggedItems ?? [];
+  const itemTarget = { item, childIndex: null, insertionIndex: null };
+  const parentTarget = {
+    item: item.getParent(),
+    childIndex: null,
+    insertionIndex: null,
+  };
+
+  if (!canDropInbetween) {
+    if (!canDrop(e.dataTransfer, parentTarget, tree)) {
+      return getDropTarget(e, item.getParent(), tree, false);
+    }
+    return itemTarget;
+  }
+
+  const canDropInside = canDrop(e.dataTransfer, itemTarget, tree);
+
+  const offset = getDropOffset(e, item);
+
+  const pos = canDropInside
+    ? getDropTargetPosition(
+        offset,
+        config.topLinePercentage ?? 0.3,
+        config.bottomLinePercentage ?? 0.7
+      )
+    : getDropTargetPosition(offset, 0.5, 0.5);
+
+  if (pos === DropTargetPosition.Item) {
+    return itemTarget;
+  }
+
+  if (!canDrop(e.dataTransfer, parentTarget, tree)) {
+    return getDropTarget(e, item.getParent(), tree, false);
+  }
+
+  const childIndex =
+    item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1);
+
+  const numberOfDragItemsBeforeTarget = item
+    .getParent()
+    .getChildren()
+    .slice(0, childIndex)
+    .reduce(
+      (counter, child) =>
+        child && draggedItems?.some((i) => i.getId() === child.getId())
+          ? ++counter
+          : counter,
+      0
+    );
+
+  return {
+    item: item.getParent(),
+    childIndex,
+    // TODO performance could be improved by computing this only when dragcode changed
+    insertionIndex: childIndex - numberOfDragItemsBeforeTarget,
+  };
+};

package/src/features/expand-all/feature.ts

@@ -0,0 +1,63 @@
+import { FeatureImplementation } from "../../types/core";
+import { ExpandAllFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
+import { poll } from "../../utils";
+
+export const expandAllFeature: FeatureImplementation<
+  any,
+  ExpandAllFeatureDef,
+  | MainFeatureDef
+  | TreeFeatureDef<any>
+  | SyncDataLoaderFeatureDef<any>
+  | ExpandAllFeatureDef
+> = {
+  key: "expand-all",
+
+  createTreeInstance: (prev, tree) => ({
+    ...prev,
+
+    expandAll: async (cancelToken) => {
+      await Promise.all(
+        tree.getItems().map((item) => item.expandAll(cancelToken))
+      );
+    },
+
+    collapseAll: () => {
+      tree.applySubStateUpdate("expandedItems", []);
+      tree.rebuildTree();
+    },
+  }),
+
+  createItemInstance: (prev, item, tree) => ({
+    ...prev,
+
+    expandAll: async (cancelToken) => {
+      if (cancelToken?.current) {
+        return;
+      }
+      if (!item.isFolder()) {
+        return;
+      }
+
+      item.expand();
+      await poll(() => !tree.getState().loadingItems.includes(item.getId()));
+      await Promise.all(
+        item.getChildren().map(async (child) => {
+          await poll(
+            () => !tree.getState().loadingItems.includes(child.getId())
+          );
+          await child?.expandAll(cancelToken);
+        })
+      );
+    },
+
+    collapseAll: () => {
+      for (const child of item.getChildren()) {
+        child?.collapseAll();
+      }
+      item.collapse();
+    },
+  }),
+};

package/src/features/expand-all/types.ts

@@ -0,0 +1,13 @@
+export type ExpandAllFeatureDef = {
+  state: {};
+  config: {};
+  treeInstance: {
+    expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
+    collapseAll: () => void;
+  };
+  itemInstance: {
+    expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
+    collapseAll: () => void;
+  };
+  hotkeys: never;
+};

package/src/features/hotkeys-core/feature.ts

@@ -0,0 +1,110 @@
+import {
+  FeatureImplementation,
+  HotkeysConfig,
+  TreeInstance,
+} from "../../types/core";
+import {
+  HotkeyConfig,
+  HotkeysCoreDataRef,
+  HotkeysCoreFeatureDef,
+} from "./types";
+import { MainFeatureDef } from "../main/types";
+
+const specialKeys: Record<string, RegExp> = {
+  Letter: /^[a-z]$/,
+  LetterOrNumber: /^[a-z0-9]$/,
+};
+
+const testHotkeyMatch = (
+  pressedKeys: Set<string>,
+  tree: TreeInstance<any>,
+  hotkey: HotkeyConfig<any>
+) => {
+  const supposedKeys = hotkey.hotkey.split("+");
+  const doKeysMatch = supposedKeys.every((key) =>
+    key in specialKeys
+      ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
+      : pressedKeys.has(key)
+  );
+  const isEnabled = !hotkey.isEnabled || hotkey.isEnabled(tree);
+  const equalCounts = pressedKeys.size === supposedKeys.length;
+  return doKeysMatch && isEnabled && equalCounts;
+};
+
+const findHotkeyMatch = (
+  pressedKeys: Set<string>,
+  tree: TreeInstance<any>,
+  config1: HotkeysConfig<any, any>,
+  config2: HotkeysConfig<any, any>
+) => {
+  return Object.entries({ ...config1, ...config2 }).find(([, hotkey]) =>
+    testHotkeyMatch(pressedKeys, tree, hotkey)
+  )?.[0];
+};
+
+export const hotkeysCoreFeature: FeatureImplementation<
+  any,
+  HotkeysCoreFeatureDef<any>,
+  MainFeatureDef | HotkeysCoreFeatureDef<any>
+> = {
+  key: "hotkeys-core",
+
+  onTreeMount: (tree, element) => {
+    const data = tree.getDataRef<HotkeysCoreDataRef>();
+    const keydown = (e: KeyboardEvent) => {
+      data.current.pressedKeys ??= new Set();
+      const newMatch = !data.current.pressedKeys.has(e.key);
+      data.current.pressedKeys.add(e.key);
+
+      const hotkeyName = findHotkeyMatch(
+        data.current.pressedKeys,
+        tree as any,
+        tree.getHotkeyPresets(),
+        tree.getConfig().hotkeys as HotkeysConfig<any>
+      );
+
+      if (!hotkeyName) return;
+
+      const hotkeyConfig: HotkeyConfig<any> = {
+        ...tree.getHotkeyPresets()[hotkeyName],
+        ...tree.getConfig().hotkeys?.[hotkeyName],
+      };
+
+      if (!hotkeyConfig) return;
+      if (
+        !hotkeyConfig.allowWhenInputFocused &&
+        e.target instanceof HTMLInputElement
+      )
+        return;
+      if (!hotkeyConfig.canRepeat && !newMatch) return;
+      if (hotkeyConfig.preventDefault) e.preventDefault();
+
+      hotkeyConfig.handler(e, tree as any);
+    };
+
+    const keyup = (e: KeyboardEvent) => {
+      data.current.pressedKeys ??= new Set();
+      data.current.pressedKeys.delete(e.key);
+    };
+
+    // keyup is registered on document, because some hotkeys shift
+    // the focus away from the tree (i.e. search)
+    // and then we wouldn't get the keyup event anymore
+    element.addEventListener("keydown", keydown);
+    document.addEventListener("keyup", keyup);
+    data.current.keydownHandler = keydown;
+    data.current.keyupHandler = keyup;
+  },
+
+  onTreeUnmount: (tree, element) => {
+    const data = tree.getDataRef<HotkeysCoreDataRef>();
+    if (data.current.keyupHandler) {
+      document.removeEventListener("keyup", data.current.keyupHandler);
+      delete data.current.keyupHandler;
+    }
+    if (data.current.keydownHandler) {
+      element.removeEventListener("keydown", data.current.keydownHandler);
+      delete data.current.keydownHandler;
+    }
+  },
+};

package/src/features/hotkeys-core/types.ts

@@ -0,0 +1,36 @@
+import {
+  CustomHotkeysConfig,
+  ItemInstance,
+  TreeInstance,
+} from "../../types/core";
+
+export interface HotkeyConfig<T> {
+  hotkey: string;
+  canRepeat?: boolean;
+  allowWhenInputFocused?: boolean;
+  isEnabled?: (tree: TreeInstance<T>) => boolean;
+  preventDefault?: boolean;
+  handler: (e: KeyboardEvent, tree: TreeInstance<T>) => void;
+}
+
+export type HotkeysCoreDataRef = {
+  keydownHandler?: (e: KeyboardEvent) => void;
+  keyupHandler?: (e: KeyboardEvent) => void;
+  pressedKeys: Set<string>;
+};
+
+export type HotkeysCoreFeatureDef<T> = {
+  state: {};
+  config: {
+    hotkeys?: CustomHotkeysConfig<T>;
+    onTreeHotkey?: (name: string, element: HTMLElement) => void;
+    onItemHotkey?: (
+      name: string,
+      item: ItemInstance<T>,
+      element: HTMLElement
+    ) => void;
+  };
+  treeInstance: {};
+  itemInstance: {};
+  hotkeys: never;
+};

package/src/features/main/types.ts

@@ -0,0 +1,48 @@
+import {
+  FeatureImplementation,
+  HotkeysConfig,
+  ItemInstance,
+  SetStateFn,
+  TreeConfig,
+  TreeState,
+  Updater,
+} from "../../types/core";
+import { ItemMeta } from "../tree/types";
+
+export type MainFeatureDef<T = any> = {
+  state: {};
+  config: {
+    features?: FeatureImplementation<any>[];
+    initialState?: Partial<TreeState<T>>;
+    state?: Partial<TreeState<T>>;
+    setState?: SetStateFn<TreeState<T>>;
+  };
+  treeInstance: {
+    /** @internal */
+    applySubStateUpdate: <K extends keyof TreeState<any>>(
+      stateName: K,
+      updater: Updater<TreeState<T>[K]>
+    ) => void;
+    setState: SetStateFn<TreeState<T>>;
+    getState: () => TreeState<T>;
+    setConfig: SetStateFn<TreeConfig<T>>;
+    getConfig: () => TreeConfig<T>;
+    getItemInstance: (itemId: string) => ItemInstance<T>;
+    getItems: () => ItemInstance<T>[];
+    registerElement: (element: HTMLElement | null) => void;
+    getElement: () => HTMLElement | undefined | null;
+    /** @internal */
+    getDataRef: <D>() => { current: D };
+    /* @internal */
+    getHotkeyPresets: () => HotkeysConfig<T>;
+    rebuildTree: () => void;
+  };
+  itemInstance: {
+    registerElement: (element: HTMLElement | null) => void;
+    getItemMeta: () => ItemMeta;
+    getElement: () => HTMLElement | undefined | null;
+    /** @internal */
+    getDataRef: <D>() => { current: D };
+  };
+  hotkeys: never;
+};

package/src/features/renaming/feature.ts

@@ -0,0 +1,105 @@
+import { FeatureImplementation, ItemInstance } from "../../types/core";
+import { RenamingFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+import { makeStateUpdater } from "../../utils";
+
+export const renamingFeature: FeatureImplementation<
+  any,
+  RenamingFeatureDef<any>,
+  MainFeatureDef | TreeFeatureDef<any> | RenamingFeatureDef<any>
+> = {
+  key: "renaming",
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setRenamingItem: makeStateUpdater("renamingItem", tree),
+    setRenamingValue: makeStateUpdater("renamingValue", tree),
+    canRename: () => true,
+    ...defaultConfig,
+  }),
+
+  stateHandlerNames: {
+    renamingItem: "setRenamingItem",
+    renamingValue: "setRenamingValue",
+  },
+
+  createTreeInstance: (prev, instance) => ({
+    ...prev,
+
+    startRenamingItem: (itemId) => {
+      const item = instance.getItemInstance(itemId);
+
+      if (!item.canRename()) {
+        return;
+      }
+
+      instance.applySubStateUpdate("renamingItem", itemId);
+      instance.applySubStateUpdate("renamingValue", item.getItemName());
+    },
+
+    getRenamingItem: () => {
+      const itemId = instance.getState().renamingItem;
+      return itemId ? instance.getItemInstance(itemId) : null;
+    },
+
+    getRenamingValue: () => instance.getState().renamingValue || "",
+
+    abortRenaming: () => {
+      instance.applySubStateUpdate("renamingItem", null);
+    },
+
+    completeRenaming: () => {
+      const config = instance.getConfig();
+      const item = instance.getRenamingItem();
+      if (item) {
+        config.onRename?.(item, instance.getState().renamingValue || "");
+      }
+      instance.applySubStateUpdate("renamingItem", null);
+    },
+
+    isRenamingItem: () => !!instance.getState().renamingItem,
+  }),
+
+  createItemInstance: (prev, instance, tree) => ({
+    ...prev,
+    getRenameInputProps: () => ({
+      onBlur: () => tree.abortRenaming(),
+      value: tree.getRenamingValue(),
+      onChange: (e) => {
+        tree.applySubStateUpdate("renamingValue", e.target.value);
+      },
+    }),
+
+    canRename: () =>
+      tree.getConfig().canRename?.(instance as ItemInstance<any>) ?? true,
+
+    isRenaming: () => instance.getId() === tree.getState().renamingItem,
+  }),
+
+  hotkeys: {
+    renameItem: {
+      hotkey: "F2",
+      handler: (e, tree) => {
+        tree.startRenamingItem(tree.getFocusedItem().getId());
+      },
+    },
+
+    abortRenaming: {
+      hotkey: "Escape",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isRenamingItem(),
+      handler: (e, tree) => {
+        tree.abortRenaming();
+      },
+    },
+
+    completeRenaming: {
+      hotkey: "Enter",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isRenamingItem(),
+      handler: (e, tree) => {
+        tree.completeRenaming();
+      },
+    },
+  },
+};

package/src/features/renaming/types.ts

@@ -0,0 +1,28 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+
+export type RenamingFeatureDef<T> = {
+  state: {
+    renamingItem?: string | null;
+    renamingValue?: string;
+  };
+  config: {
+    setRenamingItem?: SetStateFn<string | null>;
+    setRenamingValue?: SetStateFn<string | undefined>;
+    canRename?: (item: ItemInstance<T>) => boolean;
+    onRename?: (item: ItemInstance<T>, value: string) => void;
+  };
+  treeInstance: {
+    startRenamingItem: (itemId: string) => void;
+    getRenamingItem: () => ItemInstance<T> | null;
+    getRenamingValue: () => string;
+    abortRenaming: () => void;
+    completeRenaming: () => void;
+    isRenamingItem: () => boolean;
+  };
+  itemInstance: {
+    getRenameInputProps: () => any;
+    canRename: () => boolean;
+    isRenaming: () => boolean;
+  };
+  hotkeys: "renameItem" | "abortRenaming" | "completeRenaming";
+};

package/src/features/search/feature.ts

@@ -0,0 +1,158 @@
+import { FeatureImplementation } from "../../types/core";
+import { SearchFeatureDataRef, SearchFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+import { makeStateUpdater, memo } from "../../utils";
+
+export const searchFeature: FeatureImplementation<
+  any,
+  SearchFeatureDef<any>,
+  MainFeatureDef | TreeFeatureDef<any> | SearchFeatureDef<any>
+> = {
+  key: "search",
+
+  getInitialState: (initialState) => ({
+    search: null,
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setSearch: makeStateUpdater("search", tree),
+    isSearchMatchingItem: (search, item) =>
+      search.length > 0 &&
+      item.getItemName().toLowerCase().includes(search.toLowerCase()),
+    ...defaultConfig,
+  }),
+
+  stateHandlerNames: {
+    search: "setSearch",
+  },
+
+  createTreeInstance: (prev, instance) => ({
+    ...prev,
+
+    setSearch: (search) => {
+      instance.applySubStateUpdate("search", search);
+      instance
+        .getItems()
+        .find((item) =>
+          instance
+            .getConfig()
+            .isSearchMatchingItem?.(instance.getSearchValue(), item)
+        )
+        ?.setFocused();
+    },
+    openSearch: (initialValue = "") => {
+      instance.setSearch(initialValue);
+      setTimeout(() => {
+        instance
+          .getDataRef<SearchFeatureDataRef>()
+          .current.searchInput?.focus();
+      });
+    },
+    closeSearch: () => {
+      instance.setSearch(null);
+      instance.updateDomFocus();
+    },
+    isSearchOpen: () => instance.getState().search !== null,
+    getSearchValue: () => instance.getState().search || "",
+    registerSearchInputElement: (element) => {
+      const dataRef = instance.getDataRef<SearchFeatureDataRef>();
+      dataRef.current.searchInput = element;
+      if (element && dataRef.current.keydownHandler) {
+        element.addEventListener("keydown", dataRef.current.keydownHandler);
+      }
+    },
+    getSearchInputElement: () =>
+      instance.getDataRef<SearchFeatureDataRef>().current.searchInput ?? null,
+
+    getSearchInputElementProps: () => ({
+      value: instance.getSearchValue(),
+      onChange: (e: any) => instance.setSearch(e.target.value),
+      onBlur: () => instance.closeSearch(),
+    }),
+
+    getSearchMatchingItems: memo(
+      (search, items) =>
+        items.filter(
+          (item) =>
+            search && instance.getConfig().isSearchMatchingItem?.(search, item)
+        ),
+      () => [instance.getSearchValue(), instance.getItems()]
+    ),
+  }),
+
+  createItemInstance: (prev, item, tree) => ({
+    ...prev,
+    isMatchingSearch: () =>
+      tree.getSearchMatchingItems().some((i) => i.getId() === item.getId()),
+  }),
+
+  hotkeys: {
+    openSearch: {
+      hotkey: "LetterOrNumber",
+      preventDefault: true, // TODO make true default
+      isEnabled: (tree) => !tree.isSearchOpen(),
+      handler: (e, tree) => {
+        e.stopPropagation();
+        tree.openSearch(e.key);
+      },
+    },
+
+    closeSearch: {
+      // TODO allow multiple, i.e. Enter
+      hotkey: "Escape",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isSearchOpen(),
+      handler: (e, tree) => {
+        tree.closeSearch();
+      },
+    },
+
+    submitSearch: {
+      hotkey: "Enter",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isSearchOpen(),
+      handler: (e, tree) => {
+        tree.closeSearch();
+        tree.setSelectedItems([tree.getFocusedItem().getId()]);
+      },
+    },
+
+    nextSearchItem: {
+      hotkey: "ArrowDown",
+      allowWhenInputFocused: true,
+      canRepeat: true,
+      isEnabled: (tree) => tree.isSearchOpen(),
+      handler: (e, tree) => {
+        const focusItem = tree
+          .getSearchMatchingItems()
+          .find(
+            (item) =>
+              item.getItemMeta().index >
+              tree.getFocusedItem().getItemMeta().index
+          );
+        focusItem?.setFocused();
+        focusItem?.scrollTo({ block: "nearest", inline: "nearest" });
+      },
+    },
+
+    previousSearchItem: {
+      hotkey: "ArrowUp",
+      allowWhenInputFocused: true,
+      canRepeat: true,
+      isEnabled: (tree) => tree.isSearchOpen(),
+      handler: (e, tree) => {
+        const focusItem = [...tree.getSearchMatchingItems()]
+          .reverse()
+          .find(
+            (item) =>
+              item.getItemMeta().index <
+              tree.getFocusedItem().getItemMeta().index
+          );
+        focusItem?.setFocused();
+        focusItem?.scrollTo({ block: "nearest", inline: "nearest" });
+      },
+    },
+  },
+};