Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 5x 5x 5x 1707x 312x 63x 396x 312x 5x | import {
Menu as MuiMenu,
MenuItem as MuiMenuItem,
MenuItemProps as MuiMenuItemProps,
MenuProps,
styled,
} from "@mui/material";
import React from "react";
interface MenuItemProps extends Omit<MuiMenuItemProps, "className"> {
hasNotification?: boolean;
hasBottomDivider?: boolean;
}
const StyledMenuItem = styled(MuiMenuItem, {
shouldForwardProp: (prop) =>
prop !== "hasNotification" && prop !== "hasBottomDivider",
})<MenuItemProps>(({ theme, hasBottomDivider, hasNotification }) => ({
paddingInline: theme.spacing(2),
...(hasNotification && {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}),
...(hasBottomDivider && {
borderBottom: `1px solid ${theme.palette.divider}`,
}),
}));
export default function Menu(props: Omit<MenuProps, "className">) {
return <MuiMenu {...props} />;
}
//forwarding ref is necessary because Menu
//injects refs into MenuItems
export const MenuItem = React.forwardRef(
(props: MenuItemProps, ref: React.ForwardedRef<HTMLLIElement>) => {
const { hasNotification, hasBottomDivider, ...restProps } = props;
return (
<StyledMenuItem
{...restProps}
hasNotification={hasNotification}
hasBottomDivider={hasBottomDivider}
ref={ref}
/>
);
}
);
MenuItem.displayName = "MenuItem";
|