feat(AsideHeader): add onAllPagesClick callback (#329)

* feat(AsideHeader): add onAllPagesClick callback * fix(AsideHeader): update useMemo dependencies
gravity-ui · Oct 24, 2024 · c8978c0 · c8978c0
1 parent c85b17b
commit c8978c0
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 2 deletions.
diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md
@@ -137,6 +137,7 @@ export const Aside: FC = () => {
 | 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;`                                |                           |
+| onAllPagesClick           | Callback will be called when "All pages" 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__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -296,6 +296,7 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                     setCompact(v);
                 }}
                 onMenuMoreClick={() => console.log('onMenuMoreClick')}
+                onAllPagesClick={() => console.log('onAllPagesClick')}
             />
         </div>
     );

diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx
@@ -45,6 +45,7 @@ export interface AsideHeaderGeneralProps extends QAProps {
     onClosePanel?: () => void;
     onChangeCompact?: (compact: boolean) => void;
     onMenuMoreClick?: () => void;
+    onAllPagesClick?: () => void;
     openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;
 }
 

diff --git a/src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx b/src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx
@@ -11,7 +11,7 @@ const EMPTY_MENU_ITEMS: MenuItem[] = [];
 export const useAsideHeaderInnerContextValue = (
     props: AsideHeaderProps & {size: number},
 ): AsideHeaderInnerContextType => {
-    const {size, onClosePanel, menuItems, panelItems, onMenuItemsChanged} = props;
+    const {size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick} = props;
     const [innerVisiblePanel, setInnerVisiblePanel] = useState<InnerPanels | undefined>();
     const ALL_PAGES_MENU_ITEM = React.useMemo(() => {
         return getAllPagesMenuItem();
@@ -59,10 +59,11 @@ export const useAsideHeaderInnerContextValue = (
                       {
                           ...ALL_PAGES_MENU_ITEM,
                           current: innerVisiblePanel === InnerPanels.AllPages,
+                          onItemClick: onAllPagesClick,
                       },
                   ]
                 : menuItems || EMPTY_MENU_ITEMS,
-        [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM],
+        [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM, onAllPagesClick],
     );
 
     const innerPanelItems = useMemo(() => {