From aafc3cbeb05bd1103448c60057273a34d5828883 Mon Sep 17 00:00:00 2001 From: Aleksandr Chuchunkov Date: Tue, 8 Oct 2024 16:32:46 +0300 Subject: [PATCH] feat(AsideHeader): add onMenuMoreClick --- src/components/AsideHeader/README.md | 1 + .../AsideHeader/__stories__/AsideHeader.stories.tsx | 1 + src/components/AsideHeader/components/FirstPanel.tsx | 2 ++ src/components/AsideHeader/types.tsx | 1 + src/components/CompositeBar/CompositeBar.tsx | 7 ++++++- src/components/CompositeBar/Item/Item.tsx | 3 +++ src/components/types.ts | 1 + 7 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md index bee887d..25ad916 100644 --- a/src/components/AsideHeader/README.md +++ b/src/components/AsideHeader/README.md @@ -136,6 +136,7 @@ export const Aside: FC = () => { | onChangeCompact | Callback will be called when changing navigation visual state | `(compact: boolean) => void;` | | | onClosePanel | Callback will be called when closing panel. You can add panels via `PanelItems` prop | `() => void;` | | | onMenuItemsChanged | Callback will be called when updating list of the menuItems in `AllPagesPanel` | `(items: Array) => void` | | +| onMenuMoreClick | Callback will be called when some items don't fit and "more" button is clicked | `() => void;` | | | openModalSubscriber | Function notifies `AsideHeader` about Modals visibility changes | `( (open: boolean) => void) => void` | | | panelItems | Items for `Drawer` component. Used for show additional information over main content | [`Array`](./../Drawer/README.md#draweritem-props) | `[]` | | renderContent | Function rendering the main content at the right of the `AsideHeader` | `(data: {size: number}) => React.ReactNode` | | diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx index 1ec40ed..878a8ad 100644 --- a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx @@ -113,6 +113,7 @@ const AdvancedUsageTemplate: StoryFn = (args) => { 'aria-label': 'Service', }} onChangeCompact={setCompact} + onMenuMoreClick={() => alert('onMenuMoreClick')} qa={'pl-aside'} {...args} /> diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx index 759d0dc..c0b572a 100644 --- a/src/components/AsideHeader/components/FirstPanel.tsx +++ b/src/components/AsideHeader/components/FirstPanel.tsx @@ -19,6 +19,7 @@ export const FirstPanel = React.forwardRef((_props, ref) => { headerDecoration, multipleTooltip, menuMoreTitle, + onMenuMoreClick, renderFooter, compact, customBackground, @@ -53,6 +54,7 @@ export const FirstPanel = React.forwardRef((_props, ref) => { items={visibleMenuItems} menuMoreTitle={menuMoreTitle ?? i18n('label_more')} onItemClick={onItemClick} + onMoreClick={onMenuMoreClick} multipleTooltip={multipleTooltip} /> ) : ( diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx index fb1c5d0..d3bcca9 100644 --- a/src/components/AsideHeader/types.tsx +++ b/src/components/AsideHeader/types.tsx @@ -37,6 +37,7 @@ export interface AsideHeaderGeneralProps extends QAProps { }) => React.ReactNode; onClosePanel?: () => void; onChangeCompact?: (compact: boolean) => void; + onMenuMoreClick?: () => void; openModalSubscriber?: (subscriber: OpenModalSubscriber) => void; } diff --git a/src/components/CompositeBar/CompositeBar.tsx b/src/components/CompositeBar/CompositeBar.tsx index 3124fa7..5ac276c 100644 --- a/src/components/CompositeBar/CompositeBar.tsx +++ b/src/components/CompositeBar/CompositeBar.tsx @@ -39,6 +39,7 @@ export type CompositeBarProps = CompositeBarItems & { ) => void; multipleTooltip?: boolean; menuMoreTitle?: string; + onMoreClick?: () => void; }; type CompositeBarViewProps = CompositeBarProps & { @@ -49,6 +50,7 @@ const CompositeBarView: FC = ({ type, items, onItemClick, + onMoreClick, collapseItems, multipleTooltip = false, }) => { @@ -215,6 +217,7 @@ const CompositeBarView: FC = ({ onMouseEnter={onMouseEnterByIndex(itemIndex)} onMouseLeave={onMouseLeave} onItemClick={onItemClickByIndex(itemIndex)} + onCollapseItemClick={onMoreClick} collapseItems={collapseItems} /> ); @@ -238,6 +241,7 @@ export const CompositeBar: FC = ({ items, menuMoreTitle, onItemClick, + onMoreClick, multipleTooltip = false, }) => { if (items.length === 0) { @@ -247,7 +251,7 @@ export const CompositeBar: FC = ({ if (type === 'menu') { const minHeight = getItemsMinHeight(items); - const collapseItem = getMoreButtonItem(menuMoreTitle); + const collapseItem = getMoreButtonItem(menuMoreTitle, onMoreClick); node = (
{items.length !== 0 && ( @@ -267,6 +271,7 @@ export const CompositeBar: FC = ({ type="menu" items={listItems} onItemClick={onItemClick} + onMoreClick={onMoreClick} collapseItems={collapseItems} multipleTooltip={multipleTooltip} /> diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx index 830d0c6..a0044a8 100644 --- a/src/components/CompositeBar/Item/Item.tsx +++ b/src/components/CompositeBar/Item/Item.tsx @@ -39,6 +39,7 @@ export interface ItemProps extends ItemPopup { event: React.MouseEvent, ) => void; onItemClickCapture?: (event: React.SyntheticEvent) => void; + onCollapseItemClick?: () => void; bringForward?: boolean; } @@ -85,6 +86,7 @@ export const Item: React.FC = (props) => { onClosePopup, onItemClick, onItemClickCapture, + onCollapseItemClick, bringForward, } = props; @@ -172,6 +174,7 @@ export const Item: React.FC = (props) => { * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems */ toggleOpen(!open); + onCollapseItemClick?.(); } else { onItemClick?.(item, false, event); } diff --git a/src/components/types.ts b/src/components/types.ts index 6a333eb..382ac89 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -29,6 +29,7 @@ export interface MenuItem extends QAProps { event: React.MouseEvent, ) => void; onItemClickCapture?: (event: React.SyntheticEvent) => void; + onCollapseItemClick?: () => void; itemWrapper?: ( p: MakeItemParams, makeItem: (p: MakeItemParams) => React.ReactNode,