From d0569a5567f857986322b283cc1013fc1b7dd0f8 Mon Sep 17 00:00:00 2001 From: yndx-madfriend <99418743+yndx-madfriend@users.noreply.github.com> Date: Fri, 11 Oct 2024 13:31:19 +0300 Subject: [PATCH] feat(AsideHeader): add onMenuMoreClick (#320) * feat(AsideHeader): add onMenuMoreClick --- src/components/AsideHeader/README.md | 1 + .../AsideHeader/__stories__/AsideHeaderShowcase.tsx | 1 + src/components/AsideHeader/components/FirstPanel.tsx | 2 ++ src/components/AsideHeader/types.tsx | 1 + src/components/CompositeBar/CompositeBar.tsx | 5 +++++ src/components/CompositeBar/Item/Item.tsx | 3 +++ src/components/types.ts | 1 + 7 files changed, 14 insertions(+) diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md index bee887d6..25ad9169 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__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx index 27a125b8..e91c275f 100644 --- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx @@ -295,6 +295,7 @@ export const AsideHeaderShowcase: React.FC = ({ onChangeCompact={(v) => { setCompact(v); }} + onMenuMoreClick={() => console.log('onMenuMoreClick')} /> ); diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx index 759d0dc8..c0b572ab 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 a9dbad1a..4e81f3b8 100644 --- a/src/components/AsideHeader/types.tsx +++ b/src/components/AsideHeader/types.tsx @@ -44,6 +44,7 @@ export interface AsideHeaderGeneralProps extends QAProps { editMenuProps?: EditMenuProps; 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 3124fa7f..cb985a1e 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) { @@ -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 830d0c63..a0044a8a 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 32db26d0..5bda500b 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,