@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
40 lines (39 loc) • 3.09 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccountDropdown = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const material_1 = require("@mui/material");
const AccountCircleRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/AccountCircleRounded"));
const ArrowDropUpRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowDropUpRounded"));
const ArrowDropDownRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
const ButtonNaked_1 = require("../ButtonNaked");
const AccountDropdown = ({ user, userActions, }) => {
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
const open = Boolean(anchorEl);
const handleClick = (e) => {
const currentTarget = e.currentTarget;
setAnchorEl(currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const wrapOnClick = (onClick) => (e) => {
if (e) {
e.preventDefault();
}
onClick();
handleClose();
};
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ButtonNaked_1.ButtonNaked, Object.assign({ size: "small", "aria-label": "party-menu-button", "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick, startIcon: (0, jsx_runtime_1.jsx)(AccountCircleRounded_1.default, {}), endIcon: open ? (0, jsx_runtime_1.jsx)(ArrowDropUpRounded_1.default, {}) : (0, jsx_runtime_1.jsx)(ArrowDropDownRounded_1.default, {}), sx: { display: ["none", "flex"] }, weight: "default" }, { children: user.name && user.surname ? `${user.name} ${user.surname}` : "Utente" })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "Assistenza", size: "small", sx: { display: ["flex", "none"], color: "text.primary" }, onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)(AccountCircleRounded_1.default, { fontSize: "inherit" }) })), userActions && Boolean(userActions.length > 0) && ((0, jsx_runtime_1.jsx)(material_1.Menu
/* PaperProps={{ style: { maxHeight: 220, width: 200 } }} */
, Object.assign({
/* PaperProps={{ style: { maxHeight: 220, width: 200 } }} */
anchorOrigin: { vertical: "bottom", horizontal: "right" }, transformOrigin: {
vertical: -8,
horizontal: "right",
}, anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: { "aria-labelledby": "party-menu-button" } }, { children: userActions.map(({ id, label, onClick, icon }) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: wrapOnClick(onClick), sx: { display: "flex" } }, { children: [icon && (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: icon }), label && (0, jsx_runtime_1.jsx)(material_1.ListItemText, { children: label })] }), id))) })))] }));
};
exports.AccountDropdown = AccountDropdown;