ydb-ui-components 3.2.2 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [3.3.0](https://github.com/ydb-platform/ydb-ui-components/compare/v3.2.2...v3.3.0) (2023-08-09)
+
+
+### Features
+
+* **NavigationTree:** add additionalNodeElements to NavigationTree ([#55](https://github.com/ydb-platform/ydb-ui-components/issues/55)) ([d462aaf](https://github.com/ydb-platform/ydb-ui-components/commit/d462aafd8dd61aca3cc17b17f57419af4c7e8910))
+
+
+### Bug Fixes
+
+* **NavigationTree:** add new NavigationTreeNodeType 'stream' ([#57](https://github.com/ydb-platform/ydb-ui-components/issues/57)) ([270f607](https://github.com/ydb-platform/ydb-ui-components/commit/270f607e952f197c51fccd89a313390fdd8f055d))
+
 ## [3.2.2](https://github.com/ydb-platform/ydb-ui-components/compare/v3.2.1...v3.2.2) (2023-08-03)
 
 

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

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

package/build/components/NavigationTree/NavigationTree.js

@@ -64,6 +64,7 @@ function NavigationTree(_ref) {
   var partialRootState = _ref.rootState,
       fetchPath = _ref.fetchPath,
       getActions = _ref.getActions,
+      renderAdditionalNodeElements = _ref.renderAdditionalNodeElements,
       activePath = _ref.activePath,
       onActivePathUpdate = _ref.onActivePathUpdate,
       _ref$cache = _ref.cache,
@@ -90,6 +91,7 @@ function NavigationTree(_ref) {
       dispatch: dispatch,
       onActivate: onActivePathUpdate,
       getActions: getActions,
+      renderAdditionalNodeElements: renderAdditionalNodeElements,
       cache: cache,
       level: node.level
     });

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

@@ -11,6 +11,7 @@ export interface NavigationTreeNodeProps {
     children?: React.ReactNode;
     onActivate?: (path: string) => void;
     getActions?: NavigationTreeProps['getActions'];
+    renderAdditionalNodeElements?: NavigationTreeProps['renderAdditionalNodeElements'];
     cache?: boolean;
 }
-export declare function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, cache, }: NavigationTreeNodeProps): JSX.Element;
+export declare function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, renderAdditionalNodeElements, cache, }: NavigationTreeNodeProps): JSX.Element;

package/build/components/NavigationTree/NavigationTreeNode.js

@@ -62,6 +62,7 @@ function renderIcon(type, collapsed) {
         height: 16
       });
 
+    case 'stream':
     case 'topic':
       return /*#__PURE__*/_react["default"].createElement(_Topic.TopicIcon, {
         height: 16
@@ -92,6 +93,7 @@ function NavigationTreeNode(_ref) {
       children = _ref.children,
       onActivate = _ref.onActivate,
       getActions = _ref.getActions,
+      renderAdditionalNodeElements = _ref.renderAdditionalNodeElements,
       cache = _ref.cache;
   var nodeState = state[path];
 
@@ -154,6 +156,10 @@ function NavigationTreeNode(_ref) {
     });
   }, []);
 
+  var additionalNodeElements = _react["default"].useMemo(function () {
+    return renderAdditionalNodeElements === null || renderAdditionalNodeElements === void 0 ? void 0 : renderAdditionalNodeElements(nodeState.path, nodeState.type);
+  }, [renderAdditionalNodeElements, nodeState]);
+
   var actions = _react["default"].useMemo(function () {
     return getActions === null || getActions === void 0 ? void 0 : getActions(nodeState.path, nodeState.type);
   }, [getActions, nodeState]);
@@ -164,6 +170,7 @@ function NavigationTreeNode(_ref) {
     collapsed: nodeState.collapsed,
     active: nodeState.path === activePath,
     actions: actions,
+    additionalNodeElements: additionalNodeElements,
     hasArrow: nodeState.expandable,
     onClick: handleClick,
     onArrowClick: handleArrowClick,

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { DropdownMenuItemMixed } from '@gravity-ui/uikit';
-export declare type NavigationTreeNodeType = 'database' | 'directory' | 'table' | 'column_table' | 'index_table' | 'index' | 'topic' | 'external_table' | 'external_data_source';
+export declare type NavigationTreeNodeType = 'database' | 'directory' | 'table' | 'column_table' | 'index_table' | 'index' | 'topic' | 'stream' | 'external_table' | 'external_data_source';
 export interface NavigationTreeDataItem {
     name: string;
     type: NavigationTreeNodeType;
@@ -32,6 +33,7 @@ export interface NavigationTreeProps<D = any> {
     rootState: NavigationTreeNodePartialState;
     fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;
     getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
+    renderAdditionalNodeElements?: (path: string, type: NavigationTreeNodeType) => JSX.Element | undefined;
     activePath?: string;
     onActivePathUpdate?: (activePath: string) => void;
     cache?: boolean;

package/build/components/TreeView/TreeView.css

@@ -19,7 +19,7 @@
   background-color: var(--yc-color-base-simple-hover);
 }
 .ydb-tree-view__item:hover .ydb-tree-view__actions {
-  display: block;
+  display: flex;
 }
 .ydb-tree-view__item_active {
   font-weight: bold;
@@ -55,6 +55,8 @@
 .ydb-tree-view__actions {
   display: none;
   margin-left: 6px;
+  align-items: center;
+  overflow: hidden;
 }
 .ydb-tree-view .tree-view_arrow {
   flex-shrink: 0;

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

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

package/build/components/TreeView/TreeView.js

@@ -36,6 +36,7 @@ function TreeView(_ref) {
       _ref$hasArrow = _ref.hasArrow,
       hasArrow = _ref$hasArrow === void 0 ? false : _ref$hasArrow,
       actions = _ref.actions,
+      additionalNodeElements = _ref.additionalNodeElements,
       level = _ref.level;
 
   var rootRef = _react["default"].useRef(null);
@@ -49,7 +50,7 @@ function TreeView(_ref) {
     title: title
   }, name), actions && actions.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: b('actions')
-  }, /*#__PURE__*/_react["default"].createElement(_uikit.DropdownMenu, {
+  }, additionalNodeElements, /*#__PURE__*/_react["default"].createElement(_uikit.DropdownMenu, {
     defaultSwitcherProps: {
       view: 'flat-secondary',
       size: 's',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "",
   "license": "MIT",
   "main": "build/index.js",