48 lines
1.6 KiB
JavaScript
48 lines
1.6 KiB
JavaScript
import {Fade, Menu} from "@mui/material";
|
|
import * as React from "react";
|
|
|
|
const PopupMenu = (props) => {
|
|
const horizontal = props.horizontal ?? "left";
|
|
const arrow = (horizontal === "right") ? { right: 19 } : { left: 19 };
|
|
return (
|
|
<Menu
|
|
anchorEl={props.anchorEl}
|
|
open={props.open}
|
|
onClose={props.onClose}
|
|
onClick={props.onClose}
|
|
TransitionComponent={Fade}
|
|
PaperProps={{
|
|
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,
|
|
width: 10,
|
|
height: 10,
|
|
bgcolor: 'background.paper',
|
|
transform: 'translateY(-50%) rotate(45deg)',
|
|
zIndex: 0,
|
|
...arrow
|
|
},
|
|
},
|
|
}}
|
|
transformOrigin={{ horizontal: horizontal, vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: horizontal, vertical: 'bottom' }}
|
|
>
|
|
{props.children}
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default PopupMenu;
|