feat: expand subsequently function (#287)

Author: lukasbach

packages/core/src/environmentActions/EnvironmentActionsProvider.tsx

@@ -171,6 +171,21 @@ export const EnvironmentActionsProvider = React.forwardRef<
     [items, onPrimaryAction]
   );
 
+  const expandSubsequently = useCallback(
+    async (treeId: string, itemIds: TreeItemIndex[]) => {
+      const [current, ...rest] = itemIds;
+      await waitFor(() => !!itemsRef.current?.[current]).then(() => {
+        const item = itemsRef.current[current];
+        if (!item) {
+          return;
+        }
+        onExpandItem?.(item, treeId);
+        expandSubsequently(treeId, rest);
+      });
+    },
+    [itemsRef, onExpandItem]
+  );
+
   const expandAll = useCallback(
     async (treeId: string) => {
       await recursiveExpand(trees[treeId].rootItem, itemsRef, item =>
@@ -204,6 +219,7 @@ export const EnvironmentActionsProvider = React.forwardRef<
       toggleItemSelectStatus,
       invokePrimaryAction,
       expandAll,
+      expandSubsequently,
       collapseAll,
       abortProgrammaticDrag,
       completeProgrammaticDrag,
@@ -224,6 +240,7 @@ export const EnvironmentActionsProvider = React.forwardRef<
       toggleItemSelectStatus,
       invokePrimaryAction,
       expandAll,
+      expandSubsequently,
       collapseAll,
       abortProgrammaticDrag,
       completeProgrammaticDrag,

packages/core/src/stories/FindingItems.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta } from '@storybook/react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { longTree } from 'demodata';
+import { UncontrolledTreeEnvironment } from '../uncontrolledEnvironment/UncontrolledTreeEnvironment';
+import { StaticTreeDataProvider } from '../uncontrolledEnvironment/StaticTreeDataProvider';
+import { Tree } from '../tree/Tree';
+import { TreeItemIndex, TreeRef } from '../types';
+
+export default {
+  title: 'Core/Finding Items',
+} as Meta;
+
+export const CustomFinder = () => {
+  const [search, setSearch] = useState('');
+  const tree = useRef<TreeRef>(null);
+
+  const dataProvider = useMemo(
+    () =>
+      new StaticTreeDataProvider(longTree.items, (item, data) => ({
+        ...item,
+        data,
+      })),
+    []
+  );
+
+  const findItemPath = useCallback(
+    async (search: string, searchRoot: TreeItemIndex = 'root') => {
+      const item = await dataProvider.getTreeItem(searchRoot);
+      if (item.data.toLowerCase().includes(search.toLowerCase())) {
+        return [item.index];
+      }
+      const searchedItems = await Promise.all(
+        item.children?.map(child => findItemPath(search, child)) ?? []
+      );
+      const result = searchedItems.find(item => item !== null);
+      if (!result) {
+        return null;
+      }
+      return [item.index, ...result];
+    },
+    [dataProvider]
+  );
+
+  const find = useCallback(
+    e => {
+      e.preventDefault();
+      if (search) {
+        findItemPath(search).then(path => {
+          if (path) {
+            tree.current
+              ?.expandSubsequently(path.slice(0, path.length - 1))
+              .then(() => {
+                tree.current?.selectItems([path[path.length - 1]]);
+                tree.current?.focusItem(path[path.length - 1]);
+              });
+          }
+        });
+      }
+    },
+    [findItemPath, search]
+  );
+
+  return (
+    <>
+      <form onSubmit={find}>
+        <input
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Search..."
+        />
+        <button type="submit">Find item</button>
+      </form>
+      <UncontrolledTreeEnvironment<string>
+        dataProvider={dataProvider}
+        getItemTitle={item => item.data}
+        viewState={{
+          'tree-1': {},
+        }}
+      >
+        <Tree
+          treeId="tree-1"
+          rootItem="root"
+          treeLabel="Tree Example"
+          ref={tree}
+        />
+      </UncontrolledTreeEnvironment>
+    </>
+  );
+};

packages/core/src/treeActions/TreeActionsProvider.tsx

@@ -85,6 +85,9 @@ export const TreeActionsProvider = React.forwardRef<
       collapseAll(): void {
         envActions.collapseAll(tree.treeId);
       },
+      expandSubsequently(itemIds: TreeItemIndex[]): Promise<void> {
+        return envActions.expandSubsequently(tree.treeId, itemIds);
+      },
     }),
     [envActions, tree]
   );

packages/core/src/types.ts

@@ -233,6 +233,10 @@ export interface TreeEnvironmentChangeActions {
   moveProgrammaticDragPositionDown: () => void;
   expandAll: (treeId: string) => void;
   collapseAll: (treeId: string) => void;
+  expandSubsequently: (
+    treeId: string,
+    itemIds: TreeItemIndex[]
+  ) => Promise<void>;
 }
 
 export type TreeEnvironmentActionsContextProps = TreeEnvironmentChangeActions;
@@ -389,6 +393,7 @@ export interface TreeChangeActions {
   abortSearch: () => void;
   expandAll: () => void;
   collapseAll: () => void;
+  expandSubsequently: (itemIds: TreeItemIndex[]) => Promise<void>;
 }
 
 export type TreeChangeActionsContextProps = TreeChangeActions;