@cloud-ru/ds-tree 1.0.0

package/dist/cjs/hooks/useSearchableTree.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchableTree = useSearchableTree;
+const react_1 = require("react");
+const helpers_1 = require("../helpers");
+const internalHooks_1 = require("./internalHooks");
+/**
+ * Хук для работы с деревом, поддерживающим поиск и асинхронную подгрузку узлов.
+ *
+ * Возможности:
+ * - хранение актуального дерева и записи элементов (`treeItemsRecord`);
+ * - управление раскрытыми узлами;
+ * - дебаунс-поиск с отменой предыдущего запроса;
+ * - дозагрузка дочерних узлов после поиска или раскрытия.
+ *
+ * @param params Параметры и обработчики для работы с деревом.
+ * @returns Ссылки на состояние дерева, контролы поиска и колбэки для `expand`/`dataLoad`.
+ */
+function useSearchableTree({ initTree, onPreloadNode, onPreloadNodes, onSearch, mapNodeToRecordItem, }) {
+    const tree = (0, internalHooks_1.useRefState)(initTree);
+    const treeItemsRecord = (0, internalHooks_1.useRefState)({});
+    const expandedNodes = (0, internalHooks_1.useRefState)([]);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const debouncedSearch = (0, internalHooks_1.useDebounceValue)(search, 500);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    // Актуальный запрос поиска. Он же маркер «этот вызов ещё не вытеснен следующим»:
+    // после каждого await сверяемся по идентичности, а не по отдельному флагу отмены.
+    const searchAbortControllerRef = (0, react_1.useRef)(null);
+    const buildTreeItemsRecord = (0, react_1.useCallback)((nodes) => {
+        const record = {};
+        (0, helpers_1.traverse)(nodes, node => {
+            record[node.id] = mapNodeToRecordItem(node);
+        });
+        return record;
+    }, [mapNodeToRecordItem]);
+    const onExpand = (0, react_1.useCallback)((nodes) => {
+        expandedNodes.current = nodes;
+    }, [expandedNodes]);
+    const onDataLoad = (0, react_1.useCallback)(async (node) => {
+        const preloadedChildren = await onPreloadNode(node);
+        const updatedTree = (0, helpers_1.updateTreeNode)(tree.current, node.id, { nested: preloadedChildren });
+        tree.current = updatedTree;
+        const newTreeItemsRecord = { ...treeItemsRecord.current };
+        (0, helpers_1.traverse)(preloadedChildren, child => {
+            newTreeItemsRecord[child.id] = mapNodeToRecordItem(child);
+        });
+        treeItemsRecord.current = newTreeItemsRecord;
+        return { preloadedChildren, updatedTree, newTreeItemsRecord };
+    }, [mapNodeToRecordItem, onPreloadNode, tree, treeItemsRecord]);
+    const handleSearch = (0, react_1.useCallback)(async (searchQuery) => {
+        searchAbortControllerRef.current?.abort();
+        setLoading(true);
+        const abortController = new AbortController();
+        searchAbortControllerRef.current = abortController;
+        try {
+            const { tree: searchedTree, needPreloadNodes } = await onSearch({ search: searchQuery, expandedNodes: expandedNodes.current }, abortController.signal);
+            if (!abortController.signal.aborted) {
+                tree.current = searchedTree;
+                treeItemsRecord.current = buildTreeItemsRecord(searchedTree);
+                const expandedSet = new Set(expandedNodes.current);
+                const toPreloadExpandableNodes = (0, helpers_1.collectEmptyNestedNodesInExpanded)(searchedTree, expandedSet);
+                const collectedNodesForPreload = Array.from(new Set([...toPreloadExpandableNodes.map(node => node.id), ...needPreloadNodes]));
+                if (!collectedNodesForPreload.length) {
+                    return;
+                }
+                const preloadedNodes = await onPreloadNodes(collectedNodesForPreload, abortController.signal);
+                if (searchAbortControllerRef.current !== abortController) {
+                    return;
+                }
+                let tmpTree = [...searchedTree];
+                for (const [nodeId, children] of Object.entries(preloadedNodes)) {
+                    tmpTree = (0, helpers_1.updateTreeNode)(tmpTree, nodeId, { nested: children });
+                }
+                tree.current = tmpTree;
+                treeItemsRecord.current = buildTreeItemsRecord(tmpTree);
+            }
+        }
+        catch (error) {
+            // Прерванный запрос — штатный путь: следующий ввод уже вытеснил этот вызов.
+            if (!abortController.signal.aborted) {
+                throw error;
+            }
+        }
+        finally {
+            if (searchAbortControllerRef.current === abortController) {
+                setLoading(false);
+                searchAbortControllerRef.current = null;
+            }
+        }
+    }, [buildTreeItemsRecord, expandedNodes, onPreloadNodes, onSearch, tree, treeItemsRecord]);
+    (0, internalHooks_1.useDidUpdate)(() => {
+        handleSearch(debouncedSearch);
+    }, [debouncedSearch, handleSearch]);
+    (0, react_1.useEffect)(() => {
+        tree.current = initTree;
+        treeItemsRecord.current = buildTreeItemsRecord(initTree);
+    }, [buildTreeItemsRecord, initTree, tree, treeItemsRecord]);
+    (0, react_1.useEffect)(() => () => {
+        searchAbortControllerRef.current?.abort();
+    }, []);
+    return {
+        tree,
+        expandedNodes,
+        loading,
+        treeItemsRecord,
+        search: {
+            value: search,
+            onChange: setSearch,
+        },
+        onExpand,
+        onDataLoad,
+    };
+}

package/dist/cjs/hooks/useTreeMultiSelection.d.ts

@@ -0,0 +1,33 @@
+import { PreloadNodeHandler, SelectHandler, TreeNodeProps } from '../types';
+/**
+ * Параметры {@link useTreeMultiSelection}.
+ *
+ * @typeParam TTreeNode — тип узла дерева.
+ */
+type UseTreeMultiSelectionParams<TTreeNode extends TreeNodeProps> = {
+    /**
+     * Подгрузка дочерних узлов, если у узла есть `nested`, но массив пуст (ленивая загрузка перед выбором).
+     */
+    onDataLoad: PreloadNodeHandler<TTreeNode>;
+    /** Логика мультивыбора: по клику возвращает, какие id добавить и снять. */
+    onSelect: SelectHandler;
+    /** Controlled: текущие выбранные id; без пропа — внутреннее состояние хука. */
+    selected?: string[];
+    /** Вызывается при изменении набора выбранных id (controlled-сценарий). */
+    onChangeSelected?: (newSelected: string[]) => void;
+};
+/**
+ * Хук мультивыбора для дерева.
+ *
+ * Выполняет пересчет выбранных id после клика по узлу, поддерживает
+ * controlled/uncontrolled режим (`selected` + `onChangeSelected`) и при необходимости
+ * подгружает детей узла перед вычислением итогового выбора.
+ *
+ * @param params Параметры управления выбором и подгрузкой данных.
+ * @returns Текущий список выбранных id и обработчик выбора узла.
+ */
+export declare function useTreeMultiSelection<TTreeNode extends TreeNodeProps>({ onDataLoad, onSelect: onSelectProp, selected, onChangeSelected, }: UseTreeMultiSelectionParams<TTreeNode>): {
+    selected: string[];
+    onSelect: (selectedKeys: string[], node: TreeNodeProps) => Promise<void>;
+};
+export {};

package/dist/cjs/hooks/useTreeMultiSelection.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeMultiSelection = useTreeMultiSelection;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+/**
+ * Хук мультивыбора для дерева.
+ *
+ * Выполняет пересчет выбранных id после клика по узлу, поддерживает
+ * controlled/uncontrolled режим (`selected` + `onChangeSelected`) и при необходимости
+ * подгружает детей узла перед вычислением итогового выбора.
+ *
+ * @param params Параметры управления выбором и подгрузкой данных.
+ * @returns Текущий список выбранных id и обработчик выбора узла.
+ */
+function useTreeMultiSelection({ onDataLoad, onSelect: onSelectProp, selected, onChangeSelected, }) {
+    const [selectedIds = [], setSelectedIds] = (0, utils_1.useValueControl)({
+        value: selected,
+        defaultValue: [],
+        onChange: onChangeSelected,
+    });
+    const onSelect = (0, react_1.useCallback)(async (selectedKeys, node) => {
+        const isSelected = selectedKeys.includes(node.id);
+        const clonedNode = { ...node };
+        if (node.nested && !node.nested.length) {
+            const { preloadedChildren } = await onDataLoad(node);
+            clonedNode.nested = preloadedChildren;
+        }
+        const { added, removed } = onSelectProp({ selectedKeys, node: clonedNode, isSelected });
+        const updatedSelectedIds = (0, utils_1.applySelectionDiff)(selectedIds, added, removed);
+        setSelectedIds(updatedSelectedIds);
+    }, [onDataLoad, onSelectProp, selectedIds, setSelectedIds]);
+    return {
+        selected: selectedIds,
+        onSelect,
+    };
+}

package/dist/cjs/index.d.ts

@@ -0,0 +1,17 @@
+export * from './components';
+export * from './constants';
+export { checkNestedNodesSelection } from './helpers/checkNestedNodesSelection';
+export { collectEmptyNestedNodesInExpanded } from './helpers/collectEmptyNestedNodesInExpanded';
+export { collectIds } from './helpers/collectIds';
+export { extractTreeNodeTitle } from './helpers/extractTreeNodeTitle';
+export { findAllChildNodeIds } from './helpers/findAllChildNodeIds';
+export { findAllExpandedChildNodeIds } from './helpers/findAllExpandedChildNodeIds';
+export { getSearchedTreeItems } from './helpers/getSearchedTreeItems';
+export { getSearchedTreeNodeById } from './helpers/getSearchedTreeNodeById';
+export { lookupTreeForSelectedNodes } from './helpers/lookupTreeForSelectedNodes';
+export { sortTreeItemsByTitle } from './helpers/sortTreeItemsByTitle';
+export { traverse } from './helpers/traverse';
+export { traverseWithTarget } from './helpers/traverseWithTarget';
+export { updateTreeNode } from './helpers/updateTreeNode';
+export * from './hooks';
+export * from './types';

package/dist/cjs/index.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateTreeNode = exports.traverseWithTarget = exports.traverse = exports.sortTreeItemsByTitle = exports.lookupTreeForSelectedNodes = exports.getSearchedTreeNodeById = exports.getSearchedTreeItems = exports.findAllExpandedChildNodeIds = exports.findAllChildNodeIds = exports.extractTreeNodeTitle = exports.collectIds = exports.collectEmptyNestedNodesInExpanded = exports.checkNestedNodesSelection = void 0;
+__exportStar(require("./components"), exports);
+__exportStar(require("./constants"), exports);
+var checkNestedNodesSelection_1 = require("./helpers/checkNestedNodesSelection");
+Object.defineProperty(exports, "checkNestedNodesSelection", { enumerable: true, get: function () { return checkNestedNodesSelection_1.checkNestedNodesSelection; } });
+var collectEmptyNestedNodesInExpanded_1 = require("./helpers/collectEmptyNestedNodesInExpanded");
+Object.defineProperty(exports, "collectEmptyNestedNodesInExpanded", { enumerable: true, get: function () { return collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded; } });
+var collectIds_1 = require("./helpers/collectIds");
+Object.defineProperty(exports, "collectIds", { enumerable: true, get: function () { return collectIds_1.collectIds; } });
+var extractTreeNodeTitle_1 = require("./helpers/extractTreeNodeTitle");
+Object.defineProperty(exports, "extractTreeNodeTitle", { enumerable: true, get: function () { return extractTreeNodeTitle_1.extractTreeNodeTitle; } });
+var findAllChildNodeIds_1 = require("./helpers/findAllChildNodeIds");
+Object.defineProperty(exports, "findAllChildNodeIds", { enumerable: true, get: function () { return findAllChildNodeIds_1.findAllChildNodeIds; } });
+var findAllExpandedChildNodeIds_1 = require("./helpers/findAllExpandedChildNodeIds");
+Object.defineProperty(exports, "findAllExpandedChildNodeIds", { enumerable: true, get: function () { return findAllExpandedChildNodeIds_1.findAllExpandedChildNodeIds; } });
+var getSearchedTreeItems_1 = require("./helpers/getSearchedTreeItems");
+Object.defineProperty(exports, "getSearchedTreeItems", { enumerable: true, get: function () { return getSearchedTreeItems_1.getSearchedTreeItems; } });
+var getSearchedTreeNodeById_1 = require("./helpers/getSearchedTreeNodeById");
+Object.defineProperty(exports, "getSearchedTreeNodeById", { enumerable: true, get: function () { return getSearchedTreeNodeById_1.getSearchedTreeNodeById; } });
+var lookupTreeForSelectedNodes_1 = require("./helpers/lookupTreeForSelectedNodes");
+Object.defineProperty(exports, "lookupTreeForSelectedNodes", { enumerable: true, get: function () { return lookupTreeForSelectedNodes_1.lookupTreeForSelectedNodes; } });
+var sortTreeItemsByTitle_1 = require("./helpers/sortTreeItemsByTitle");
+Object.defineProperty(exports, "sortTreeItemsByTitle", { enumerable: true, get: function () { return sortTreeItemsByTitle_1.sortTreeItemsByTitle; } });
+var traverse_1 = require("./helpers/traverse");
+Object.defineProperty(exports, "traverse", { enumerable: true, get: function () { return traverse_1.traverse; } });
+var traverseWithTarget_1 = require("./helpers/traverseWithTarget");
+Object.defineProperty(exports, "traverseWithTarget", { enumerable: true, get: function () { return traverseWithTarget_1.traverseWithTarget; } });
+var updateTreeNode_1 = require("./helpers/updateTreeNode");
+Object.defineProperty(exports, "updateTreeNode", { enumerable: true, get: function () { return updateTreeNode_1.updateTreeNode; } });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}