@headless-tree/core 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @headless-tree/core
+
+## 0.0.3
+
+### Patch Changes
+
+- 6460368: tree shaking
+
+## 0.0.2
+
+### Patch Changes
+
+- 05e24de: release test

package/lib/{features → cjs/features}/drag-and-drop/feature.js

@@ -95,50 +95,4 @@ exports.dragAndDropFeature = {
             var _a, _b;
             return ((_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggingOverItem) === null || _b === void 0 ? void 0 : _b.getId()) === item.getId();
         } })),
-    hotkeys: {
-        startDnd: {
-            hotkey: "Control+Alt+d",
-            handler: (e, tree) => {
-                console.log("DRAG");
-                tree.getFocusedItem().getProps().onDragStart(e);
-            },
-        },
-        cancelDnd: {
-            hotkey: "Escape",
-            isEnabled: (tree) => !!tree.getState().dnd,
-            handler: (e, tree) => {
-                var _a, _b;
-                (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, null);
-            },
-        },
-        completeDnd: {
-            hotkey: "Enter",
-            isEnabled: (tree) => !!tree.getState().dnd,
-            handler: (e, tree) => {
-                console.log("DROP");
-            },
-        },
-        dndDown: {
-            preventDefault: true,
-            hotkey: "ArrowDown",
-            isEnabled: (tree) => !!tree.getState().dnd,
-            handler: (e, tree) => {
-                var _a, _b;
-                const target = (0, utils_1.searchDropTarget)(tree, false);
-                console.log("Down", target);
-                (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target !== null && target !== void 0 ? target : undefined })));
-            },
-        },
-        dndUp: {
-            preventDefault: true,
-            hotkey: "ArrowUp",
-            isEnabled: (tree) => !!tree.getState().dnd,
-            handler: (e, tree) => {
-                var _a, _b;
-                const target = (0, utils_1.searchDropTarget)(tree, true);
-                console.log("Up", target);
-                (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target !== null && target !== void 0 ? target : undefined })));
-            },
-        },
-    },
 };

package/lib/{features → cjs/features}/drag-and-drop/types.d.ts

@@ -45,5 +45,5 @@ export type DragAndDropFeatureDef<T> = {
         isDropTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
     };
-    hotkeys: "startDnd" | "completeDnd" | "cancelDnd" | "dndUp" | "dndDown";
+    hotkeys: never;
 };

package/lib/{features → cjs/features}/drag-and-drop/utils.d.ts

@@ -4,4 +4,3 @@ export declare const getDragCode: ({ item, childIndex }: DropTarget<any>) => str
 export declare const getDropOffset: (e: any, item: ItemInstance<any>) => number;
 export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
 export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => DropTarget<any>;
-export declare const searchDropTarget: (tree: TreeInstance<any>, upwards?: boolean) => DropTarget<any> | null | undefined;

package/lib/{features → cjs/features}/drag-and-drop/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.searchDropTarget = exports.getDropTarget = exports.canDrop = exports.getDropOffset = exports.getDragCode = void 0;
+exports.getDropTarget = exports.canDrop = exports.getDropOffset = exports.getDragCode = void 0;
 const types_1 = require("./types");
 const getDragCode = ({ item, childIndex }) => `${item.getId()}__${childIndex !== null && childIndex !== void 0 ? childIndex : "none"}`;
 exports.getDragCode = getDragCode;
@@ -60,62 +60,3 @@ const getDropTarget = (e, item, tree) => {
     };
 };
 exports.getDropTarget = getDropTarget;
-const searchDropTarget = (tree, upwards = false) => {
-    const state = tree.getState().dnd;
-    console.log("!", state);
-    if (!state || !state.draggingOverItem)
-        return null;
-    let currentItem = state.draggingOverItem;
-    while (currentItem) {
-        // const targetAbove: DropTarget<any> = {
-        //   item: currentItem.getParent(),
-        //   childIndex: currentItem.getIndexInParent() + (upwards ? -1 : 1),
-        // };
-        // if (canDrop(null, targetAbove, tree)) {
-        //   return targetAbove;
-        // }
-        const itemTarget = {
-            item: currentItem,
-            childIndex: null,
-        };
-        if ((0, exports.canDrop)(null, itemTarget, tree)) {
-            return itemTarget;
-        }
-        currentItem = upwards
-            ? currentItem.getItemAbove()
-            : currentItem.getItemBelow();
-    }
-};
-exports.searchDropTarget = searchDropTarget;
-/*
-
-export const searchDropTarget = (
-  tree: TreeInstance<any>,
-  backwards = false,
-  target = tree.getState().dnd?.dragTarget
-) => {
-  const state = tree.getState().dnd;
-  if (!state) return null;
-  if (target && canDrop(null, target, tree)) return target;
-
-  if (target?.childIndex && target?.childIndex > 0 && !backwards) {
-    return searchDropTarget(tree, backwards, {
-      ...target,
-      childIndex: target.childIndex - 1,
-    });
-  }
-
-  if (
-    target?.childIndex &&
-    target?.childIndex < target.item.getChildren().length - 1 &&
-    backwards
-  ) {
-    return searchDropTarget(tree, backwards, {
-      ...target,
-      childIndex: target.childIndex + 1,
-    });
-  }
-
-
-};
-*/

package/lib/{features → cjs/features}/hotkeys-core/feature.js

@@ -29,7 +29,6 @@ exports.hotkeysCoreFeature = {
             (_a = (_c = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_c.pressedKeys = new Set());
             const newMatch = !data.current.pressedKeys.has(e.key);
             data.current.pressedKeys.add(e.key);
-            console.log(data.current.pressedKeys);
             const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
             if (!hotkeyName)
                 return;

package/lib/{features → cjs/features}/tree/feature.js

@@ -199,7 +199,6 @@ exports.treeFeature = {
         focusFirstItem: {
             hotkey: "Home",
             handler: (e, tree) => {
-                console.log("home", tree.getItems()[0], tree.getItems());
                 tree.focusItem(tree.getItems()[0].getId());
                 tree.updateDomFocus();
             },
@@ -207,7 +206,6 @@ exports.treeFeature = {
         focusLastItem: {
             hotkey: "End",
             handler: (e, tree) => {
-                console.log("end");
                 tree.focusItem(tree.getItems()[tree.getItems().length - 1].getId());
                 tree.updateDomFocus();
             },

package/lib/esm/core/create-tree.d.ts

@@ -0,0 +1,2 @@
+import { TreeConfig, TreeInstance } from "../types/core";
+export declare const createTree: <T>(initialConfig: TreeConfig<T>) => TreeInstance<T>;

package/lib/esm/core/create-tree.js

@@ -0,0 +1,112 @@
+import { treeFeature } from "../features/tree/feature";
+const buildItemInstance = (features, tree, itemId) => {
+    var _a, _b;
+    const itemInstance = {};
+    for (const feature of features) {
+        Object.assign(itemInstance, (_b = (_a = feature.createItemInstance) === null || _a === void 0 ? void 0 : _a.call(feature, Object.assign({}, itemInstance), itemInstance, tree, itemId)) !== null && _b !== void 0 ? _b : {});
+    }
+    return itemInstance;
+};
+export const createTree = (initialConfig) => {
+    var _a, _b, _c, _d, _e;
+    const treeInstance = {};
+    const additionalFeatures = [treeFeature, ...((_a = initialConfig.features) !== null && _a !== void 0 ? _a : [])];
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = initialConfig.state) !== null && _b !== void 0 ? _b : {});
+    let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
+    let treeElement;
+    const treeDataRef = { current: {} };
+    const itemInstancesMap = {};
+    let itemInstances = [];
+    const itemElementsMap = {};
+    const itemDataRefs = {};
+    let itemMetaMap = {};
+    const hotkeyPresets = {};
+    const rebuildItemMeta = (main) => {
+        // TODO can we find a way to only run this for the changed substructure?
+        itemInstances = [];
+        itemMetaMap = {};
+        const rootInstance = buildItemInstance([main, ...additionalFeatures], treeInstance, config.rootItemId);
+        itemInstancesMap[config.rootItemId] = rootInstance;
+        itemMetaMap[config.rootItemId] = {
+            itemId: config.rootItemId,
+            index: -1,
+            parentId: null,
+            level: -1,
+            posInSet: 0,
+            setSize: 1,
+        };
+        for (const item of treeInstance.getItemsMeta()) {
+            itemMetaMap[item.itemId] = item;
+            if (!itemInstancesMap[item.itemId]) {
+                const instance = buildItemInstance([main, ...additionalFeatures], treeInstance, item.itemId);
+                itemInstancesMap[item.itemId] = instance;
+                itemInstances.push(instance);
+            }
+            else {
+                itemInstances.push(itemInstancesMap[item.itemId]);
+            }
+        }
+        console.log("REBUILT");
+    };
+    const eachFeature = (fn) => {
+        for (const feature of additionalFeatures) {
+            fn(feature);
+        }
+    };
+    const mainFeature = {
+        key: "main",
+        createTreeInstance: (prev) => (Object.assign(Object.assign({}, prev), { getState: () => state, setState: (updater) => {
+                var _a;
+                state = typeof updater === "function" ? updater(state) : updater;
+                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
+                eachFeature((feature) => { var _a; return (_a = feature.setState) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+                eachFeature((feature) => { var _a; return (_a = feature.onStateOrConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+            }, rebuildTree: () => {
+                var _a;
+                rebuildItemMeta(mainFeature);
+                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
+            }, getConfig: () => config, setConfig: (updater) => {
+                config = typeof updater === "function" ? updater(config) : updater;
+                if (config.state) {
+                    state = Object.assign(Object.assign({}, state), config.state);
+                    eachFeature((feature) => { var _a; return (_a = feature.setState) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+                }
+                eachFeature((feature) => { var _a; return (_a = feature.onConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+                eachFeature((feature) => { var _a; return (_a = feature.onStateOrConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+            }, getItemInstance: (itemId) => itemInstancesMap[itemId], getItems: () => itemInstances, registerElement: (element) => {
+                if (treeElement === element) {
+                    return;
+                }
+                if (treeElement && !element) {
+                    eachFeature((feature) => { var _a; return (_a = feature.onTreeUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance, treeElement); });
+                }
+                else if (!treeElement && element) {
+                    eachFeature((feature) => { var _a; return (_a = feature.onTreeMount) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance, element); });
+                }
+                treeElement = element;
+            }, getElement: () => treeElement, getDataRef: () => treeDataRef, getHotkeyPresets: () => hotkeyPresets })),
+        createItemInstance: (prev, instance, _, itemId) => (Object.assign(Object.assign({}, prev), { registerElement: (element) => {
+                if (itemElementsMap[itemId] === element) {
+                    return;
+                }
+                const oldElement = itemElementsMap[itemId];
+                if (oldElement && !element) {
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, oldElement, treeInstance); });
+                }
+                else if (!oldElement && element) {
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, element, treeInstance); });
+                }
+                itemElementsMap[itemId] = element;
+            }, getElement: () => itemElementsMap[itemId], 
+            // eslint-disable-next-line no-return-assign
+            getDataRef: () => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); }, getItemMeta: () => itemMetaMap[itemId] })),
+    };
+    // todo sort features
+    const features = [mainFeature, ...additionalFeatures];
+    for (const feature of features) {
+        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
+        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
+    }
+    rebuildItemMeta(mainFeature);
+    return treeInstance;
+};

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,7 @@
+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

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

package/lib/esm/features/async-data-loader/feature.d.ts

@@ -0,0 +1,5 @@
+import { FeatureImplementation } from "../../types/core";
+import { AsyncDataLoaderFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+export declare const asyncDataLoaderFeature: FeatureImplementation<any, AsyncDataLoaderFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | AsyncDataLoaderFeatureDef<any>>;

package/lib/esm/features/async-data-loader/feature.js

@@ -0,0 +1,77 @@
+import { makeStateUpdater } from "../../utils";
+export const asyncDataLoaderFeature = {
+    key: "async-data-loader",
+    dependingFeatures: ["main"],
+    getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: makeStateUpdater("loadingItems", tree) }, defaultConfig)),
+    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => {
+            var _a, _b, _c, _d, _e, _f;
+            var _g, _h;
+            const config = instance.getConfig();
+            const dataRef = instance.getDataRef();
+            (_a = (_g = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_g.itemData = {});
+            (_b = (_h = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_h.childrenIds = {});
+            if (dataRef.current.itemData[itemId]) {
+                return dataRef.current.itemData[itemId];
+            }
+            if (!instance.getState().loadingItems.includes(itemId)) {
+                (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => [...loadingItems, itemId]);
+                (_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getItem(itemId).then((item) => {
+                    var _a, _b;
+                    dataRef.current.itemData[itemId] = item;
+                    (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
+                    (_b = config.setLoadingItems) === null || _b === void 0 ? void 0 : _b.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                });
+            }
+            return (_f = (_e = config.createLoadingItemData) === null || _e === void 0 ? void 0 : _e.call(config)) !== null && _f !== void 0 ? _f : null;
+        }, retrieveChildrenIds: (itemId) => {
+            var _a, _b, _c, _d, _e, _f;
+            var _g, _h;
+            const config = instance.getConfig();
+            const dataRef = instance.getDataRef();
+            (_a = (_g = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_g.itemData = {});
+            (_b = (_h = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_h.childrenIds = {});
+            if (dataRef.current.childrenIds[itemId]) {
+                return dataRef.current.childrenIds[itemId];
+            }
+            if (instance.getState().loadingItems.includes(itemId)) {
+                return [];
+            }
+            (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => [...loadingItems, itemId]);
+            if ((_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getChildrenWithData) {
+                (_e = config.asyncDataLoader) === null || _e === void 0 ? void 0 : _e.getChildrenWithData(itemId).then((children) => {
+                    var _a, _b, _c;
+                    for (const { id, data } of children) {
+                        dataRef.current.itemData[id] = data;
+                        (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, id, data);
+                    }
+                    const childrenIds = children.map(({ id }) => id);
+                    dataRef.current.childrenIds[itemId] = childrenIds;
+                    (_b = config.onLoadedChildren) === null || _b === void 0 ? void 0 : _b.call(config, itemId, childrenIds);
+                    (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.rebuildTree();
+                });
+            }
+            else {
+                (_f = config.asyncDataLoader) === null || _f === void 0 ? void 0 : _f.getChildren(itemId).then((childrenIds) => {
+                    var _a, _b;
+                    dataRef.current.childrenIds[itemId] = childrenIds;
+                    (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
+                    (_b = config.setLoadingItems) === null || _b === void 0 ? void 0 : _b.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.rebuildTree();
+                });
+            }
+            return [];
+        }, invalidateItemData: (itemId) => {
+            var _a;
+            const dataRef = instance.getDataRef();
+            (_a = dataRef.current.itemData) === null || _a === void 0 ? true : delete _a[itemId];
+            instance.retrieveItemData(itemId);
+        }, invalidateChildrenIds: (itemId) => {
+            var _a;
+            const dataRef = instance.getDataRef();
+            (_a = dataRef.current.childrenIds) === null || _a === void 0 ? true : delete _a[itemId];
+            instance.retrieveChildrenIds(itemId);
+        } })),
+    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { isLoading: () => tree.getState().loadingItems.includes(item.getItemMeta().itemId), invalidateItemData: () => tree.invalidateItemData(item.getItemMeta().itemId), invalidateChildrenIds: () => tree.invalidateChildrenIds(item.getItemMeta().itemId) })),
+};

package/lib/esm/features/async-data-loader/types.d.ts

@@ -0,0 +1,41 @@
+import { SetStateFn } from "../../types/core";
+import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
+export type AsyncTreeDataLoader<T> = {
+    getItem: (itemId: string) => Promise<T>;
+    getChildren: (itemId: string) => Promise<string[]>;
+    getChildrenWithData?: (itemId: string) => Promise<{
+        id: string;
+        data: T;
+    }[]>;
+};
+export type AsyncDataLoaderRef<T = any> = {
+    itemData: Record<string, T>;
+    childrenIds: Record<string, string[]>;
+};
+/**
+ * @category Async Data Loader/General
+ * */
+export type AsyncDataLoaderFeatureDef<T> = {
+    state: {
+        loadingItems: string[];
+    };
+    config: {
+        rootItemId: string;
+        createLoadingItemData?: () => T;
+        setLoadingItems?: SetStateFn<string[]>;
+        onLoadedItem?: (itemId: string, item: T) => void;
+        onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
+        asyncDataLoader?: AsyncTreeDataLoader<T>;
+    };
+    treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
+        /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
+        invalidateItemData: (itemId: string) => void;
+        invalidateChildrenIds: (itemId: string) => void;
+    };
+    itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
+        invalidateItemData: () => void;
+        invalidateChildrenIds: () => void;
+        isLoading: () => void;
+    };
+    hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
+};

package/lib/esm/features/async-data-loader/types.js

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

package/lib/esm/features/drag-and-drop/feature.d.ts

@@ -0,0 +1,3 @@
+import { FeatureDefs, FeatureImplementation } from "../../types/core";
+import { DragAndDropFeatureDef } from "./types";
+export declare const dragAndDropFeature: FeatureImplementation<any, DragAndDropFeatureDef<any>, FeatureDefs<any>>;

package/lib/esm/features/drag-and-drop/feature.js

@@ -0,0 +1,95 @@
+import { canDrop, getDragCode, getDropTarget } from "./utils";
+import { makeStateUpdater } from "../../utils";
+export const dragAndDropFeature = {
+    key: "dragAndDrop",
+    dependingFeatures: ["main", "tree", "selection"],
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), setDndState: makeStateUpdater("dnd", tree) }, defaultConfig)),
+    createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { getDropTarget: () => {
+            var _a, _b;
+            return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
+        } })),
+    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
+            var _a, _b, _c;
+            return (Object.assign(Object.assign({}, prev.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: (e) => {
+                    var _a, _b, _c, _d, _e;
+                    const selectedItems = tree.getSelectedItems();
+                    const items = selectedItems.includes(item) ? selectedItems : [item];
+                    const config = tree.getConfig();
+                    if (!selectedItems.includes(item)) {
+                        tree.setSelectedItems([item.getItemMeta().itemId]);
+                    }
+                    if (!((_b = (_a = config.canDrag) === null || _a === void 0 ? void 0 : _a.call(config, items)) !== null && _b !== void 0 ? _b : true)) {
+                        e.preventDefault();
+                        return;
+                    }
+                    if (config.createForeignDragObject) {
+                        const { format, data } = config.createForeignDragObject(items);
+                        (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData(format, data);
+                    }
+                    (_e = (_d = tree.getConfig()).setDndState) === null || _e === void 0 ? void 0 : _e.call(_d, {
+                        draggedItems: items,
+                        draggingOverItem: tree.getFocusedItem(),
+                    });
+                }, onDragOver: (e) => {
+                    var _a, _b, _c, _d, _e;
+                    const target = getDropTarget(e, item, tree);
+                    const dataRef = tree.getDataRef();
+                    if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
+                        !((_c = (_b = tree.getConfig()).canDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(_b, e.dataTransfer, target))) {
+                        return;
+                    }
+                    if (!canDrop(e.dataTransfer, target, tree)) {
+                        return;
+                    }
+                    e.preventDefault();
+                    const nextDragCode = getDragCode(target);
+                    if (nextDragCode === dataRef.current.lastDragCode) {
+                        return;
+                    }
+                    dataRef.current.lastDragCode = nextDragCode;
+                    (_e = (_d = tree.getConfig()).setDndState) === null || _e === void 0 ? void 0 : _e.call(_d, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
+                }, onDragLeave: () => {
+                    var _a, _b;
+                    const dataRef = tree.getDataRef();
+                    dataRef.current.lastDragCode = "no-drag";
+                    (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
+                }, onDrop: (e) => {
+                    var _a, _b, _c, _d, _e;
+                    const dataRef = tree.getDataRef();
+                    const target = getDropTarget(e, item, tree);
+                    if (!canDrop(e.dataTransfer, target, tree)) {
+                        return;
+                    }
+                    e.preventDefault();
+                    const config = tree.getConfig();
+                    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+                    dataRef.current.lastDragCode = undefined;
+                    (_c = (_b = tree.getConfig()).setDndState) === null || _c === void 0 ? void 0 : _c.call(_b, null);
+                    if (draggedItems) {
+                        (_d = config.onDrop) === null || _d === void 0 ? void 0 : _d.call(config, draggedItems, target);
+                    }
+                    else {
+                        (_e = config.onDropForeignDragObject) === null || _e === void 0 ? void 0 : _e.call(config, e.dataTransfer, target);
+                    }
+                    // TODO rebuild tree?
+                } }));
+        }, isDropTarget: () => {
+            const target = tree.getDropTarget();
+            return target ? target.item.getId() === item.getId() : false;
+        }, isDropTargetAbove: () => {
+            const target = tree.getDropTarget();
+            if (!target || target.childIndex === null)
+                return false;
+            const targetIndex = target.item.getItemMeta().index;
+            return targetIndex + target.childIndex + 1 === item.getItemMeta().index;
+        }, isDropTargetBelow: () => {
+            const target = tree.getDropTarget();
+            if (!target || target.childIndex === null)
+                return false;
+            const targetIndex = target.item.getItemMeta().index;
+            return targetIndex + target.childIndex === item.getItemMeta().index;
+        }, isDraggingOver: () => {
+            var _a, _b;
+            return ((_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggingOverItem) === null || _b === void 0 ? void 0 : _b.getId()) === item.getId();
+        } })),
+};

package/lib/esm/features/drag-and-drop/types.d.ts

@@ -0,0 +1,49 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+export type DndDataRef = {
+    lastDragCode?: string;
+};
+export type DndState<T> = {
+    draggedItems?: ItemInstance<T>[];
+    draggingOverItem?: ItemInstance<T>;
+    dragTarget?: DropTarget<T>;
+};
+export type DropTarget<T> = {
+    item: ItemInstance<T>;
+    childIndex: number | null;
+};
+export declare enum DropTargetPosition {
+    Top = "top",
+    Bottom = "bottom",
+    Item = "item"
+}
+export type DragAndDropFeatureDef<T> = {
+    state: {
+        dnd?: DndState<T> | null;
+    };
+    config: {
+        setDndState?: SetStateFn<DndState<T> | null>;
+        topLinePercentage?: number;
+        bottomLinePercentage?: number;
+        canDropInbetween?: boolean;
+        isItemDraggable?: (item: ItemInstance<T>) => boolean;
+        canDrag?: (items: ItemInstance<T>[]) => boolean;
+        canDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => boolean;
+        createForeignDragObject?: (items: ItemInstance<T>[]) => {
+            format: string;
+            data: any;
+        };
+        canDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => boolean;
+        onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void;
+        onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => void;
+    };
+    treeInstance: {
+        getDropTarget: () => DropTarget<T> | null;
+    };
+    itemInstance: {
+        isDropTarget: () => boolean;
+        isDropTargetAbove: () => boolean;
+        isDropTargetBelow: () => boolean;
+        isDraggingOver: () => boolean;
+    };
+    hotkeys: never;
+};

package/lib/esm/features/drag-and-drop/types.js

@@ -0,0 +1,6 @@
+export var DropTargetPosition;
+(function (DropTargetPosition) {
+    DropTargetPosition["Top"] = "top";
+    DropTargetPosition["Bottom"] = "bottom";
+    DropTargetPosition["Item"] = "item";
+})(DropTargetPosition || (DropTargetPosition = {}));

package/lib/esm/features/drag-and-drop/utils.d.ts

@@ -0,0 +1,6 @@
+import { ItemInstance, TreeInstance } from "../../types/core";
+import { DropTarget } from "./types";
+export declare const getDragCode: ({ item, childIndex }: DropTarget<any>) => string;
+export declare const getDropOffset: (e: any, item: ItemInstance<any>) => number;
+export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
+export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => DropTarget<any>;