@etsoo/materialui
Version:
TypeScript Material-UI Implementation
71 lines (70 loc) • 3.35 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuButton = MenuButton;
const jsx_runtime_1 = require("react/jsx-runtime");
const Button_1 = __importDefault(require("@mui/material/Button"));
const Menu_1 = __importDefault(require("@mui/material/Menu"));
const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
const react_1 = __importDefault(require("react"));
function MenuButton(props) {
// Destruct
const { button, items, labelField, anchorOrigin = {
vertical: "top",
horizontal: "right"
}, transformOrigin = {
vertical: anchorOrigin.vertical === "center"
? "center"
: anchorOrigin.vertical === "top"
? "bottom"
: "top",
horizontal: anchorOrigin.horizontal
}, sx, ...rest } = props;
// Top?
const isTop = transformOrigin.vertical === "top";
// Menu anchor
const [anchorEl, setAnchorEl] = react_1.default.useState();
// Menu open or not
const isMenuOpen = Boolean(anchorEl);
const handleMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(undefined);
};
const labelFormatter = typeof labelField === "function"
? labelField
: (item) => item[labelField];
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [typeof button === "function" ? (button(handleMenuOpen)) : ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleMenuOpen, ...button })), (0, jsx_runtime_1.jsx)(Menu_1.default, { slotProps: {
paper: {
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
"& .MuiAvatar-root": {
width: 32,
height: 32
},
"&:before": {
content: '""',
display: "block",
position: "absolute",
top: isTop ? 0 : undefined,
bottom: isTop ? undefined : -10,
right: 14,
width: 10,
height: 10,
bgcolor: "background.paper",
transform: "translateY(-50%) rotate(45deg)",
zIndex: 0
},
...{ sx }
}
}
}, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest, children: items.map((item) => {
const label = labelFormatter(item);
return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { disabled: true, children: label }, item.id));
}) })] }));
}