feat(AsideHeader): add onMenuMoreClick

gravity-ui · Oct 11, 2024 · 0ee9ab9 · 0ee9ab9
1 parent 114a0d0
commit 0ee9ab9
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 1 deletion.
diff --git 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<MenuItem>) => 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<DrawerItem>`](./../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
@@ -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
@@ -19,6 +19,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
         headerDecoration,
         multipleTooltip,
         menuMoreTitle,
+        onMenuMoreClick,
         renderFooter,
         compact,
         customBackground,
@@ -53,6 +54,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_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
@@ -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
@@ -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<CompositeBarViewProps> = ({
     type,
     items,
     onItemClick,
+    onMoreClick,
     collapseItems,
     multipleTooltip = false,
 }) => {
@@ -215,6 +217,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                                 onMouseEnter={onMouseEnterByIndex(itemIndex)}
                                 onMouseLeave={onMouseLeave}
                                 onItemClick={onItemClickByIndex(itemIndex)}
+                                onCollapseItemClick={onMoreClick}
                                 collapseItems={collapseItems}
                             />
                         );
@@ -238,6 +241,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
     items,
     menuMoreTitle,
     onItemClick,
+    onMoreClick,
     multipleTooltip = false,
 }) => {
     if (items.length === 0) {
@@ -247,7 +251,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
 
     if (type === 'menu') {
         const minHeight = getItemsMinHeight(items);
-        const collapseItem = getMoreButtonItem(menuMoreTitle);
+        const collapseItem = getMoreButtonItem(menuMoreTitle, onMoreClick);
         node = (
             <div className={b({autosizer: true})} style={{minHeight}}>
                 {items.length !== 0 && (
@@ -267,6 +271,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
                                         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
@@ -39,6 +39,7 @@ export interface ItemProps extends ItemPopup {
         event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     ) => void;
     onItemClickCapture?: (event: React.SyntheticEvent) => void;
+    onCollapseItemClick?: () => void;
     bringForward?: boolean;
 }
 
@@ -85,6 +86,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
         onClosePopup,
         onItemClick,
         onItemClickCapture,
+        onCollapseItemClick,
         bringForward,
     } = props;
 
@@ -172,6 +174,7 @@ export const Item: React.FC<ItemInnerProps> = (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
@@ -29,6 +29,7 @@ export interface MenuItem extends QAProps {
         event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     ) => void;
     onItemClickCapture?: (event: React.SyntheticEvent) => void;
+    onCollapseItemClick?: () => void;
     itemWrapper?: (
         p: MakeItemParams,
         makeItem: (p: MakeItemParams) => React.ReactNode,