@rws-aoa/react-library
Version:
RWS AOA Design System
96 lines • 2.11 kB
TypeScript
import { Dispatch, JSX, SetStateAction } from 'react';
interface SubMenu {
/**
* Optional divider to be shown below menu item
*/
divider?: boolean;
/**
* Optional icon to be displayed in front of the label
*/
icon?: JSX.Element;
/**
* The label of the menu item
*/
label: string;
/**
* The path that the menu item links to on click
*/
to: string;
}
type Menu =
/**
* The path that the menu item links to on click and the subitems shown on hover
*/
{
subItems: SubMenu[];
to: string;
}
/**
* Subitems are required when there is no path that the menu item links to on click
*/
| {
subItems: SubMenu[];
to?: never;
}
/**
* The path that the menu item links to on click is required when there are no subitems on hover
*/
| {
subItems?: never;
to: string;
};
export type AoaPage = Menu & {
/**
* Optional boolean to indicate if it's an external "to" path
*/
externalPath?: boolean;
/**
* The label of the menu item
*/
label: string;
};
interface MenuItemProps {
/**
* Index of the current menu item. Home === 0
*/
readonly index: number;
/**
* The Page object for this menu item
*/
readonly page: AoaPage;
/**
* The currently active menu item
*/
readonly selectedPage: number | null;
/**
* The function to update the active menu item
*/
readonly setSelectedPage: Dispatch<SetStateAction<number | null>>;
}
/**
* Constructs a menu item using pre-defined Rijks styling
*
* @param props - Props to pass to the menu item
* @example
* ```jsx
* <AoaMenuItem
* index={index}
* page={{
* label: "Products",
* to: "/products",
* subItems: [
* {
* label: "Books",
* to: "/books",
* icon: <BookIcon />,
* }
* ]
* }}
* selectedPage={selectedPage}
* setSelectedPage={setSelectedPage}
* />
* ```
*/
export declare function AoaMenuItem(props: MenuItemProps): import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=MenuItem.d.ts.map