feat(AsideHeader/SubheaderItem): support popup props (#89)

* feat(AsideHeader/SubheaderItem)!: support popup props * chore: remove useless story * fix(CompositeBar): fix enableTooltip case
gravity-ui · Aug 21, 2023 · 64f24e9 · 64f24e9
1 parent bd71f8b
commit 64f24e9
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 147 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {block} from '../utils/cn';
 
-import {MenuItem, AsideHeaderDict, Dict, LogoProps} from '../types';
+import {MenuItem, AsideHeaderDict, Dict, LogoProps, SubheaderMenuItem} from '../types';
 
 import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH, defaultDict} from '../constants';
 
@@ -43,7 +43,7 @@ interface AsideHeaderGeneralProps {
 
 interface AsideHeaderDefaultProps {
     panelItems: DrawerItemProps[];
-    subheaderItems: MenuItem[];
+    subheaderItems: SubheaderMenuItem[];
     menuItems: MenuItem[];
     headerDecoration: boolean;
 }
@@ -92,8 +92,8 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
                         {this.renderHeader()}
                         {menuItems?.length ? (
                             <CompositeBar
+                                type="menu"
                                 items={menuItems}
-                                enableCollapsing={true}
                                 dict={dict}
                                 onItemClick={this.onItemClick}
                                 multipleTooltip={multipleTooltip}
@@ -128,8 +128,8 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
             {this.renderLogo()}
 
             <CompositeBar
+                type="subheader"
                 items={this.props.subheaderItems}
-                enableCollapsing={false}
                 onItemClick={this.onItemClick}
             />
 

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -2,8 +2,7 @@ import React, {FC} from 'react';
 import block from 'bem-cn-lite';
 
 import {AsideHeader, FooterItem} from '../..';
-import {text as placeholderText} from './moc';
-import {menuItemsShowcase} from './../../CompositeBar/__stories__/moc';
+import {menuItemsShowcase, text as placeholderText} from './moc';
 import {RadioButton, Radio} from '@gravity-ui/uikit';
 
 import logoIcon from '../../../../.storybook/assets/logo.svg';
@@ -35,6 +34,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
     initialCompact = false,
 }) => {
     const [popupVisible, setPopupVisible] = React.useState(false);
+    const [subheaderPopupVisible, setSubheaderPopupVisible] = React.useState(false);
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
     const [compact, setCompact] = React.useState(initialCompact);
     const [headerDecoration, setHeaderDecoration] = React.useState<string>(BOOLEAN_OPTIONS.Yes);
@@ -68,21 +68,43 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                 ]}
                 subheaderItems={[
                     {
-                        id: 'services',
-                        title: 'Services',
-                        icon: menuItemIcon,
-                        iconSize: 20,
+                        item: {
+                            id: 'services',
+                            title: 'Services',
+                            icon: menuItemIcon,
+                            iconSize: 20,
+                            onItemClick: () => {
+                                setVisiblePanel(undefined);
+                                setSubheaderPopupVisible(!subheaderPopupVisible);
+                            },
+                        },
+                        popupVisible: subheaderPopupVisible,
+                        onClosePopup: () => setSubheaderPopupVisible(false),
+                        renderPopupContent: () => {
+                            return (
+                                <div className={b('settings-ul')}>
+                                    <ul>
+                                        <li>Set 1</li>
+                                        <li>Set 2</li>
+                                        <li>Set 3</li>
+                                        <li>Set 4</li>
+                                    </ul>
+                                </div>
+                            );
+                        },
                     },
                     {
-                        id: 'search',
-                        title: 'Search',
-                        icon: menuItemIcon,
-                        current: visiblePanel === Panel.Search,
-                        iconSize: 20,
-                        onItemClick: () =>
-                            setVisiblePanel(
-                                visiblePanel === Panel.Search ? undefined : Panel.Search,
-                            ),
+                        item: {
+                            id: 'search',
+                            title: 'Search',
+                            icon: menuItemIcon,
+                            current: visiblePanel === Panel.Search,
+                            iconSize: 20,
+                            onItemClick: () =>
+                                setVisiblePanel(
+                                    visiblePanel === Panel.Search ? undefined : Panel.Search,
+                                ),
+                        },
                     },
                 ]}
                 compact={compact}
@@ -108,7 +130,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                                     setPopupVisible(!popupVisible);
                                 },
                             }}
-                            enableTooltip={!popupVisible}
+                            enableTooltip={false}
                             popupVisible={popupVisible}
                             popupOffset={[0, 8]}
                             onClosePopup={() => setPopupVisible(false)}

diff --git a/src/components/AsideHeader/__stories__/moc.ts b/src/components/AsideHeader/__stories__/moc.ts
diff --git a/...mponents/CompositeBar/__stories__/moc.tsx → ...omponents/AsideHeader/__stories__/moc.tsx b/...mponents/CompositeBar/__stories__/moc.tsx → ...omponents/AsideHeader/__stories__/moc.tsx
@@ -89,3 +89,23 @@ export const menuItemsShowcase: MenuItem[] = [
         },
     },
 ];
+
+export const text = `
+Did you attend? He sang by grove ripe -
+The bard of love, the singer of his mourning.
+When fields were silent by the early morning,
+To sad and simple sounds of a pipe
+Did you attend?
+
+Did you behold in dark of forest leaf
+The bard of love, the singer of his sadness?
+The trace of tears, the smile, the utter paleness,
+The quiet look, full of eternal grief,
+Did you behold?
+
+Then did you sigh when hearing how cries
+The bard of love, the singer of his dole?
+When in the woods you saw the young man, sole,
+And met the look of his extinguished eyes,
+Then did you sigh?
+`;
diff --git a/src/components/CompositeBar/CompositeBar.tsx b/src/components/CompositeBar/CompositeBar.tsx
@@ -3,14 +3,15 @@ import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
 import {List} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
-import {AsideHeaderDict, MenuItem} from '../types';
+import {AsideHeaderDict, MenuItem, SubheaderMenuItem} from '../types';
 import {
     getItemsHeight,
     getItemHeight,
     getSelectedItemIndex,
     getItemsMinHeight,
     getMoreButtonItem,
     getAutosizeListItems,
+    isMenuItem,
 } from './utils';
 import {Item, ItemProps} from './Item/Item';
 
@@ -23,32 +24,34 @@ import './CompositeBar.scss';
 
 const b = block('composite-bar');
 
-interface CompositeBarBaseProps {
-    items: MenuItem[];
+export type CompositeBarItem = MenuItem | SubheaderMenuItem;
+
+type CompositeBarItems =
+    | {type: 'menu'; items: MenuItem[]}
+    | {type: 'subheader'; items: SubheaderMenuItem[]};
+
+export type CompositeBarProps = CompositeBarItems & {
     onItemClick?: (
         item: MenuItem,
         collapsed: boolean,
         event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     ) => void;
     multipleTooltip?: boolean;
-}
+    dict?: AsideHeaderDict;
+};
 
-interface CompositeBarViewProps extends CompositeBarBaseProps {
+type CompositeBarViewProps = CompositeBarProps & {
     collapseItems?: MenuItem[];
-}
-
-export interface CompositeBarProps extends CompositeBarBaseProps {
-    enableCollapsing: boolean;
-    dict?: AsideHeaderDict;
-}
+};
 
 const CompositeBarView: FC<CompositeBarViewProps> = ({
+    type,
     items,
     onItemClick,
     collapseItems,
-    multipleTooltip = true,
+    multipleTooltip = false,
 }) => {
-    const ref = useRef<List<MenuItem>>(null);
+    const ref = useRef<List<CompositeBarItem>>(null);
     const tooltipRef = useRef<HTMLDivElement>(null);
     const {
         setValue: setMultipleTooltipContextValue,
@@ -139,47 +142,56 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
     );
 
     return (
-        <>
+        <React.Fragment>
             <div
                 ref={tooltipRef}
                 onMouseEnter={onTooltipMouseEnter}
                 onMouseLeave={onTooltipMouseLeave}
             >
-                <List<MenuItem>
+                <List<CompositeBarItem>
                     ref={ref}
                     items={items}
-                    selectedItemIndex={getSelectedItemIndex(items)}
+                    selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}
                     itemHeight={getItemHeight}
-                    itemClassName={b('root-menu-item')}
                     itemsHeight={getItemsHeight}
+                    itemClassName={b('root-menu-item')}
                     virtualized={false}
                     filterable={false}
                     sortable={false}
-                    renderItem={(item, _isItemActive, itemIndex) => (
-                        <Item
-                            item={item}
-                            onMouseEnter={onMouseEnterByIndex(itemIndex)}
-                            onMouseLeave={onMouseLeave}
-                            onItemClick={onItemClickByIndex(itemIndex)}
-                            collapseItems={collapseItems}
-                            enableTooltip={!multipleTooltip}
-                        />
-                    )}
+                    renderItem={(item, _isItemActive, itemIndex) => {
+                        const itemExtraProps = isMenuItem(item) ? {item} : item;
+                        const enableTooltip = isMenuItem(item)
+                            ? !multipleTooltip
+                            : item.enableTooltip;
+
+                        return (
+                            <Item
+                                {...itemExtraProps}
+                                enableTooltip={enableTooltip}
+                                onMouseEnter={onMouseEnterByIndex(itemIndex)}
+                                onMouseLeave={onMouseLeave}
+                                onItemClick={onItemClickByIndex(itemIndex)}
+                                collapseItems={collapseItems}
+                            />
+                        );
+                    }}
                 />
             </div>
-            <MultipleTooltip
-                open={compact && multipleTooltip && multipleTooltipActive}
-                anchorRef={tooltipRef}
-                placement={['right-start']}
-                items={items}
-            />
-        </>
+            {type === 'menu' && (
+                <MultipleTooltip
+                    open={compact && multipleTooltip && multipleTooltipActive}
+                    anchorRef={tooltipRef}
+                    placement={['right-start']}
+                    items={items}
+                />
+            )}
+        </React.Fragment>
     );
 };
 
 export const CompositeBar: FC<CompositeBarProps> = ({
+    type,
     items,
-    enableCollapsing,
     dict,
     onItemClick,
     multipleTooltip = false,
@@ -189,7 +201,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
     }
     let node: ReactNode;
 
-    if (enableCollapsing) {
+    if (type === 'menu') {
         const minHeight = getItemsMinHeight(items);
         const collapseItem = getMoreButtonItem(dict);
         node = (
@@ -205,6 +217,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
                             return (
                                 <div style={{width, height}}>
                                     <CompositeBarView
+                                        type="menu"
                                         items={listItems}
                                         onItemClick={onItemClick}
                                         collapseItems={collapseItems}
@@ -220,11 +233,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
     } else {
         node = (
             <div className={b()}>
-                <CompositeBarView
-                    items={items}
-                    onItemClick={onItemClick}
-                    multipleTooltip={multipleTooltip}
-                />
+                <CompositeBarView type="subheader" items={items} onItemClick={onItemClick} />
             </div>
         );
     }

diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
@@ -149,7 +149,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
                     {compact ? (
                         <Tooltip
                             content={tooltipText}
-                            disabled={!enableTooltip || (collapsedItem && open)}
+                            disabled={!enableTooltip || (collapsedItem && open) || popupVisible}
                             placement="right"
                             className={b('icon-tooltip', {'item-type': type})}
                         >

diff --git a/src/components/CompositeBar/__stories__/CompositeBar.stories.tsx b/src/components/CompositeBar/__stories__/CompositeBar.stories.tsx