From 68f98e95902d5ad770b75fe7764a4ce9275bf235 Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Tue, 24 Dec 2024 08:59:04 +0100 Subject: [PATCH] rename Menu components --- .../menuButton/AppHeaderMenuButton.tsx | 4 +- packages/admin/admin/src/index.ts | 20 +++--- packages/admin/admin/src/mui/MasterLayout.tsx | 6 +- .../CollapsibleItem.styles.ts | 32 +++++----- .../CollapsibleItem.tsx | 42 ++++++------ .../mui/{menu => mainNavigation}/Context.tsx | 12 ++-- .../{menu => mainNavigation}/Item.styles.ts | 16 ++--- .../src/mui/{menu => mainNavigation}/Item.tsx | 18 +++--- .../ItemAnchorLink.tsx | 13 ++-- .../{menu => mainNavigation}/ItemGroup.tsx | 30 ++++----- .../ItemRouterLink.tsx | 21 ++++-- .../MainNavigation.styles.ts} | 8 +-- .../MainNavigation.tsx} | 32 +++++----- .../admin/cms-admin/src/common/MasterMenu.tsx | 64 ++++++++++--------- 14 files changed, 170 insertions(+), 148 deletions(-) rename packages/admin/admin/src/mui/{menu => mainNavigation}/CollapsibleItem.styles.ts (69%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/CollapsibleItem.tsx (80%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/Context.tsx (57%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/Item.styles.ts (95%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/Item.tsx (81%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/ItemAnchorLink.tsx (72%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/ItemGroup.tsx (80%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/ItemRouterLink.tsx (58%) rename packages/admin/admin/src/mui/{menu/Menu.styles.ts => mainNavigation/MainNavigation.styles.ts} (90%) rename packages/admin/admin/src/mui/{menu/Menu.tsx => mainNavigation/MainNavigation.tsx} (79%) diff --git a/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx b/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx index 9392c04f63..18d739cd2f 100644 --- a/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx +++ b/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx @@ -1,9 +1,9 @@ import { Close, Hamburger, HamburgerClose, HamburgerOpen } from "@comet/admin-icons"; import { ComponentsOverrides, css, IconButton, IconButtonClassKey, IconButtonProps, Theme, useThemeProps } from "@mui/material"; +import { MainNavigationContext } from "mui/mainNavigation/Context"; import { ReactNode, useContext } from "react"; import { createComponentSlot } from "../../helpers/createComponentSlot"; -import { MenuContext } from "../../mui/menu/Context"; export type AppHeaderMenuButtonProps = IconButtonProps; @@ -11,7 +11,7 @@ export type AppHeaderMenuButtonClassKey = IconButtonClassKey; export const AppHeaderMenuButton = (inProps: AppHeaderMenuButtonProps) => { const { children: propChildren, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminAppHeaderMenuButton" }); - const { toggleOpen, open, drawerVariant } = useContext(MenuContext); + const { toggleOpen, open, drawerVariant } = useContext(MainNavigationContext); const closeIcons: Record = { temporary: , diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index aee2372376..bd04654d45 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -201,18 +201,18 @@ export { useStoredState } from "./hooks/useStoredState"; export { InputWithPopper, InputWithPopperComponents, InputWithPopperProps } from "./inputWithPopper/InputWithPopper"; export { InputWithPopperClassKey } from "./inputWithPopper/InputWithPopper.slots"; export { messages } from "./messages"; +export { MainNavigationCollapsibleItem, MainNavigationCollapsibleItemProps } from "./mui/mainNavigation/CollapsibleItem"; +export { MainNavigationCollapsibleItemClassKey } from "./mui/mainNavigation/CollapsibleItem.styles"; +export { IMainNavigationContext, IWithMainNavigation, MainNavigationContext, withMenu } from "./mui/mainNavigation/Context"; +export { MainNavigationItem, MainNavigationItemProps } from "./mui/mainNavigation/Item"; +export { MainNavigationItemClassKey } from "./mui/mainNavigation/Item.styles"; +export { MainNavigationItemAnchorLink, MainNavigationItemAnchorLinkProps } from "./mui/mainNavigation/ItemAnchorLink"; +export { MainNavigationItemGroup, MainNavigationItemGroupClassKey, MainNavigationItemGroupProps } from "./mui/mainNavigation/ItemGroup"; +export { MainNavigationItemRouterLink, MainNavigationItemRouterLinkProps } from "./mui/mainNavigation/ItemRouterLink"; +export { MainNavigation, MainNavigationProps } from "./mui/mainNavigation/MainNavigation"; +export { MainNavigationClassKey } from "./mui/mainNavigation/MainNavigation.styles"; export { MasterLayout, MasterLayoutClassKey, MasterLayoutProps } from "./mui/MasterLayout"; export { MasterLayoutContext } from "./mui/MasterLayoutContext"; -export { MenuCollapsibleItem, MenuCollapsibleItemProps } from "./mui/menu/CollapsibleItem"; -export { MenuCollapsibleItemClassKey } from "./mui/menu/CollapsibleItem.styles"; -export { IMenuContext, IWithMenu, MenuContext, withMenu } from "./mui/menu/Context"; -export { MenuItem, MenuItemProps } from "./mui/menu/Item"; -export { MenuItemClassKey } from "./mui/menu/Item.styles"; -export { MenuItemAnchorLink, MenuItemAnchorLinkProps } from "./mui/menu/ItemAnchorLink"; -export { MenuItemGroup, MenuItemGroupClassKey, MenuItemGroupProps } from "./mui/menu/ItemGroup"; -export { MenuItemRouterLink, MenuItemRouterLinkProps } from "./mui/menu/ItemRouterLink"; -export { Menu, MenuProps } from "./mui/menu/Menu"; -export { MenuClassKey } from "./mui/menu/Menu.styles"; export { MuiThemeProvider } from "./mui/ThemeProvider"; export { RouterBrowserRouter } from "./router/BrowserRouter"; export { RouterConfirmationDialog, RouterConfirmationDialogClassKey, RouterConfirmationDialogProps } from "./router/ConfirmationDialog"; diff --git a/packages/admin/admin/src/mui/MasterLayout.tsx b/packages/admin/admin/src/mui/MasterLayout.tsx index 208d89b0e9..58708f854f 100644 --- a/packages/admin/admin/src/mui/MasterLayout.tsx +++ b/packages/admin/admin/src/mui/MasterLayout.tsx @@ -6,8 +6,8 @@ import { AppHeader } from "../appHeader/AppHeader"; import { AppHeaderMenuButton } from "../appHeader/menuButton/AppHeaderMenuButton"; import { createComponentSlot } from "../helpers/createComponentSlot"; import { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps"; +import { MainNavigationContext } from "./mainNavigation/Context"; import { MasterLayoutContext } from "./MasterLayoutContext"; -import { MenuContext } from "./menu/Context"; export type MasterLayoutClassKey = "root" | "header" | "contentWrapper"; @@ -71,7 +71,7 @@ export function MasterLayout(inProps: MasterLayoutProps) { }; return ( - + @@ -93,7 +93,7 @@ export function MasterLayout(inProps: MasterLayoutProps) { - + ); } diff --git a/packages/admin/admin/src/mui/menu/CollapsibleItem.styles.ts b/packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.styles.ts similarity index 69% rename from packages/admin/admin/src/mui/menu/CollapsibleItem.styles.ts rename to packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.styles.ts index 976c1b8ccd..f31fdf61c2 100644 --- a/packages/admin/admin/src/mui/menu/CollapsibleItem.styles.ts +++ b/packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.styles.ts @@ -2,22 +2,22 @@ import { Typography } from "@mui/material"; import { css } from "@mui/material/styles"; import { createComponentSlot } from "../../helpers/createComponentSlot"; -import { IMenuContext } from "./Context"; -import { MenuItem as CometMenuItem, MenuItemLevel } from "./Item"; +import { IMainNavigationContext } from "./Context"; +import { MainNavigationItem, MainNavigationItemLevel } from "./Item"; -export type MenuCollapsibleItemClassKey = "root" | "open" | "childSelected" | "menuItem" | "itemTitle" | "collapsibleIndicator"; +export type MainNavigationCollapsibleItemClassKey = "root" | "open" | "childSelected" | "menuItem" | "itemTitle" | "collapsibleIndicator"; export type OwnerState = { childSelected: boolean; open: boolean; menuOpen: boolean; subMenuOpen: boolean; - level: MenuItemLevel; - variant: IMenuContext["drawerVariant"]; + level: MainNavigationItemLevel; + variant: IMainNavigationContext["drawerVariant"]; }; -export const Root = createComponentSlot("div")({ - componentName: "MenuCollapsibleItem", +export const Root = createComponentSlot("div")({ + componentName: "MainNavigationCollapsibleItem", slotName: "root", classesResolver: (ownerState) => { return [ownerState.open && "open", ownerState.childSelected && "childSelected"]; @@ -32,8 +32,8 @@ export const Root = createComponentSlot("div")({ - componentName: "MenuCollapsibleItem", +export const MenuItem = createComponentSlot(MainNavigationItem)({ + componentName: "MainNavigationCollapsibleItem", slotName: "menuItem", })( ({ theme, ownerState }) => css` @@ -59,12 +59,12 @@ export const MenuItem = createComponentSlot(CometMenuItem)({ - componentName: "MenuCollapsibleItem", +export const ItemTitle = createComponentSlot(Typography)({ + componentName: "MainNavigationCollapsibleItem", slotName: "itemTitle", })( ({ theme }) => css` @@ -87,8 +87,8 @@ export const ItemTitle = createComponentSlot(Typography)({ - componentName: "MenuCollapsibleItem", +export const CollapsibleIndicator = createComponentSlot("div")({ + componentName: "MainNavigationCollapsibleItem", slotName: "collapsibleIndicator", })( ({ theme, ownerState }) => css` diff --git a/packages/admin/admin/src/mui/menu/CollapsibleItem.tsx b/packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.tsx similarity index 80% rename from packages/admin/admin/src/mui/menu/CollapsibleItem.tsx rename to packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.tsx index fb6be637d5..28c7ba8528 100644 --- a/packages/admin/admin/src/mui/menu/CollapsibleItem.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.tsx @@ -4,22 +4,22 @@ import { Children, cloneElement, MouseEvent, ReactElement, ReactNode, useContext import { matchPath, useLocation } from "react-router"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; -import { CollapsibleIndicator, ItemTitle, MenuCollapsibleItemClassKey, MenuItem, OwnerState, Root } from "./CollapsibleItem.styles"; -import { MenuContext } from "./Context"; -import { MenuItem as CometMenuItem, MenuItemLevel, MenuItemProps } from "./Item"; -import { MenuItemRouterLinkProps } from "./ItemRouterLink"; +import { CollapsibleIndicator, ItemTitle, MainNavigationCollapsibleItemClassKey, MenuItem, OwnerState, Root } from "./CollapsibleItem.styles"; +import { MainNavigationContext } from "./Context"; +import { MainNavigationItem, MainNavigationItemLevel, MainNavigationItemProps } from "./Item"; +import { MainNavigationItemRouterLinkProps } from "./ItemRouterLink"; -export type MenuChild = ReactElement; +export type MainNavigationChild = ReactElement; -export interface MenuCollapsibleItemProps - extends Omit, +export interface MainNavigationCollapsibleItemProps + extends Omit, ThemedComponentBaseProps<{ root: "div"; - menuItem: typeof CometMenuItem; + menuItem: typeof MainNavigationItem; itemTitle: typeof Typography; collapsibleIndicator: "div"; }> { - children: MenuChild | MenuChild[]; + children: MainNavigationChild | MainNavigationChild[]; openByDefault?: boolean; isMenuOpen?: boolean; iconMapping?: { @@ -30,7 +30,7 @@ export interface MenuCollapsibleItemProps }; } -export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { +export const MainNavigationCollapsibleItem = (inProps: MainNavigationCollapsibleItemProps) => { const { classes, level = 1, @@ -55,8 +55,8 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { secondLevelHoverIndicator: secondLevelHoverIndicatorIcon = , } = iconMapping ?? {}; - const { drawerVariant } = useContext(MenuContext); - const itemLevel: MenuItemLevel = level ?? 1; + const { drawerVariant } = useContext(MainNavigationContext); + const itemLevel: MainNavigationItemLevel = level ?? 1; const hasSelectedChild = useRef(false); const location = useLocation(); @@ -69,12 +69,14 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { }, [isMenuOpen]); const childElements = useMemo(() => { - function checkIfPathInLocation(child: ReactElement) { + function checkIfPathInLocation( + child: ReactElement, + ) { return "to" in child.props && matchPath(location.pathname, { path: child.props.to, strict: true }); } hasSelectedChild.current = false; - return Children.map(children, (child: MenuChild) => { + return Children.map(children, (child: MainNavigationChild) => { // child is selected if (checkIfPathInLocation(child)) { hasSelectedChild.current = true; @@ -83,15 +85,17 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { // sub child is selected const subChildElements = - "children" in child.props ? Children.map(child?.props?.children, (child: MenuChild) => child) : ([] as MenuChild[]); - if (subChildElements?.some((child: MenuChild) => child.props && checkIfPathInLocation(child))) { + "children" in child.props + ? Children.map(child?.props?.children, (child: MainNavigationChild) => child) + : ([] as MainNavigationChild[]); + if (subChildElements?.some((child: MainNavigationChild) => child.props && checkIfPathInLocation(child))) { hasSelectedChild.current = true; setIsSubmenuOpen(true); } const newItemLevel = itemLevel + 1; - return cloneElement(child, { + return cloneElement(child, { level: newItemLevel === 1 || newItemLevel === 2 || newItemLevel === 3 ? newItemLevel : undefined, isMenuOpen, isCollapsibleOpen: isSubmenuOpen, @@ -215,11 +219,11 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { declare module "@mui/material/styles" { interface ComponentNameToClassKey { - CometAdminMenuCollapsibleItem: MenuCollapsibleItemClassKey; + CometAdminMenuCollapsibleItem: MainNavigationCollapsibleItemClassKey; } interface ComponentsPropsList { - CometAdminMenuCollapsibleItem: MenuCollapsibleItemProps; + CometAdminMenuCollapsibleItem: MainNavigationCollapsibleItemProps; } interface Components { diff --git a/packages/admin/admin/src/mui/menu/Context.tsx b/packages/admin/admin/src/mui/mainNavigation/Context.tsx similarity index 57% rename from packages/admin/admin/src/mui/menu/Context.tsx rename to packages/admin/admin/src/mui/mainNavigation/Context.tsx index 8b2b8ae6c9..d0aa0aa809 100644 --- a/packages/admin/admin/src/mui/menu/Context.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/Context.tsx @@ -1,16 +1,16 @@ import { ComponentType, createContext, Dispatch, FunctionComponent, SetStateAction } from "react"; -export interface IMenuContext { +export interface IMainNavigationContext { open: boolean; toggleOpen: () => void; drawerVariant: "temporary" | "permanent"; setDrawerVariant: Dispatch>; } -export interface IWithMenu { - menu: IMenuContext; +export interface IWithMainNavigation { + menu: IMainNavigationContext; } -export const MenuContext = createContext({ +export const MainNavigationContext = createContext({ open: false, toggleOpen: () => { // nothing @@ -21,8 +21,8 @@ export const MenuContext = createContext({ }, }); -export const withMenu =

(WrappedComponent: ComponentType

): FunctionComponent

=> { +export const withMenu =

(WrappedComponent: ComponentType

): FunctionComponent

=> { return (props: P) => { - return {(value) => }; + return {(value) => }; }; }; diff --git a/packages/admin/admin/src/mui/menu/Item.styles.ts b/packages/admin/admin/src/mui/mainNavigation/Item.styles.ts similarity index 95% rename from packages/admin/admin/src/mui/menu/Item.styles.ts rename to packages/admin/admin/src/mui/mainNavigation/Item.styles.ts index 4b08263161..e8fe546cf7 100644 --- a/packages/admin/admin/src/mui/menu/Item.styles.ts +++ b/packages/admin/admin/src/mui/mainNavigation/Item.styles.ts @@ -1,10 +1,10 @@ import { css, ListItemButton, ListItemIcon, listItemIconClasses, ListItemText, listItemTextClasses } from "@mui/material"; import { createComponentSlot } from "../../helpers/createComponentSlot"; -import { IMenuContext } from "./Context"; -import { MenuItemLevel } from "./Item"; +import { IMainNavigationContext } from "./Context"; +import { MainNavigationItemLevel } from "./Item"; -export type MenuItemClassKey = +export type MainNavigationItemClassKey = | "root" | "level1" | "level2" @@ -17,17 +17,17 @@ export type MenuItemClassKey = | "text"; export type OwnerState = { - level: MenuItemLevel; + level: MainNavigationItemLevel; open: boolean; collapsibleOpen: boolean; hasSubItems: boolean; hasIcon: boolean; hasSecondaryText: boolean; hasSecondaryAction: boolean; - variant: IMenuContext["drawerVariant"]; + variant: IMainNavigationContext["drawerVariant"]; }; -export const Root = createComponentSlot(ListItemButton)({ +export const Root = createComponentSlot(ListItemButton)({ componentName: "MenuItem", slotName: "root", classesResolver(ownerState) { @@ -321,12 +321,12 @@ export const Root = createComponentSlot(ListItemButton)({ +export const Icon = createComponentSlot(ListItemIcon)({ componentName: "MenuItem", slotName: "icon", })(); -export const Text = createComponentSlot(ListItemText)({ +export const Text = createComponentSlot(ListItemText)({ componentName: "MenuItem", slotName: "text", })(); diff --git a/packages/admin/admin/src/mui/menu/Item.tsx b/packages/admin/admin/src/mui/mainNavigation/Item.tsx similarity index 81% rename from packages/admin/admin/src/mui/menu/Item.tsx rename to packages/admin/admin/src/mui/mainNavigation/Item.tsx index a71cd87a0a..81339a02f8 100644 --- a/packages/admin/admin/src/mui/menu/Item.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/Item.tsx @@ -2,19 +2,19 @@ import { ComponentsOverrides, ListItemButton, ListItemButtonProps, ListItemIcon, import { ReactElement, ReactNode, useContext } from "react"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; -import { MenuContext } from "./Context"; -import { Icon, MenuItemClassKey, OwnerState, Root, Text } from "./Item.styles"; +import { MainNavigationContext } from "./Context"; +import { Icon, MainNavigationItemClassKey, OwnerState, Root, Text } from "./Item.styles"; -export type MenuItemLevel = 1 | 2 | 3; +export type MainNavigationItemLevel = 1 | 2 | 3; -export interface MenuItemProps +export interface MainNavigationItemProps extends ThemedComponentBaseProps<{ root: typeof ListItemButton; icon: typeof ListItemIcon; text: typeof ListItemText; }>, ListItemButtonProps { - level?: MenuItemLevel; + level?: MainNavigationItemLevel; primary: ReactNode; secondary?: ReactNode; icon?: ReactElement; @@ -24,7 +24,7 @@ export interface MenuItemProps hasSubitems?: boolean; } -export const MenuItem = (inProps: MenuItemProps) => { +export const MainNavigationItem = (inProps: MainNavigationItemProps) => { const { primary, secondary, @@ -38,7 +38,7 @@ export const MenuItem = (inProps: MenuItemProps) => { ...restProps } = useThemeProps({ props: inProps, name: "CometAdminMenuItem" }); - const { drawerVariant } = useContext(MenuContext); + const { drawerVariant } = useContext(MainNavigationContext); if (level > 3) throw new Error("Maximum nesting level of 2 exceeded."); @@ -70,11 +70,11 @@ export const MenuItem = (inProps: MenuItemProps) => { declare module "@mui/material/styles" { interface ComponentsPropsList { - CometAdminMenuItem: MenuItemProps; + CometAdminMenuItem: MainNavigationItemProps; } interface ComponentNameToClassKey { - CometAdminMenuItem: MenuItemClassKey; + CometAdminMenuItem: MainNavigationItemClassKey; } interface Components { diff --git a/packages/admin/admin/src/mui/menu/ItemAnchorLink.tsx b/packages/admin/admin/src/mui/mainNavigation/ItemAnchorLink.tsx similarity index 72% rename from packages/admin/admin/src/mui/menu/ItemAnchorLink.tsx rename to packages/admin/admin/src/mui/mainNavigation/ItemAnchorLink.tsx index 89b0ebc95a..5c6880a0c7 100644 --- a/packages/admin/admin/src/mui/menu/ItemAnchorLink.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/ItemAnchorLink.tsx @@ -2,11 +2,16 @@ import { LinkExternal } from "@comet/admin-icons"; import { ListItemButtonProps } from "@mui/material"; import { HTMLProps } from "react"; -import { MenuItem, MenuItemProps } from "./Item"; +import { MainNavigationItem, MainNavigationItemProps } from "./Item"; -export type MenuItemAnchorLinkProps = MenuItemProps & ListItemButtonProps & HTMLProps; +export type MainNavigationItemAnchorLinkProps = MainNavigationItemProps & ListItemButtonProps & HTMLProps; -export const MenuItemAnchorLink = ({ secondaryAction: passedSecondaryAction, isMenuOpen, slotProps, ...props }: MenuItemAnchorLinkProps) => { +export const MainNavigationItemAnchorLink = ({ + secondaryAction: passedSecondaryAction, + isMenuOpen, + slotProps, + ...props +}: MainNavigationItemAnchorLinkProps) => { const secondaryAction = passedSecondaryAction !== undefined ? ( // don't use ?? to allow null as value and with that an empty secondaryAction passedSecondaryAction @@ -15,7 +20,7 @@ export const MenuItemAnchorLink = ({ secondaryAction: passedSecondaryAction, isM ); return ( - ({ +const Root = createComponentSlot("div")({ componentName: "MenuItemGroup", slotName: "root", classesResolver: (ownerState) => { @@ -27,12 +27,12 @@ const Root = createComponentSlot("div")({ `, ); -const Tooltip = createComponentSlot(CommonTooltip)({ +const Tooltip = createComponentSlot(CommonTooltip)({ componentName: "MenuItemGroup", slotName: "tooltip", })(); -const TitleContainer = createComponentSlot("div")({ +const TitleContainer = createComponentSlot("div")({ componentName: "MenuItemGroup", slotName: "titleContainer", })( @@ -52,7 +52,7 @@ const TitleContainer = createComponentSlot("div")({ +const Title = createComponentSlot(Typography)({ componentName: "MenuItemGroup", slotName: "title", })( @@ -69,7 +69,7 @@ const Title = createComponentSlot(Typography) `, ); -const ShortTitle = createComponentSlot(Typography)({ +const ShortTitle = createComponentSlot(Typography)({ componentName: "MenuItemGroup", slotName: "shortTitle", })( @@ -88,7 +88,7 @@ const ShortTitle = createComponentSlot(Typography) { +export const MainNavigationItemGroup = (inProps: MainNavigationItemGroupProps) => { const { title, shortTitle, helperIcon, children, isMenuOpen, slotProps, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminMenuItemGroup", @@ -141,8 +141,8 @@ export const MenuItemGroup = (inProps: MenuItemGroupProps) => { const childElements = useMemo( () => - Children.map(children, (child: MenuChild) => { - return cloneElement(child, { + Children.map(children, (child: MainNavigationChild) => { + return cloneElement(child, { isMenuOpen, }); }), @@ -176,11 +176,11 @@ export const MenuItemGroup = (inProps: MenuItemGroupProps) => { declare module "@mui/material/styles" { interface ComponentsPropsList { - CometAdminMenuItemGroup: MenuItemGroupProps; + CometAdminMenuItemGroup: MainNavigationItemGroupProps; } interface ComponentNameToClassKey { - CometAdminMenuItemGroup: MenuItemGroupClassKey; + CometAdminMenuItemGroup: MainNavigationItemGroupClassKey; } interface Components { diff --git a/packages/admin/admin/src/mui/menu/ItemRouterLink.tsx b/packages/admin/admin/src/mui/mainNavigation/ItemRouterLink.tsx similarity index 58% rename from packages/admin/admin/src/mui/menu/ItemRouterLink.tsx rename to packages/admin/admin/src/mui/mainNavigation/ItemRouterLink.tsx index 5b5673ce2f..535d4e1c29 100644 --- a/packages/admin/admin/src/mui/menu/ItemRouterLink.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/ItemRouterLink.tsx @@ -4,9 +4,9 @@ import { ReactNode } from "react"; import { Link, LinkProps, Route } from "react-router-dom"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; -import { MenuItem, MenuItemProps } from "./Item"; +import { MainNavigationItem, MainNavigationItemProps } from "./Item"; -interface MenuItemRouterLinkStandardProps +interface MainNavigationRouterLinkItemStandardProps extends ThemedComponentBaseProps<{ badge: typeof Badge; }> { @@ -14,9 +14,14 @@ interface MenuItemRouterLinkStandardProps badgeContent?: ReactNode; } -export type MenuItemRouterLinkProps = MenuItemRouterLinkStandardProps & MenuItemProps & ListItemProps & LinkProps; +export type MainNavigationItemRouterLinkProps = MainNavigationRouterLinkItemStandardProps & MainNavigationItemProps & ListItemProps & LinkProps; -export const MenuItemRouterLink = ({ badgeContent, secondaryAction: passedSecondaryAction, slotProps, ...restProps }: MenuItemRouterLinkProps) => { +export const MainNavigationItemRouterLink = ({ + badgeContent, + secondaryAction: passedSecondaryAction, + slotProps, + ...restProps +}: MainNavigationItemRouterLinkProps) => { const { badge, ...menuItemSlotProps } = slotProps ?? {}; const secondaryAction = badgeContent ? ( // prioritize badgeContent over passed secondaryAction @@ -36,7 +41,13 @@ export const MenuItemRouterLink = ({ badgeContent, secondaryAction: passedSecond {({ match }) => { return ( - + ); }} diff --git a/packages/admin/admin/src/mui/menu/Menu.styles.ts b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts similarity index 90% rename from packages/admin/admin/src/mui/menu/Menu.styles.ts rename to packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts index 2a9e368e10..d45749692b 100644 --- a/packages/admin/admin/src/mui/menu/Menu.styles.ts +++ b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts @@ -1,7 +1,7 @@ import { css, Drawer as MuiDrawer, drawerClasses, DrawerProps, Theme } from "@mui/material"; import { createComponentSlot } from "../../helpers/createComponentSlot"; -import { DEFAULT_DRAWER_WIDTH, DEFAULT_DRAWER_WIDTH_COLLAPSED } from "./Menu"; +import { DEFAULT_DRAWER_WIDTH, DEFAULT_DRAWER_WIDTH_COLLAPSED } from "./MainNavigation"; const getOpenedAnimation = (theme: Theme, drawerVariant: DrawerProps["variant"], drawerWidth: number = DEFAULT_DRAWER_WIDTH) => css` width: ${drawerVariant === "temporary" ? "100%" : `${drawerWidth}px`}; @@ -18,7 +18,7 @@ const getClosedAnimation = ( transition: width ${theme.transitions.easing.sharp} ${theme.transitions.duration.leavingScreen}ms; `; -export type MenuClassKey = "drawer" | "permanent" | "temporary" | "open" | "closed"; +export type MainNavigationClassKey = "drawer" | "permanent" | "temporary" | "open" | "closed"; export type OwnerState = { drawerWidth: number; @@ -38,7 +38,7 @@ const getSharedStyles = (theme: Theme, headerHeight: number) => css` } `; -export const TemporaryDrawer = createComponentSlot(MuiDrawer)({ +export const TemporaryDrawer = createComponentSlot(MuiDrawer)({ componentName: "Menu", slotName: "temporary", classesResolver(ownerState) { @@ -66,7 +66,7 @@ export const TemporaryDrawer = createComponentSlot(MuiDrawer)({ +export const PermanentDrawer = createComponentSlot(MuiDrawer)({ componentName: "Menu", slotName: "permanent", classesResolver(ownerState) { diff --git a/packages/admin/admin/src/mui/menu/Menu.tsx b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.tsx similarity index 79% rename from packages/admin/admin/src/mui/menu/Menu.tsx rename to packages/admin/admin/src/mui/mainNavigation/MainNavigation.tsx index 7d234f843b..40686df94d 100644 --- a/packages/admin/admin/src/mui/menu/Menu.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.tsx @@ -4,16 +4,16 @@ import { useHistory } from "react-router"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; import { MasterLayoutContext } from "../MasterLayoutContext"; -import { MenuChild, MenuCollapsibleItemProps } from "./CollapsibleItem"; -import { MenuContext } from "./Context"; -import { MenuItemProps } from "./Item"; -import { MenuItemRouterLinkProps } from "./ItemRouterLink"; -import { MenuClassKey, OwnerState, PermanentDrawer, TemporaryDrawer } from "./Menu.styles"; +import { MainNavigationChild, MainNavigationCollapsibleItemProps } from "./CollapsibleItem"; +import { MainNavigationContext } from "./Context"; +import { MainNavigationItemProps } from "./Item"; +import { MainNavigationItemRouterLinkProps } from "./ItemRouterLink"; +import { MainNavigationClassKey, OwnerState, PermanentDrawer, TemporaryDrawer } from "./MainNavigation.styles"; export const DEFAULT_DRAWER_WIDTH = 300; export const DEFAULT_DRAWER_WIDTH_COLLAPSED = 60; -export interface MenuProps +export interface MainNavigationProps extends ThemedComponentBaseProps<{ temporaryDrawer: typeof MuiDrawer; permanentDrawer: typeof MuiDrawer; @@ -24,7 +24,7 @@ export interface MenuProps drawerWidthCollapsed?: number; } -export const Menu = (inProps: MenuProps) => { +export const MainNavigation = (inProps: MainNavigationProps) => { const { children, drawerWidth = DEFAULT_DRAWER_WIDTH, @@ -32,9 +32,9 @@ export const Menu = (inProps: MenuProps) => { variant = "permanent", slotProps, ...restProps - } = useThemeProps({ props: inProps, name: "CometAdminMenu" }); + } = useThemeProps({ props: inProps, name: "CometAdminMainNavigation" }); const history = useHistory(); - const { open, toggleOpen, setDrawerVariant, drawerVariant } = useContext(MenuContext); + const { open, toggleOpen, setDrawerVariant, drawerVariant } = useContext(MainNavigationContext); const initialRender = useRef(true); const { headerHeight } = useContext(MasterLayoutContext); @@ -78,8 +78,8 @@ export const Menu = (inProps: MenuProps) => { const childElements = useMemo( () => - Children.map(children, (child: MenuChild) => { - return cloneElement(child, { + Children.map(children, (child: MainNavigationChild) => { + return cloneElement(child, { isMenuOpen: open, }); }), @@ -120,17 +120,17 @@ export const Menu = (inProps: MenuProps) => { declare module "@mui/material/styles" { interface ComponentNameToClassKey { - CometAdminMenu: MenuClassKey; + CometAdminMainNavigation: MainNavigationClassKey; } interface ComponentsPropsList { - CometAdminMenu: MenuProps; + CometAdminMainNavigation: MainNavigationProps; } interface Components { - CometAdminMenu?: { - defaultProps?: ComponentsPropsList["CometAdminMenu"]; - styleOverrides?: ComponentsOverrides["CometAdminMenu"]; + CometAdminMainNavigation?: { + defaultProps?: ComponentsPropsList["CometAdminMainNavigation"]; + styleOverrides?: ComponentsOverrides["CometAdminMainNavigation"]; }; } } diff --git a/packages/admin/cms-admin/src/common/MasterMenu.tsx b/packages/admin/cms-admin/src/common/MasterMenu.tsx index c09d9307f7..19b1b9cf65 100644 --- a/packages/admin/cms-admin/src/common/MasterMenu.tsx +++ b/packages/admin/cms-admin/src/common/MasterMenu.tsx @@ -1,14 +1,14 @@ import { - Menu, - MenuCollapsibleItem, - MenuCollapsibleItemProps, - MenuContext, - MenuItemAnchorLink, - MenuItemAnchorLinkProps, - MenuItemGroup, - MenuItemGroupProps, - MenuItemRouterLink, - MenuItemRouterLinkProps, + MainNavigation, + MainNavigationCollapsibleItem, + MainNavigationCollapsibleItemProps, + MainNavigationContext, + MainNavigationItemAnchorLink, + MainNavigationItemAnchorLinkProps, + MainNavigationItemGroup, + MainNavigationItemGroupProps, + MainNavigationItemRouterLink, + MainNavigationItemRouterLinkProps, useWindowSize, } from "@comet/admin"; import { ReactNode, useContext, useEffect } from "react"; @@ -21,7 +21,7 @@ type MasterMenuItemBase = { }; type MasterMenuItemRoute = MasterMenuItemBase & - Omit & { + Omit & { type: "route"; route?: RouteProps; to?: string; @@ -29,19 +29,19 @@ type MasterMenuItemRoute = MasterMenuItemBase & }; type MasterMenuItemCollapsible = MasterMenuItemBase & - Omit & { + Omit & { type: "collapsible"; items?: Array; route?: RouteProps; }; type MasterMenuItemAnchor = MasterMenuItemBase & - MenuItemAnchorLinkProps & { + MainNavigationItemAnchorLinkProps & { type: "externalLink"; }; type MasterMenuItemGroup = MasterMenuItemBase & - MenuItemGroupProps & { + MainNavigationItemGroupProps & { type: "group"; items: Array< (MasterMenuItemRoute | MasterMenuItemAnchor | MasterMenuItemCollapsible) & { @@ -60,23 +60,23 @@ export type MasterMenuData = MasterMenuItem[]; type MenuItemRouteElement = { type: "route"; - menuElement: MenuItemRouterLinkProps; + menuElement: MainNavigationItemRouterLinkProps; }; type MenuItemCollapsibleElement = { type: "collapsible"; - menuElement: Omit; + menuElement: Omit; items: MenuItem[]; }; type MenuItemAnchorElement = { type: "externalLink"; - menuElement: MenuItemAnchorLinkProps; + menuElement: MainNavigationItemAnchorLinkProps; }; type MenuItemGroupElement = { type: "group"; - menuElement: Omit; + menuElement: Omit; items: MenuItem[]; }; @@ -137,7 +137,7 @@ export function useMenuFromMasterMenuData(items: MasterMenuData): MenuItem[] { export const MasterMenu = ({ menu, permanentMenuMinWidth = 1024 }: MasterMenuProps) => { const menuItems = useMenuFromMasterMenuData(menu); - const { open, toggleOpen } = useContext(MenuContext); + const { open, toggleOpen } = useContext(MainNavigationContext); const windowSize = useWindowSize(); const match = useRouteMatch(); const useTemporaryMenu: boolean = windowSize.width < permanentMenuMinWidth; @@ -155,40 +155,42 @@ export const MasterMenu = ({ menu, permanentMenuMinWidth = 1024 }: MasterMenuPro items.flatMap((item, index) => { if (item.type === "collapsible") { return ( - + {renderMenuItems(item.items)} - + ); } else if (item.type === "externalLink") { - return ; + return ; } else if (item.type === "route") { - return ; + return ; } return []; }); return ( -

+ {menuItems.map((menuElement, index) => { switch (menuElement.type) { case "group": return ( - + {renderMenuItems(menuElement.items)} - + ); case "collapsible": return ( - + {renderMenuItems(menuElement.items)} - + ); case "externalLink": - return ; + return ; case "route": - return ; + return ( + + ); } })} - + ); };