feat(NavigationTree): virtualized render

Author: ariser

package-lock.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "bem-cn-lite": "^4.1.0",
+    "react-list": "^0.8.17",
     "react-treeview": "^0.4.7"
   },
   "devDependencies": {
@@ -36,6 +37,7 @@
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.4.19",
+    "@types/react-list": "^0.8.7",
     "@types/react-treeview": "^0.4.3",
     "@yandex-cloud/browserslist-config": "^1.0.1",
     "@yandex-cloud/eslint-config": "^1.0.0",

package.json

@@ -6,8 +6,12 @@ import {TreeView} from '../../TreeView/TreeView';
 
 import './EmptyView.scss';
 
+interface EmptyViewProps {
+    level?: number;
+}
+
 const b = block('ydb-navigation-tree-view-empty');
 
-export function EmptyView() {
-    return <TreeView name={<span className={b()}>{i18n('label_empty')}</span>} />;
+export function EmptyView({level}: EmptyViewProps) {
+    return <TreeView name={<span className={b()}>{i18n('label_empty')}</span>} level={level} />;
 }

src/components/NavigationTree/EmptyView/EmptyView.tsx

@@ -6,8 +6,12 @@ import {TreeView} from '../../TreeView/TreeView';
 
 import './ErrorView.scss';
 
+interface ErrorViewProps {
+    level?: number;
+}
+
 const b = block('ydb-navigation-tree-view-error');
 
-export function ErrorView() {
-    return <TreeView name={<span className={b()}>{i18n('label_error')}</span>} />;
+export function ErrorView({level}: ErrorViewProps) {
+    return <TreeView name={<span className={b()}>{i18n('label_error')}</span>} level={level} />;
 }

src/components/NavigationTree/ErrorView/ErrorView.tsx

@@ -6,16 +6,21 @@ import {TreeView} from '../../TreeView/TreeView';
 
 import './LoaderView.scss';
 
+interface LoaderViewProps {
+    level?: number;
+}
+
 const b = block('ydb-navigation-tree-view-loader');
 
-export function LoaderView() {
+export function LoaderView({level}: LoaderViewProps) {
     return (
         <TreeView
             name={
                 <div className={b()}>
                     <Spin size="xs" />
                 </div>
             }
+            level={level}
         />
     );
 }

src/components/NavigationTree/LoaderView/LoaderView.tsx

@@ -1,44 +1,85 @@
 import React from 'react';
+import ReactList from 'react-list';
+
+import type {
+    NavigationTreeNodeState,
+    NavigationTreeProps,
+    NavigationTreeServiceNode,
+} from './types';
+import {reducer, getNodeState, selectTreeAsList} from './state';
+import {isServiceNode} from './utils';
 
-import {NavigationTreeProps} from './types';
-import {reducer, getNodeState} from './state';
 import {NavigationTreeNode} from './NavigationTreeNode';
-import {NavigationTreeDirectory} from './NavigationTreeDirectory';
+import {LoaderView} from './LoaderView/LoaderView';
+import {ErrorView} from './ErrorView/ErrorView';
+import {EmptyView} from './EmptyView/EmptyView';
 
 export type {NavigationTreeProps};
 
+const renderServiceNode = (node: NavigationTreeServiceNode) => {
+    const key = `${node.path}|${node.status}`;
+
+    if (node.status === 'loading') {
+        return <LoaderView key={key} level={node.level} />;
+    }
+
+    if (node.status === 'error') {
+        return <ErrorView key={key} level={node.level} />;
+    }
+
+    return <EmptyView key={key} level={node.level} />;
+};
+
 export function NavigationTree({
     rootState: partialRootState,
     fetchPath,
     getActions,
     activePath,
     onActivePathUpdate,
     cache = true,
+    virtualize = false,
 }: NavigationTreeProps) {
     const [state, dispatch] = React.useReducer(reducer, {
         [partialRootState.path]: getNodeState(partialRootState),
     });
-    const rootState = state[partialRootState.path];
-
-    return (
-        <NavigationTreeNode
-            path={rootState.path}
-            state={state}
-            dispatch={dispatch}
-            active={rootState.path === activePath}
-            onActivate={onActivePathUpdate}
-            getActions={getActions}
-        >
-            <NavigationTreeDirectory
+    const nodesList = React.useMemo(() => selectTreeAsList(state, partialRootState.path), [state]);
+
+    const renderNode = (node: NavigationTreeNodeState) => {
+        return (
+            <NavigationTreeNode
+                key={node.path}
                 state={state}
-                dispatch={dispatch}
-                path={rootState.path}
-                fetchPath={fetchPath}
+                path={node.path}
                 activePath={activePath}
-                onItemActivate={onActivePathUpdate}
+                fetchPath={fetchPath}
+                dispatch={dispatch}
+                onActivate={onActivePathUpdate}
                 getActions={getActions}
                 cache={cache}
+                level={node.level}
             />
-        </NavigationTreeNode>
+        );
+    };
+
+    const renderVirtualizedTree = () => (
+        <ReactList
+            type="uniform"
+            length={nodesList.length}
+            useStaticSize
+            itemRenderer={(index) => {
+                const node = nodesList[index];
+                return isServiceNode(node) ? renderServiceNode(node) : renderNode(node);
+            }}
+        />
     );
+
+    const renderSimpleTree = () => (
+        <>
+            {nodesList.map((node) =>
+                isServiceNode(node) ? renderServiceNode(node) : renderNode(node),
+            )}
+        </>
+    );
+
+    return virtualize ? renderVirtualizedTree() : renderSimpleTree();
 }

src/components/NavigationTree/NavigationTree.tsx

@@ -11,12 +11,15 @@ import {TreeView} from '../TreeView/TreeView';
 
 export interface NavigationTreeNodeProps {
     path: string;
+    fetchPath: NavigationTreeProps['fetchPath'];
+    activePath?: string;
     state: NavigationTreeState;
+    level?: number;
     dispatch: React.Dispatch<NavigationTreeAction>;
     children?: React.ReactNode;
-    active?: boolean;
     onActivate?: (path: string) => void;
     getActions?: NavigationTreeProps['getActions'];
+    cache?: boolean;
 }
 
 function renderIcon(type: NavigationTreeNodeType | string, collapsed: boolean) {
@@ -36,15 +39,54 @@ function renderIcon(type: NavigationTreeNodeType | string, collapsed: boolean) {
 
 export function NavigationTreeNode({
     path,
+    fetchPath,
+    activePath,
     state,
+    level,
     dispatch,
     children,
-    active,
     onActivate,
     getActions,
+    cache,
 }: NavigationTreeNodeProps) {
     const nodeState = state[path];
 
+    React.useEffect(() => {
+        if (nodeState.collapsed) {
+            if (!cache) {
+                dispatch({
+                    type: NavigationTreeActionType.ResetNode,
+                    payload: {path},
+                });
+            }
+
+            return;
+        }
+
+        if (nodeState.loaded || nodeState.loading) {
+            return;
+        }
+
+        dispatch({
+            type: NavigationTreeActionType.StartLoading,
+            payload: {path},
+        });
+
+        fetchPath(path)
+            .then((data) => {
+                dispatch({
+                    type: NavigationTreeActionType.FinishLoading,
+                    payload: {path, activePath, data},
+                });
+            })
+            .catch((error) => {
+                dispatch({
+                    type: NavigationTreeActionType.FinishLoading,
+                    payload: {path, error},
+                });
+            });
+    }, [nodeState.collapsed]);
+
     const handleClick = React.useCallback(() => {
         if (onActivate) {
             onActivate(path);
@@ -64,11 +106,12 @@ export function NavigationTreeNode({
             name={nodeState.name}
             icon={renderIcon(nodeState.type, nodeState.collapsed)}
             collapsed={nodeState.collapsed}
-            active={active}
+            active={nodeState.path === activePath}
             actions={actions}
             hasArrow={nodeState.expandable}
             onClick={handleClick}
             onArrowClick={handleArrowClick}
+            level={level}
         >
             {children}
         </TreeView>