59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import Iconify from '@/components/Iconify';
|
|
import MenuPopover from './MenuPopover';
|
|
import { IconButton, MenuItem } from '@mui/material';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = {
|
|
actions: React.ReactNode;
|
|
};
|
|
|
|
export default function MoreMenu({ actions }: Props) {
|
|
const [open, setOpen] = useState<HTMLElement | null>(null);
|
|
|
|
// Close menu popover
|
|
useEffect(() => {
|
|
setOpen(null);
|
|
}, [actions])
|
|
|
|
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
|
|
setOpen(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setOpen(null);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<IconButton onClick={handleOpen}>
|
|
<Iconify icon={'eva:more-vertical-fill'} width={20} height={20} />
|
|
</IconButton>
|
|
|
|
<MenuPopover
|
|
open={Boolean(open)}
|
|
anchorEl={open}
|
|
onClose={handleClose}
|
|
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
arrow="right-top"
|
|
sx={{
|
|
mt: -1,
|
|
width: 'auto',
|
|
minWidth: 160,
|
|
'& .MuiMenuItem-root': {
|
|
px: 1,
|
|
typography: 'body2',
|
|
borderRadius: 0.75,
|
|
'& svg': { mr: 2, width: 20, height: 20 },
|
|
},
|
|
}}
|
|
>
|
|
{actions}
|
|
</MenuPopover>
|
|
|
|
</>
|
|
);
|
|
}
|