@etsoo/materialui
Version:
TypeScript Material-UI Implementation
93 lines (92 loc) • 3.94 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.eventWatcher = void 0;
exports.UserMenu = UserMenu;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const react_2 = __importDefault(require("react"));
const react_router_1 = require("react-router");
const UserAvatar_1 = require("../UserAvatar");
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const Menu_1 = __importDefault(require("@mui/material/Menu"));
/**
* Event watcher
*/
exports.eventWatcher = new react_1.EventWatcher();
const eventWatcherAction = "usermenu.href.transitionend";
/**
* User menu
* @param props Props
* @returns Component
*/
function UserMenu(props) {
// Destruct
const { children, name, avatar } = props;
// User menu anchor
const [anchorEl, setAnchorEl] = react_2.default.useState();
// User menu open or not
const isMenuOpen = Boolean(anchorEl);
// Route
const navigate = (0, react_router_1.useNavigate)();
// User menu
const handleUserMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(undefined);
};
const handleClick = async (event) => {
handleMenuClose();
const item = event.target?.closest("li[href]");
if (item != null) {
const href = item.getAttribute("href");
if (href) {
// Even set transitionDuration = 0, still need to wait a little bit
exports.eventWatcher.add({
type: eventWatcherAction,
action: () => {
navigate(href);
},
once: true
});
}
}
};
return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { edge: "end", "aria-haspopup": "true", onClick: handleUserMenuOpen, color: "inherit", children: (0, jsx_runtime_1.jsx)(UserAvatar_1.UserAvatar, { title: name, src: avatar }) }), (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))",
mt: -0.4,
"& .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
}
}
}
}, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: {
vertical: "bottom",
horizontal: "right"
}, keepMounted: true, transformOrigin: {
vertical: "top",
horizontal: "right"
}, open: isMenuOpen, transitionDuration: 0, onTransitionEnd: () => exports.eventWatcher.do(eventWatcherAction), onClick: handleClick, onClose: handleMenuClose, children: children(handleMenuClose) })] }));
}