@headless-tree/core 0.0.5 → 0.0.7

package/src/types/core.ts

@@ -128,7 +128,12 @@ export type FeatureImplementation<
   F extends FeatureDef = EmptyFeatureDef
 > = {
   key?: string;
-  dependingFeatures?: string[];
+  deps?: string[];
+  overwrites?: string[];
+
+  stateHandlerNames?: Partial<
+    Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>
+  >;
 
   getInitialState?: (
     initialState: Partial<MergedFeatures<F>["state"]>,
@@ -174,9 +179,5 @@ export type FeatureImplementation<
     tree: MergedFeatures<F>["treeInstance"]
   ) => void;
 
-  setState?: (instance: MergedFeatures<F>["treeInstance"]) => void;
-  onConfigChange?: (instance: MergedFeatures<F>["treeInstance"]) => void;
-  onStateOrConfigChange?: (instance: MergedFeatures<F>["treeInstance"]) => void;
-
   hotkeys?: HotkeysConfig<T, D>;
 };

package/src/utilities/create-on-drop-handler.ts

@@ -0,0 +1,14 @@
+import { ItemInstance } from "../types/core";
+import { DropTarget } from "../features/drag-and-drop/types";
+import { removeItemsFromParents } from "./remove-items-from-parents";
+import { insertItemsAtTarget } from "./insert-items-at-target";
+
+export const createOnDropHandler =
+  <T>(
+    onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void
+  ) =>
+  (items: ItemInstance<T>[], target: DropTarget<T>) => {
+    const itemIds = items.map((item) => item.getId());
+    removeItemsFromParents(items, onChangeChildren);
+    insertItemsAtTarget(itemIds, target, onChangeChildren);
+  };

package/src/utilities/insert-items-at-target.ts

@@ -0,0 +1,30 @@
+import { ItemInstance } from "../types/core";
+import { DropTarget } from "../features/drag-and-drop/types";
+
+export const insertItemsAtTarget = <T>(
+  itemIds: string[],
+  target: DropTarget<T>,
+  onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void
+) => {
+  // add moved items to new common parent, if dropped onto parent
+  if (target.childIndex === null) {
+    onChangeChildren(target.item, [
+      ...target.item.getChildren().map((item) => item.getId()),
+      ...itemIds,
+    ]);
+    // TODO items[0].getTree().rebuildTree();
+    return;
+  }
+
+  // add moved items to new common parent, if dropped between siblings
+  const oldChildren = target.item.getChildren();
+  const newChildren = [
+    ...oldChildren.slice(0, target.insertionIndex).map((item) => item.getId()),
+    ...itemIds,
+    ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
+  ];
+
+  onChangeChildren(target.item, newChildren);
+
+  target.item.getTree().rebuildTree();
+};

package/src/utilities/remove-items-from-parents.ts

@@ -0,0 +1,21 @@
+import { ItemInstance } from "../types/core";
+
+export const removeItemsFromParents = <T>(
+  movedItems: ItemInstance<T>[],
+  onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void
+) => {
+  // TODO bulk sibling changes together
+  for (const item of movedItems) {
+    const siblings = item.getParent()?.getChildren();
+    if (siblings) {
+      onChangeChildren(
+        item.getParent(),
+        siblings
+          .filter((sibling) => sibling.getId() !== item.getId())
+          .map((i) => i.getId())
+      );
+    }
+  }
+
+  movedItems[0].getTree().rebuildTree();
+};

package/src/utils.ts

@@ -1,5 +1,4 @@
-import { ItemInstance, TreeState, Updater } from "./types/core";
-import { DropTarget } from "./features/drag-and-drop/types";
+import { TreeState, Updater } from "./types/core";
 
 export type NoInfer<T> = [T][T extends any ? 0 : never];
 
@@ -53,73 +52,6 @@ export function makeStateUpdater<K extends keyof TreeState<any>>(
   };
 }
 
-export const scrollIntoView = (element: Element | undefined | null) => {
-  if (!element) {
-    return;
-  }
-
-  if ((element as any).scrollIntoViewIfNeeded) {
-    (element as any).scrollIntoViewIfNeeded();
-  } else {
-    const boundingBox = element.getBoundingClientRect();
-    const isElementInViewport =
-      boundingBox.top >= 0 &&
-      boundingBox.left >= 0 &&
-      boundingBox.bottom <=
-        (window.innerHeight || document.documentElement.clientHeight) &&
-      boundingBox.right <=
-        (window.innerWidth || document.documentElement.clientWidth);
-    if (!isElementInViewport) {
-      element.scrollIntoView();
-    }
-  }
-};
-
-export const performItemsMove = <T>(
-  items: ItemInstance<T>[],
-  target: DropTarget<T>,
-  onChangeChildren: (
-    item: ItemInstance<T>,
-    newChildren: ItemInstance<T>[]
-  ) => void
-) => {
-  const numberOfDragItemsBeforeTarget = !target.childIndex
-    ? 0
-    : target.item
-        .getChildren()
-        .slice(0, target.childIndex)
-        .filter((child) => items.some((item) => item.getId() === child.getId()))
-        .length;
-
-  // TODO bulk sibling changes together
-  for (const item of items) {
-    const siblings = item.getParent()?.getChildren();
-    if (siblings) {
-      onChangeChildren(
-        item.getParent(),
-        siblings.filter((sibling) => sibling.getId() !== item.getId())
-      );
-    }
-  }
-
-  if (target.childIndex === null) {
-    onChangeChildren(target.item, [...target.item.getChildren(), ...items]);
-    items[0].getTree().rebuildTree();
-    return;
-  }
-
-  const oldChildren = target.item.getChildren();
-  const newChildren = [
-    ...oldChildren.slice(0, target.childIndex - numberOfDragItemsBeforeTarget),
-    ...items,
-    ...oldChildren.slice(target.childIndex - numberOfDragItemsBeforeTarget),
-  ];
-
-  onChangeChildren(target.item, newChildren);
-
-  items[0].getTree().rebuildTree();
-};
-
 export const poll = (fn: () => boolean, interval = 100, timeout = 1000) =>
   new Promise<void>((resolve) => {
     let clear: ReturnType<typeof setTimeout>;

package/lib/cjs/data-adapters/nested-data-adapter.d.ts

@@ -1,9 +0,0 @@
-import { DataAdapterConfig } from "./types";
-interface NestedDataAdapterProps<T> {
-    rootItem: T;
-    getItemId: (item: T) => string;
-    getChildren: (item: T) => T[] | undefined;
-    changeChildren?: (item: T, children: T[]) => void;
-}
-export declare const nestedDataAdapter: <T = any>(props: NestedDataAdapterProps<T>) => DataAdapterConfig<T>;
-export {};

package/lib/cjs/data-adapters/nested-data-adapter.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.nestedDataAdapter = void 0;
-const utils_1 = require("../utils");
-const createItemMap = (props, item, map = {}) => {
-    var _a;
-    map[props.getItemId(item)] = item;
-    (_a = props.getChildren(item)) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
-        createItemMap(props, child, map);
-    });
-    return map;
-};
-const nestedDataAdapter = (props) => {
-    const itemMap = createItemMap(props, props.rootItem);
-    return {
-        rootItemId: props.getItemId(props.rootItem),
-        dataLoader: {
-            getItem: (itemId) => itemMap[itemId],
-            getChildren: (itemId) => { var _a, _b; return (_b = (_a = props.getChildren(itemMap[itemId])) === null || _a === void 0 ? void 0 : _a.map(props.getItemId)) !== null && _b !== void 0 ? _b : []; },
-        },
-        onDrop: (items, target) => {
-            if (!props.changeChildren) {
-                return;
-            }
-            (0, utils_1.performItemsMove)(items, target, (item, newChildren) => {
-                var _a;
-                (_a = props.changeChildren) === null || _a === void 0 ? void 0 : _a.call(props, item.getItemData(), newChildren.map((child) => child.getItemData()));
-            });
-        },
-    };
-};
-exports.nestedDataAdapter = nestedDataAdapter;

package/lib/cjs/data-adapters/types.d.ts

@@ -1,7 +0,0 @@
-import { DragAndDropFeatureDef } from "../features/drag-and-drop/types";
-import { SyncDataLoaderFeatureDef } from "../features/sync-data-loader/types";
-export type DataAdapterConfig<T> = {
-    rootItemId: SyncDataLoaderFeatureDef<T>["config"]["rootItemId"];
-    dataLoader: SyncDataLoaderFeatureDef<T>["config"]["dataLoader"];
-    onDrop: DragAndDropFeatureDef<T>["config"]["onDrop"];
-};

package/lib/cjs/data-adapters/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/lib/esm/data-adapters/nested-data-adapter.d.ts

@@ -1,9 +0,0 @@
-import { DataAdapterConfig } from "./types";
-interface NestedDataAdapterProps<T> {
-    rootItem: T;
-    getItemId: (item: T) => string;
-    getChildren: (item: T) => T[] | undefined;
-    changeChildren?: (item: T, children: T[]) => void;
-}
-export declare const nestedDataAdapter: <T = any>(props: NestedDataAdapterProps<T>) => DataAdapterConfig<T>;
-export {};

package/lib/esm/data-adapters/nested-data-adapter.js

@@ -1,28 +0,0 @@
-import { performItemsMove } from "../utils";
-const createItemMap = (props, item, map = {}) => {
-    var _a;
-    map[props.getItemId(item)] = item;
-    (_a = props.getChildren(item)) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
-        createItemMap(props, child, map);
-    });
-    return map;
-};
-export const nestedDataAdapter = (props) => {
-    const itemMap = createItemMap(props, props.rootItem);
-    return {
-        rootItemId: props.getItemId(props.rootItem),
-        dataLoader: {
-            getItem: (itemId) => itemMap[itemId],
-            getChildren: (itemId) => { var _a, _b; return (_b = (_a = props.getChildren(itemMap[itemId])) === null || _a === void 0 ? void 0 : _a.map(props.getItemId)) !== null && _b !== void 0 ? _b : []; },
-        },
-        onDrop: (items, target) => {
-            if (!props.changeChildren) {
-                return;
-            }
-            performItemsMove(items, target, (item, newChildren) => {
-                var _a;
-                (_a = props.changeChildren) === null || _a === void 0 ? void 0 : _a.call(props, item.getItemData(), newChildren.map((child) => child.getItemData()));
-            });
-        },
-    };
-};

package/lib/esm/data-adapters/types.d.ts

@@ -1,7 +0,0 @@
-import { DragAndDropFeatureDef } from "../features/drag-and-drop/types";
-import { SyncDataLoaderFeatureDef } from "../features/sync-data-loader/types";
-export type DataAdapterConfig<T> = {
-    rootItemId: SyncDataLoaderFeatureDef<T>["config"]["rootItemId"];
-    dataLoader: SyncDataLoaderFeatureDef<T>["config"]["dataLoader"];
-    onDrop: DragAndDropFeatureDef<T>["config"]["onDrop"];
-};

package/lib/esm/data-adapters/types.js

@@ -1 +0,0 @@
-export {};

package/src/data-adapters/nested-data-adapter.ts

@@ -1,48 +0,0 @@
-import { DataAdapterConfig } from "./types";
-import { ItemInstance } from "../types/core";
-import { DropTarget } from "../features/drag-and-drop/types";
-import { performItemsMove } from "../utils";
-
-interface NestedDataAdapterProps<T> {
-  rootItem: T;
-  getItemId: (item: T) => string;
-  getChildren: (item: T) => T[] | undefined;
-  changeChildren?: (item: T, children: T[]) => void;
-}
-
-const createItemMap = <T>(
-  props: NestedDataAdapterProps<T>,
-  item: T,
-  map: Record<string, T> = {}
-) => {
-  map[props.getItemId(item)] = item;
-  props.getChildren(item)?.forEach((child) => {
-    createItemMap(props, child, map);
-  });
-  return map;
-};
-
-export const nestedDataAdapter = <T = any>(
-  props: NestedDataAdapterProps<T>
-): DataAdapterConfig<T> => {
-  const itemMap = createItemMap(props, props.rootItem);
-  return {
-    rootItemId: props.getItemId(props.rootItem),
-    dataLoader: {
-      getItem: (itemId) => itemMap[itemId],
-      getChildren: (itemId) =>
-        props.getChildren(itemMap[itemId])?.map(props.getItemId) ?? [],
-    },
-    onDrop: (items: ItemInstance<T>[], target: DropTarget<T>) => {
-      if (!props.changeChildren) {
-        return;
-      }
-      performItemsMove(items, target, (item, newChildren) => {
-        props.changeChildren?.(
-          item.getItemData(),
-          newChildren.map((child) => child.getItemData())
-        );
-      });
-    },
-  };
-};

package/src/data-adapters/types.ts

@@ -1,9 +0,0 @@
-import { DragAndDropFeatureDef } from "../features/drag-and-drop/types";
-import { SyncDataLoaderFeatureDef } from "../features/sync-data-loader/types";
-
-export type DataAdapterConfig<T> = {
-  rootItemId: SyncDataLoaderFeatureDef<T>["config"]["rootItemId"];
-  dataLoader: SyncDataLoaderFeatureDef<T>["config"]["dataLoader"];
-  onDrop: DragAndDropFeatureDef<T>["config"]["onDrop"];
-  // TODO onDropForeignDragObject: DragAndDropFeatureDef<T>["config"]["onDropForeignDragObject"];
-};