@snack-uikit/tree 0.10.1 → 0.10.2-preview-13f87e77.0

package/src/helpers/__tests__/setChildrenOfTreeNode.spec.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+
+import type { TreeNodeProps } from '../../types';
+import { setChildrenOfTreeNode } from '../setChildrenOfTreeNode';
+
+const node = (id: string, nested?: { id: string; title: string }[]) => ({
+  id,
+  title: id,
+  ...(nested !== undefined && { nested: nested.map(n => ({ ...n, title: n.id })) }),
+});
+
+describe('setChildrenOfTreeNode', () => {
+  it('replaces nested for root-level node', () => {
+    const tree = [node('a', [{ id: 'a1', title: 'a1' }]), node('b', [{ id: 'b1', title: 'b1' }])];
+    const children = [node('new1'), node('new2')];
+    const result = setChildrenOfTreeNode(tree, 'b', children);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toMatchObject({ id: 'a', nested: [{ id: 'a1' }] });
+    expect(result[1]).toMatchObject({ id: 'b', nested: [{ id: 'new1' }, { id: 'new2' }] });
+  });
+
+  it('replaces nested for deeply nested node', () => {
+    const childWithNested = node('child');
+    (childWithNested as { nested: { id: string; title: string }[] }).nested = [{ id: 'grand', title: 'grand' }];
+    const tree = [node('root', [childWithNested])];
+    const children = [node('replacement')];
+    const result = setChildrenOfTreeNode(tree, 'child', children);
+
+    const root = result[0] as TreeNodeProps & { nested: (TreeNodeProps & { nested: TreeNodeProps[] })[] };
+    expect(root.nested).toHaveLength(1);
+    expect(root.nested[0]).toMatchObject({ id: 'child', nested: [{ id: 'replacement' }] });
+  });
+
+  it('returns cloned tree when node is not found', () => {
+    const tree = [node('a'), node('b')];
+    const result = setChildrenOfTreeNode(tree, 'missing', [node('x')]);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toMatchObject({ id: 'a' });
+    expect(result[1]).toMatchObject({ id: 'b' });
+    expect(result).not.toBe(tree);
+  });
+
+  it('returns empty array for empty tree', () => {
+    const result = setChildrenOfTreeNode([], 'any', [node('x')]);
+    expect(result).toEqual([]);
+  });
+
+  it('sets children for target node that had no nested (leaf)', () => {
+    const tree = [node('leaf'), node('other')];
+    const children = [node('new1')];
+    const result = setChildrenOfTreeNode(tree, 'leaf', children);
+
+    expect(result[0]).toMatchObject({ id: 'leaf', nested: [{ id: 'new1' }] });
+    expect(result[1]).toMatchObject({ id: 'other' });
+  });
+
+  it('preserves order of root nodes when target is second', () => {
+    const tree = [node('first'), node('second', [{ id: 's1', title: 's1' }]), node('third')];
+    const children = [node('new1'), node('new2')];
+    const result = setChildrenOfTreeNode(tree, 'second', children);
+
+    expect(result.map(n => n.id)).toEqual(['first', 'second', 'third']);
+    expect((result[1] as TreeNodeProps & { nested: TreeNodeProps[] }).nested).toHaveLength(2);
+    expect((result[1] as { nested: { id: string }[] }).nested.map(n => n.id)).toEqual(['new1', 'new2']);
+  });
+});

package/src/helpers/collectEmptyNestedNodesInExpanded.ts

@@ -0,0 +1,16 @@
+import { TreeNodeProps } from '../types';
+import { traverse } from './traverse';
+
+export function collectEmptyNestedNodesInExpanded<TTreeNode extends TreeNodeProps>(
+  nodes: TTreeNode[],
+  expandedIds: Set<string>,
+): TTreeNode[] {
+  const result: TTreeNode[] = [];
+  traverse(nodes, node => {
+    const hasEmptyNested = Array.isArray(node.nested) && node.nested.length === 0;
+    if (hasEmptyNested && expandedIds.has(node.id)) {
+      result.push(node);
+    }
+  });
+  return result;
+}

package/src/helpers/index.ts

@@ -6,3 +6,5 @@ export * from './getSearchedTreeNodeById';
 export * from './lookupTreeForSelectedNodes';
 export * from './sortTreeItemsByTitle';
 export * from './traverse';
+export * from './setChildrenOfTreeNode';
+export * from './collectEmptyNestedNodesInExpanded';

package/src/helpers/setChildrenOfTreeNode.ts

@@ -0,0 +1,30 @@
+import { TreeNodeProps } from '../types';
+import { traverseWithTarget } from './traverse';
+
+export const setChildrenOfTreeNode = <TTreeNode extends TreeNodeProps>(
+  tree: TTreeNode[],
+  nodeId: string,
+  children: TTreeNode[],
+): TTreeNode[] => {
+  const result: TTreeNode[] = [];
+
+  traverseWithTarget(tree, result, (source, _depth, targetList) => {
+    const isTarget = source.id === nodeId;
+    const hasNested = Array.isArray(source.nested);
+
+    let newNested: TTreeNode[] | undefined;
+    if (isTarget) {
+      newNested = children;
+    } else if (hasNested) {
+      newNested = [];
+    }
+
+    const newNode = (newNested !== undefined ? { ...source, nested: newNested } : { ...source }) as TTreeNode;
+
+    targetList.push(newNode);
+
+    return !isTarget && hasNested && source.nested?.length ? newNested : undefined;
+  });
+
+  return result;
+};

package/src/helpers/sortTreeItemsByTitle.ts

@@ -3,8 +3,8 @@ import { extractTreeNodeTitle } from './extractTreeNodeTitle';
 
 export const sortTreeItemsByTitle = (items: ExtendedTreeNodeProps[]) =>
   items?.toSorted((itemA, itemB) => {
-    const valueA = extractTreeNodeTitle(itemA);
-    const valueB = extractTreeNodeTitle(itemB);
+    const valueA = extractTreeNodeTitle(itemA).toLowerCase();
+    const valueB = extractTreeNodeTitle(itemB).toLowerCase();
 
     return valueA.localeCompare(valueB);
   });

package/src/helpers/traverse.ts

@@ -4,6 +4,12 @@ import { TreeNodeProps } from '../';
 
 type NodeWithDepth<T extends TreeNodeProps> = { node: T; depth: number };
 
+type NodeWithDepthAndTarget<T extends TreeNodeProps> = {
+  node: T;
+  depth: number;
+  targetList: T[];
+};
+
 export const traverse = <T extends TreeNodeProps>(nodes: T[], callback: (node: T, depth: number) => void) => {
   const queue = new Queue<NodeWithDepth<T>>();
 
@@ -25,3 +31,34 @@ export const traverse = <T extends TreeNodeProps>(nodes: T[], callback: (node: T
     }
   }
 };
+
+/**
+ * BFS с указанием целевого списка для каждого узла.
+ * Очередь хранит (node, depth, targetList). Callback добавляет узел в targetList
+ * и возвращает массив для детей (или undefined, чтобы не обходить детей).
+ */
+export const traverseWithTarget = <T extends TreeNodeProps>(
+  nodes: T[],
+  rootTargetList: T[],
+  callback: (node: T, depth: number, targetList: T[]) => T[] | undefined,
+) => {
+  const queue = new Queue<NodeWithDepthAndTarget<T>>();
+
+  for (const node of nodes) {
+    queue.enqueue({ node, depth: 0, targetList: rootTargetList });
+  }
+
+  while (!queue.isEmpty()) {
+    const item = queue.dequeue();
+    if (!item) continue;
+
+    const { node, depth, targetList } = item;
+    const childTargetList = callback(node, depth, targetList);
+
+    if (childTargetList !== undefined && node.nested?.length) {
+      for (const child of node.nested) {
+        queue.enqueue({ node: child as T, depth: depth + 1, targetList: childTargetList });
+      }
+    }
+  }
+};

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useTreeWithPreload';
+export * from './useTreeMultiSelection';

package/src/hooks/useTreeMultiSelection.ts

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+
+import { useValueControl } from '@snack-uikit/utils';
+
+import { PreloadNodeHandler, SelectHandler, TreeNodeProps } from '../types';
+
+type UseTreeMultiSelectionParams<TTreeNode extends TreeNodeProps> = {
+  onDataLoad: PreloadNodeHandler<TTreeNode>;
+  onSelect: SelectHandler;
+  selected?: string[];
+  onChangeSelected?: (newSelected: string[]) => void;
+};
+
+const getNewSelectedIds = (selectedIds: string[], added: string[], removed: string[]): string[] => {
+  const result = new Set(selectedIds);
+
+  added.forEach(id => {
+    result.add(id);
+  });
+
+  removed.forEach(id => {
+    result.delete(id);
+  });
+
+  return Array.from(result);
+};
+
+export function useTreeMultiSelection<TTreeNode extends TreeNodeProps>({
+  onDataLoad,
+  onSelect: onSelectProp,
+  selected,
+  onChangeSelected,
+}: UseTreeMultiSelectionParams<TTreeNode>) {
+  const [selectedIds = [], setSelectedIds] = useValueControl<string[]>({
+    value: selected,
+    defaultValue: [],
+    onChange: onChangeSelected,
+  });
+
+  const onSelect = useCallback(
+    async (selectedKeys: string[], node: TreeNodeProps) => {
+      const isSelected = selectedKeys.includes(node.id);
+      const clonedNode = structuredClone(node);
+
+      if (node.nested && !node.nested.length) {
+        const { preloadedChildren } = await onDataLoad(node as TTreeNode);
+        clonedNode.nested = preloadedChildren;
+      }
+
+      const { added, removed } = onSelectProp({ selectedKeys, node: clonedNode, isSelected });
+      const updatedSelectedIds = getNewSelectedIds(selectedIds, added, removed);
+      setSelectedIds(updatedSelectedIds);
+    },
+    [onDataLoad, onSelectProp, selectedIds, setSelectedIds],
+  );
+
+  return {
+    selected: selectedIds,
+    onSelect,
+  };
+}

package/src/hooks/useTreeWithPreload.ts

@@ -0,0 +1,150 @@
+import { useDebounceValue, useDidUpdate, useRefState } from '@siberiacancode/reactuse';
+import { cancelable, CancelablePromise } from 'cancelable-promise';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { collectEmptyNestedNodesInExpanded, setChildrenOfTreeNode, traverse } from '../helpers';
+import { TreeNodeProps } from '../types';
+
+export type SearchResult<TTreeNode extends TreeNodeProps> = {
+  tree: TTreeNode[];
+  needPreloadNodes: string[];
+};
+
+export type SearchParams = {
+  search: string;
+  expandedNodes: string[];
+};
+
+type UseTreeWithPreloadParams<TRecordValue, TTreeNode extends TreeNodeProps> = {
+  initTree: TTreeNode[];
+  onPreloadNode: (node: TreeNodeProps) => Promise<TTreeNode[]>;
+  onPreloadNodes: (nodes: string[]) => Promise<Record<string, TTreeNode[]>>;
+  onSearch: (params: SearchParams) => Promise<SearchResult<TTreeNode>>;
+  mapNodeToRecordItem: (node: TTreeNode) => TRecordValue;
+};
+
+export function useTreeWithPreload<TRecordValue, TTreeNode extends TreeNodeProps>({
+  initTree,
+  onPreloadNode,
+  onPreloadNodes,
+  onSearch,
+  mapNodeToRecordItem,
+}: UseTreeWithPreloadParams<TRecordValue, TTreeNode>) {
+  const tree = useRefState<TTreeNode[]>(initTree);
+  const treeItemsRecord = useRefState<Record<string, TRecordValue>>({});
+
+  const expandedNodes = useRefState<string[]>([]);
+
+  const [search, setSearch] = useState<string>('');
+  const debouncedSearch = useDebounceValue(search, 500);
+
+  const [loading, setLoading] = useState(false);
+  const searchPromiseRef = useRef<CancelablePromise<SearchResult<TTreeNode>> | null>(null);
+
+  const buildTreeItemsRecord = useCallback(
+    (nodes: TTreeNode[]): Record<string, TRecordValue> => {
+      const record: Record<string, TRecordValue> = {};
+
+      traverse<TTreeNode>(nodes, node => {
+        record[node.id] = mapNodeToRecordItem(node);
+      });
+
+      return record;
+    },
+    [mapNodeToRecordItem],
+  );
+
+  const onExpand = useCallback(
+    (nodes: string[]) => {
+      expandedNodes.current = nodes;
+    },
+    [expandedNodes],
+  );
+
+  const onDataLoad = useCallback(
+    async (node: TreeNodeProps) => {
+      const preloadedChildren = await onPreloadNode(node);
+      const updatedTree = setChildrenOfTreeNode(tree.current, node.id, preloadedChildren);
+      tree.current = updatedTree;
+
+      const newTreeItemsRecord: Record<string, TRecordValue> = { ...treeItemsRecord.current };
+      traverse<TTreeNode>(preloadedChildren, child => {
+        newTreeItemsRecord[child.id] = mapNodeToRecordItem(child);
+      });
+      treeItemsRecord.current = newTreeItemsRecord;
+
+      return { preloadedChildren, updatedTree, newTreeItemsRecord };
+    },
+    [mapNodeToRecordItem, onPreloadNode, tree, treeItemsRecord],
+  );
+
+  const handleSearch = useCallback(
+    async (searchQuery: string) => {
+      searchPromiseRef.current?.cancel();
+
+      setLoading(true);
+      const searchPromise = cancelable(onSearch({ search: searchQuery, expandedNodes: expandedNodes.current }));
+      searchPromiseRef.current = searchPromise;
+
+      try {
+        const { tree: searchedTree, needPreloadNodes } = await searchPromise;
+        if (!searchPromise.isCanceled()) {
+          tree.current = searchedTree;
+          treeItemsRecord.current = buildTreeItemsRecord(searchedTree);
+
+          const expandedSet = new Set(expandedNodes.current);
+          const toPreloadExpandableNodes = collectEmptyNestedNodesInExpanded(searchedTree, expandedSet);
+          const collectedNodesForPreload = Array.from(
+            new Set([...toPreloadExpandableNodes.map(node => node.id), ...needPreloadNodes]),
+          );
+
+          if (!collectedNodesForPreload.length) {
+            return;
+          }
+
+          const preloadedNodes = await onPreloadNodes(collectedNodesForPreload);
+
+          if (searchPromiseRef.current !== searchPromise) {
+            return;
+          }
+
+          let tmpTree = [...searchedTree];
+          for (const [nodeId, children] of Object.entries(preloadedNodes)) {
+            tmpTree = setChildrenOfTreeNode(tmpTree, nodeId, children);
+          }
+
+          tree.current = tmpTree;
+          treeItemsRecord.current = buildTreeItemsRecord(tmpTree);
+        }
+      } finally {
+        if (searchPromiseRef.current === searchPromise) {
+          setLoading(false);
+          searchPromiseRef.current = null;
+        }
+      }
+    },
+    [buildTreeItemsRecord, expandedNodes, onPreloadNodes, onSearch, tree, treeItemsRecord],
+  );
+
+  useDidUpdate(() => {
+    handleSearch(debouncedSearch);
+  }, [debouncedSearch, handleSearch]);
+
+  useEffect(() => {
+    tree.current = initTree;
+    treeItemsRecord.current = buildTreeItemsRecord(initTree);
+  }, [buildTreeItemsRecord, initTree, tree, treeItemsRecord]);
+
+  return {
+    tree,
+    expandedNodes,
+    loading,
+    treeItemsRecord,
+    search: {
+      value: search,
+      onChange: setSearch,
+    },
+    onExpand,
+    onDataLoad,
+  };
+}

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export type { OnNodeClick, TreeNodeId, TreeNodeProps } from './types';
 export { setNonce } from '@snack-uikit/list';
+export * from './hooks';

package/src/types.ts

@@ -118,3 +118,12 @@ export type TreeBaseProps = TreeView | TreeMultiSelect | TreeSingleSelect;
 export type ExtendedTreeNodeProps = TreeNodeProps & {
   getTitle?(): void;
 };
+
+export type PreloadNodeHandler<TTreeNode extends TreeNodeProps> = (
+  node: TreeNodeProps,
+) => Promise<{ preloadedChildren: TTreeNode[]; updatedTree: TTreeNode[] }>;
+
+export type SelectHandler = (props: { selectedKeys: string[]; node: TreeNodeProps; isSelected: boolean }) => {
+  added: string[];
+  removed: string[];
+};