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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 3x 24x 3x 24x | import { MoreHoriz } from "@mui/icons-material";
import { IconButton, Menu, styled } from "@mui/material";
interface EllipsisMenuProps {
children: React.ReactNode;
idName: string;
isMenuOpen: boolean;
menuAnchorEl: Element | null;
onMenuOpen: (event: React.MouseEvent<HTMLButtonElement>) => void;
onMenuClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
}
const MenuWrapper = styled("div")(({ theme }) => ({
display: "flex",
justifyContent: "flex-end",
flexDirection: "column",
}));
//** @param {children} should be the MenuItems */
const EllipsisMenu = ({
children,
idName,
isMenuOpen,
menuAnchorEl,
onMenuOpen,
onMenuClose,
}: EllipsisMenuProps) => {
return (
<MenuWrapper>
<>
<IconButton
aria-controls={isMenuOpen ? `${idName}-more-options` : undefined}
aria-haspopup="true"
aria-expanded={isMenuOpen ? "true" : undefined}
id={`${idName}-more-options`}
data-testid={`${idName}-more-options`}
onClick={onMenuOpen}
size="large"
>
<MoreHoriz fontSize="small" />
</IconButton>
<Menu
anchorEl={menuAnchorEl}
id={`${idName}-more-options`}
data-testid={`${idName}-more-options`}
open={isMenuOpen}
onClose={onMenuClose}
slotProps={{
paper: {
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5,
"& .MuiAvatar-root": {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
"&::before": {
content: '""',
display: "block",
position: "absolute",
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: "background.paper",
transform: "translateY(-50%) rotate(45deg)",
zIndex: 0,
},
},
},
}}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
>
{children}
</Menu>
</>
</MenuWrapper>
);
};
export default EllipsisMenu;
|