feat(NavigationTree): add additionalNodeElements to NavigationTree (#55)

Author: krosy1337

src/components/NavigationTree/NavigationTree.tsx

@@ -34,6 +34,7 @@ export function NavigationTree({
     rootState: partialRootState,
     fetchPath,
     getActions,
+    renderAdditionalNodeElements,
     activePath,
     onActivePathUpdate,
     cache = true,
@@ -55,6 +56,7 @@ export function NavigationTree({
                 dispatch={dispatch}
                 onActivate={onActivePathUpdate}
                 getActions={getActions}
+                renderAdditionalNodeElements={renderAdditionalNodeElements}
                 cache={cache}
                 level={node.level}
             />

src/components/NavigationTree/NavigationTreeNode.tsx

@@ -24,6 +24,7 @@ export interface NavigationTreeNodeProps {
     children?: React.ReactNode;
     onActivate?: (path: string) => void;
     getActions?: NavigationTreeProps['getActions'];
+    renderAdditionalNodeElements?: NavigationTreeProps['renderAdditionalNodeElements'];
     cache?: boolean;
 }
 
@@ -62,6 +63,7 @@ export function NavigationTreeNode({
     children,
     onActivate,
     getActions,
+    renderAdditionalNodeElements,
     cache,
 }: NavigationTreeNodeProps) {
     const nodeState = state[path];
@@ -112,6 +114,10 @@ export function NavigationTreeNode({
         dispatch({type: NavigationTreeActionType.ToggleCollapsed, payload: {path}});
     }, []);
 
+    const additionalNodeElements = React.useMemo(() => {
+        return renderAdditionalNodeElements?.(nodeState.path, nodeState.type);
+    }, [renderAdditionalNodeElements, nodeState]);
+
     const actions = React.useMemo(() => {
         return getActions?.(nodeState.path, nodeState.type);
     }, [getActions, nodeState]);
@@ -123,6 +129,7 @@ export function NavigationTreeNode({
             collapsed={nodeState.collapsed}
             active={nodeState.path === activePath}
             actions={actions}
+            additionalNodeElements={additionalNodeElements}
             hasArrow={nodeState.expandable}
             onClick={handleClick}
             onArrowClick={handleArrowClick}

src/components/NavigationTree/__stories__/NavigationTree.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/react';
+import {Button} from '@gravity-ui/uikit';
 import {NavigationTreeDataItem, NavigationTreeNodeType} from '../types';
 import {NavigationTree, NavigationTreeProps} from '../NavigationTree';
 
@@ -21,6 +22,7 @@ export const Default: Story<NavigationTreeProps> = () => {
             }}
             fetchPath={fetchPath}
             getActions={getActions}
+            renderAdditionalNodeElements={renderAdditionalNodeElements}
             activePath={activePath}
             onActivePathUpdate={setActivePath}
         />
@@ -217,3 +219,33 @@ function getActions(path: string, type: NavigationTreeNodeType) {
 
     return [];
 }
+
+function renderAdditionalNodeElements(path: string, type: NavigationTreeNodeType) {
+    if (type === 'directory') {
+        return (
+            <Button
+                onClick={() => {
+                    alert(`Directory path is "${path}"`);
+                }}
+                size="s"
+            >
+                Show Directory
+            </Button>
+        );
+    }
+
+    if (type === 'table') {
+        return (
+            <Button
+                onClick={() => {
+                    alert(`Table path is "${path}"`);
+                }}
+                size="s"
+            >
+                Show Table
+            </Button>
+        );
+    }
+
+    return undefined;
+}

src/components/NavigationTree/types.ts

@@ -51,6 +51,10 @@ 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;

src/components/TreeView/TreeView.scss

@@ -30,7 +30,7 @@ $step-offset: 24px;
             background-color: var(--yc-color-base-simple-hover);
 
             #{$root}__actions {
-                display: block;
+                display: flex;
             }
         }
 
@@ -75,6 +75,10 @@ $step-offset: 24px;
     &__actions {
         display: none;
         margin-left: 6px;
+
+        align-items: center;
+
+        overflow: hidden;
     }
 
     .tree-view_arrow {

src/components/TreeView/TreeView.tsx

@@ -16,6 +16,7 @@ export interface TreeViewProps {
     onArrowClick?: () => void;
     hasArrow?: boolean;
     actions?: DropdownMenuItemMixed<any>[];
+    additionalNodeElements?: JSX.Element;
     level?: number;
 }
 
@@ -34,6 +35,7 @@ export function TreeView({
     onArrowClick,
     hasArrow = false,
     actions,
+    additionalNodeElements,
     level,
 }: TreeViewProps) {
     const rootRef = React.useRef<HTMLDivElement>(null);
@@ -46,6 +48,7 @@ export function TreeView({
             </div>
             {actions && actions.length > 0 && (
                 <div className={b('actions')}>
+                    {additionalNodeElements}
                     <DropdownMenu
                         defaultSwitcherProps={{
                             view: 'flat-secondary',