ydb-ui-components 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.4.0](https://github.com/ydb-platform/ydb-ui-components/compare/v2.3.0...v2.4.0) (2022-07-28)
+
+
+### Features
+
+* **NavigationTree:** virtualized render ([7388ff5](https://github.com/ydb-platform/ydb-ui-components/commit/7388ff5a5b05ffa30b86fb4ae2d8e52a7bd9dad8))
+* **TreeView:** a prop to determine tree view nesting level ([2e5d42a](https://github.com/ydb-platform/ydb-ui-components/commit/2e5d42abf78e81fdd61747958822dc3b96eab42f))
+
 ## [2.3.0](https://github.com/ydb-platform/ydb-ui-components/compare/v2.2.0...v2.3.0) (2022-07-18)
 
 

package/build/components/NavigationTree/EmptyView/EmptyView.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import './EmptyView.scss';
-export declare function EmptyView(): JSX.Element;
+interface EmptyViewProps {
+    level?: number;
+}
+export declare function EmptyView({ level }: EmptyViewProps): JSX.Element;
+export {};

package/build/components/NavigationTree/EmptyView/EmptyView.js

@@ -19,10 +19,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-empty');
 
-function EmptyView() {
+function EmptyView(_ref) {
+  let {
+    level
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
     name: /*#__PURE__*/_react.default.createElement("span", {
       className: b()
-    }, (0, _i18n.default)('label_empty'))
+    }, (0, _i18n.default)('label_empty')),
+    level: level
   });
 }

package/build/components/NavigationTree/ErrorView/ErrorView.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import './ErrorView.scss';
-export declare function ErrorView(): JSX.Element;
+interface ErrorViewProps {
+    level?: number;
+}
+export declare function ErrorView({ level }: ErrorViewProps): JSX.Element;
+export {};

package/build/components/NavigationTree/ErrorView/ErrorView.js

@@ -19,10 +19,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-error');
 
-function ErrorView() {
+function ErrorView(_ref) {
+  let {
+    level
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
     name: /*#__PURE__*/_react.default.createElement("span", {
       className: b()
-    }, (0, _i18n.default)('label_error'))
+    }, (0, _i18n.default)('label_error')),
+    level: level
   });
 }

package/build/components/NavigationTree/LoaderView/LoaderView.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import './LoaderView.scss';
-export declare function LoaderView(): JSX.Element;
+interface LoaderViewProps {
+    level?: number;
+}
+export declare function LoaderView({ level }: LoaderViewProps): JSX.Element;
+export {};

package/build/components/NavigationTree/LoaderView/LoaderView.js

@@ -19,12 +19,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-loader');
 
-function LoaderView() {
+function LoaderView(_ref) {
+  let {
+    level
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
     name: /*#__PURE__*/_react.default.createElement("div", {
       className: b()
     }, /*#__PURE__*/_react.default.createElement(_uikit.Spin, {
       size: "xs"
-    }))
+    })),
+    level: level
   });
 }

package/build/components/NavigationTree/NavigationTree.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { NavigationTreeProps } from './types';
+import type { NavigationTreeProps } from './types';
 export type { NavigationTreeProps };
-export declare function NavigationTree({ rootState: partialRootState, fetchPath, getActions, activePath, onActivePathUpdate, cache, }: NavigationTreeProps): JSX.Element;
+export declare function NavigationTree({ rootState: partialRootState, fetchPath, getActions, activePath, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps): JSX.Element;

package/build/components/NavigationTree/NavigationTree.js

@@ -7,14 +7,45 @@ exports.NavigationTree = NavigationTree;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactList = _interopRequireDefault(require("react-list"));
+
 var _state = require("./state");
 
+var _utils = require("./utils");
+
 var _NavigationTreeNode = require("./NavigationTreeNode");
 
-var _NavigationTreeDirectory = require("./NavigationTreeDirectory");
+var _LoaderView = require("./LoaderView/LoaderView");
+
+var _ErrorView = require("./ErrorView/ErrorView");
+
+var _EmptyView = require("./EmptyView/EmptyView");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const renderServiceNode = node => {
+  const key = `${node.path}|${node.status}`;
+
+  if (node.status === 'loading') {
+    return /*#__PURE__*/_react.default.createElement(_LoaderView.LoaderView, {
+      key: key,
+      level: node.level
+    });
+  }
+
+  if (node.status === 'error') {
+    return /*#__PURE__*/_react.default.createElement(_ErrorView.ErrorView, {
+      key: key,
+      level: node.level
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_EmptyView.EmptyView, {
+    key: key,
+    level: node.level
+  });
+};
+
 function NavigationTree(_ref) {
   let {
     rootState: partialRootState,
@@ -22,29 +53,42 @@ function NavigationTree(_ref) {
     getActions,
     activePath,
     onActivePathUpdate,
-    cache = true
+    cache = true,
+    virtualize = false
   } = _ref;
 
   const [state, dispatch] = _react.default.useReducer(_state.reducer, {
     [partialRootState.path]: (0, _state.getNodeState)(partialRootState)
   });
 
-  const rootState = state[partialRootState.path];
-  return /*#__PURE__*/_react.default.createElement(_NavigationTreeNode.NavigationTreeNode, {
-    path: rootState.path,
-    state: state,
-    dispatch: dispatch,
-    active: rootState.path === activePath,
-    onActivate: onActivePathUpdate,
-    getActions: getActions
-  }, /*#__PURE__*/_react.default.createElement(_NavigationTreeDirectory.NavigationTreeDirectory, {
-    state: state,
-    dispatch: dispatch,
-    path: rootState.path,
-    fetchPath: fetchPath,
-    activePath: activePath,
-    onItemActivate: onActivePathUpdate,
-    getActions: getActions,
-    cache: cache
-  }));
+  const nodesList = _react.default.useMemo(() => (0, _state.selectTreeAsList)(state, partialRootState.path), [state]);
+
+  const renderNode = node => {
+    return /*#__PURE__*/_react.default.createElement(_NavigationTreeNode.NavigationTreeNode, {
+      key: node.path,
+      state: state,
+      path: node.path,
+      activePath: activePath,
+      fetchPath: fetchPath,
+      dispatch: dispatch,
+      onActivate: onActivePathUpdate,
+      getActions: getActions,
+      cache: cache,
+      level: node.level
+    });
+  };
+
+  const renderVirtualizedTree = () => /*#__PURE__*/_react.default.createElement(_reactList.default, {
+    type: "uniform",
+    length: nodesList.length,
+    useStaticSize: true,
+    itemRenderer: index => {
+      const node = nodesList[index];
+      return (0, _utils.isServiceNode)(node) ? renderServiceNode(node) : renderNode(node);
+    }
+  });
+
+  const renderSimpleTree = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, nodesList.map(node => (0, _utils.isServiceNode)(node) ? renderServiceNode(node) : renderNode(node)));
+
+  return virtualize ? renderVirtualizedTree() : renderSimpleTree();
 }

package/build/components/NavigationTree/NavigationTreeNode.d.ts

@@ -3,11 +3,14 @@ import { NavigationTreeState, NavigationTreeProps } from './types';
 import { NavigationTreeAction } from './state';
 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;
 }
-export declare function NavigationTreeNode({ path, state, dispatch, children, active, onActivate, getActions, }: NavigationTreeNodeProps): JSX.Element;
+export declare function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, cache, }: NavigationTreeNodeProps): JSX.Element;

package/build/components/NavigationTree/NavigationTreeNode.js

@@ -50,15 +50,62 @@ function renderIcon(type, collapsed) {
 function NavigationTreeNode(_ref) {
   let {
     path,
+    fetchPath,
+    activePath,
     state,
+    level,
     dispatch,
     children,
-    active,
     onActivate,
-    getActions
+    getActions,
+    cache
   } = _ref;
   const nodeState = state[path];
 
+  _react.default.useEffect(() => {
+    if (nodeState.collapsed) {
+      if (!cache) {
+        dispatch({
+          type: _state.NavigationTreeActionType.ResetNode,
+          payload: {
+            path
+          }
+        });
+      }
+
+      return;
+    }
+
+    if (nodeState.loaded || nodeState.loading) {
+      return;
+    }
+
+    dispatch({
+      type: _state.NavigationTreeActionType.StartLoading,
+      payload: {
+        path
+      }
+    });
+    fetchPath(path).then(data => {
+      dispatch({
+        type: _state.NavigationTreeActionType.FinishLoading,
+        payload: {
+          path,
+          activePath,
+          data
+        }
+      });
+    }).catch(error => {
+      dispatch({
+        type: _state.NavigationTreeActionType.FinishLoading,
+        payload: {
+          path,
+          error
+        }
+      });
+    });
+  }, [nodeState.collapsed]);
+
   const handleClick = _react.default.useCallback(() => {
     if (onActivate) {
       onActivate(path);
@@ -82,10 +129,11 @@ function NavigationTreeNode(_ref) {
     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
+    onArrowClick: handleArrowClick,
+    level: level
   }, children);
 }

package/build/components/NavigationTree/state.d.ts

@@ -1,8 +1,9 @@
-import { NavigationTreeNodeState, NavigationTreeNodePartialState, NavigationTreeState } from './types';
+import type { NavigationTreeNodeState, NavigationTreeNodePartialState, NavigationTreeState, NavigationTreeServiceNode } from './types';
 export declare enum NavigationTreeActionType {
     ToggleCollapsed = "toggle-collapsed",
     StartLoading = "start-loading",
-    FinishLoading = "finish-loading"
+    FinishLoading = "finish-loading",
+    ResetNode = "reset-node"
 }
 export interface NavigationTreeAction {
     type: NavigationTreeActionType;
@@ -17,3 +18,4 @@ export declare function getDefaultNodeState(): {
 };
 export declare function getNodeState(partialState: NavigationTreeNodePartialState): NavigationTreeNodeState;
 export declare function reducer(state: NavigationTreeState | undefined, action: NavigationTreeAction): NavigationTreeState;
+export declare function selectTreeAsList(state: NavigationTreeState, rootPath: string): (NavigationTreeNodeState | NavigationTreeServiceNode)[];

package/build/components/NavigationTree/state.js

@@ -7,6 +7,9 @@ exports.NavigationTreeActionType = void 0;
 exports.getDefaultNodeState = getDefaultNodeState;
 exports.getNodeState = getNodeState;
 exports.reducer = reducer;
+exports.selectTreeAsList = selectTreeAsList;
+
+var _utils = require("./utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -21,6 +24,7 @@ exports.NavigationTreeActionType = NavigationTreeActionType;
   NavigationTreeActionType["ToggleCollapsed"] = "toggle-collapsed";
   NavigationTreeActionType["StartLoading"] = "start-loading";
   NavigationTreeActionType["FinishLoading"] = "finish-loading";
+  NavigationTreeActionType["ResetNode"] = "reset-node";
 })(NavigationTreeActionType || (exports.NavigationTreeActionType = NavigationTreeActionType = {}));
 
 function getDefaultNodeState() {
@@ -99,7 +103,27 @@ function reducer() {
         return newState;
       }
 
+    case NavigationTreeActionType.ResetNode:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        [action.payload.path]: _objectSpread(_objectSpread({}, state[action.payload.path]), getDefaultNodeState())
+      });
+
     default:
       return state;
   }
+}
+
+function selectTreeAsList(state, rootPath) {
+  const list = [];
+  (0, _utils.traverseDFS)(state, rootPath, (node, level) => {
+    list.push(_objectSpread(_objectSpread({}, node), {}, {
+      level
+    }));
+    const serviceNode = (0, _utils.getServiceNode)(node, level);
+
+    if (serviceNode) {
+      list.push(serviceNode);
+    }
+  });
+  return list;
 }

package/build/components/NavigationTree/types.d.ts

@@ -20,6 +20,12 @@ export interface NavigationTreeNodeState {
     loaded: boolean;
     error: boolean;
     children: string[];
+    level?: number;
+}
+export interface NavigationTreeServiceNode {
+    path: string;
+    status: 'loading' | 'error' | 'empty';
+    level?: number;
 }
 export declare type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
 export interface NavigationTreeProps<D = any> {
@@ -29,4 +35,5 @@ export interface NavigationTreeProps<D = any> {
     activePath?: string;
     onActivePathUpdate?: (activePath: string) => void;
     cache?: boolean;
+    virtualize?: boolean;
 }

package/build/components/NavigationTree/utils.d.ts

@@ -0,0 +1,6 @@
+import type { NavigationTreeNodeState, NavigationTreeServiceNode, NavigationTreeState } from './types';
+export declare function isServiceNode(node: NavigationTreeNodeState | NavigationTreeServiceNode): node is NavigationTreeServiceNode;
+export declare function getServiceNode(node: NavigationTreeNodeState, level: number): NavigationTreeServiceNode | void;
+declare type TraverseDFSVisit = (node: NavigationTreeNodeState, level: number, path: string, state: NavigationTreeState) => void;
+export declare function traverseDFS(state: NavigationTreeState, path: string, visit: TraverseDFSVisit, level?: number): void;
+export {};

package/build/components/NavigationTree/utils.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getServiceNode = getServiceNode;
+exports.isServiceNode = isServiceNode;
+exports.traverseDFS = traverseDFS;
+
+function isServiceNode(node) {
+  return 'status' in node;
+}
+
+function getServiceNode(node, level) {
+  if (node.collapsed) {
+    return undefined;
+  }
+
+  if (node.loading) {
+    return {
+      path: node.path,
+      status: 'loading',
+      level: level + 1
+    };
+  }
+
+  if (node.error) {
+    return {
+      path: node.path,
+      status: 'error',
+      level: level + 1
+    };
+  }
+
+  if (node.loaded && node.children.length === 0) {
+    return {
+      path: node.path,
+      status: 'empty',
+      level: level + 1
+    };
+  }
+
+  return undefined;
+}
+
+function traverseDFS(state, path, visit) {
+  let level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  const currentNode = state[path];
+
+  if (!currentNode) {
+    return;
+  }
+
+  visit(currentNode, level, path, state);
+
+  if (currentNode.collapsed) {
+    return;
+  }
+
+  for (const childPath of currentNode.children) {
+    traverseDFS(state, `${path}/${childPath}`, visit, level + 1);
+  }
+}

package/build/components/TreeView/TreeView.css

@@ -1,4 +1,5 @@
 .ydb-tree-view {
+  --ydb-tree-view-level: 0;
   font-size: 13px;
   line-height: 18px;
 }
@@ -9,6 +10,7 @@
   display: flex;
   align-items: center;
   height: 24px;
+  padding-left: calc(24px * var(--ydb-tree-view-level));
   padding-right: 3px;
   border-bottom: 1px solid var(--yc-color-line-solid);
   cursor: pointer;

package/build/components/TreeView/TreeView.d.ts

@@ -12,5 +12,6 @@ export interface TreeViewProps {
     onArrowClick?: () => void;
     hasArrow?: boolean;
     actions?: DropdownMenuItemMixed<any>[];
+    level?: number;
 }
-export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, hasArrow, actions, }: TreeViewProps): JSX.Element;
+export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, hasArrow, actions, level, }: TreeViewProps): JSX.Element;

package/build/components/TreeView/TreeView.js

@@ -17,6 +17,7 @@ require("./TreeView.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
 const b = (0, _bemCnLite.default)('ydb-tree-view');
 
 function TreeView(_ref) {
@@ -30,7 +31,8 @@ function TreeView(_ref) {
     onClick,
     onArrowClick,
     hasArrow = false,
-    actions
+    actions,
+    level
   } = _ref;
 
   const rootRef = _react.default.useRef(null);
@@ -82,7 +84,10 @@ function TreeView(_ref) {
     ref: rootRef,
     className: b({
       'no-arrow': !hasArrow
-    })
+    }),
+    style: {
+      [TREE_LEVEL_CSS_VAR]: level
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactTreeview.default, {
     collapsed: collapsed,
     itemClassName: b('item', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "license": "MIT",
   "main": "build/index.js",
@@ -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/build/components/NavigationTree/NavigationTreeDirectory.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { NavigationTreeState, NavigationTreeProps } from './types';
-import { NavigationTreeAction } from './state';
-export interface NavigationTreeDirectoryProps {
-    state: NavigationTreeState;
-    dispatch: React.Dispatch<NavigationTreeAction>;
-    path: string;
-    fetchPath: NavigationTreeProps['fetchPath'];
-    activePath?: string;
-    onItemActivate?: (itemPath: string) => void;
-    getActions?: NavigationTreeProps['getActions'];
-    cache?: boolean;
-}
-export declare function NavigationTreeDirectory({ state, dispatch, path, fetchPath, activePath, onItemActivate, getActions, cache, }: NavigationTreeDirectoryProps): JSX.Element;

package/build/components/NavigationTree/NavigationTreeDirectory.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NavigationTreeDirectory = NavigationTreeDirectory;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _state = require("./state");
-
-var _NavigationTreeNode = require("./NavigationTreeNode");
-
-var _LoaderView = require("./LoaderView/LoaderView");
-
-var _ErrorView = require("./ErrorView/ErrorView");
-
-var _EmptyView = require("./EmptyView/EmptyView");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function NavigationTreeDirectory(_ref) {
-  let {
-    state,
-    dispatch,
-    path,
-    fetchPath,
-    activePath,
-    onItemActivate,
-    getActions,
-    cache
-  } = _ref;
-  const nodeState = state[path];
-
-  _react.default.useEffect(() => {
-    if (nodeState.loaded && cache || nodeState.loading) {
-      return;
-    }
-
-    dispatch({
-      type: _state.NavigationTreeActionType.StartLoading,
-      payload: {
-        path
-      }
-    });
-    fetchPath(path).then(data => {
-      dispatch({
-        type: _state.NavigationTreeActionType.FinishLoading,
-        payload: {
-          path,
-          activePath,
-          data
-        }
-      });
-    }).catch(error => {
-      dispatch({
-        type: _state.NavigationTreeActionType.FinishLoading,
-        payload: {
-          path,
-          error
-        }
-      });
-    });
-  }, []);
-
-  if (nodeState.loading) {
-    return /*#__PURE__*/_react.default.createElement(_LoaderView.LoaderView, null);
-  }
-
-  if (nodeState.error) {
-    return /*#__PURE__*/_react.default.createElement(_ErrorView.ErrorView, null);
-  }
-
-  if (nodeState.loaded && nodeState.children.length > 0) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, nodeState.children.map(childName => {
-      const childPath = `${path}/${childName}`;
-      let children;
-
-      if (state[childPath].expandable) {
-        children = /*#__PURE__*/_react.default.createElement(NavigationTreeDirectory, {
-          state: state,
-          dispatch: dispatch,
-          path: childPath,
-          fetchPath: fetchPath,
-          activePath: activePath,
-          onItemActivate: onItemActivate,
-          getActions: getActions,
-          cache: cache
-        });
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_NavigationTreeNode.NavigationTreeNode, {
-        key: childPath,
-        path: childPath,
-        state: state,
-        dispatch: dispatch,
-        active: childPath === activePath,
-        onActivate: onItemActivate,
-        getActions: getActions,
-        children: children
-      });
-    }));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_EmptyView.EmptyView, null);
-}