@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
59 lines (58 loc) • 3.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
import Stack from "@mui/material/Stack";
import IconButton from "@mui/material/IconButton";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import { SessionContext } from "../AppProvider";
import { useLocaleText } from "../shared/locales/LocaleContext";
function formatNameInitials(user) {
if (user == null)
return null;
const name = user.latinName || user.name;
if (name == null)
return null;
const chars = name
.trim()
.split(/\s+/g)
.map((part) => {
const firstChar = part.charAt(0).toUpperCase();
return firstChar >= "A" && firstChar <= "Z" ? firstChar : "";
})
.filter((c) => c)
.slice(-2);
if (chars.length === 0)
return null;
return chars.join("");
}
/**
* The AccountPreview component displays user account information.
*
* Demos:
*
* - [Account](https://mui.com/toolpad/core/react-account/)
*
* API:
*
* - [AccountPreview API](https://mui.com/toolpad/core/api/account-preview)
*/
function AccountPreview(props) {
const { slots, variant = "condensed", slotProps, open, handleClick } = props;
const session = React.useContext(SessionContext);
const localeText = useLocaleText();
if (!session || !session.user) {
return null;
}
const avatarContent = slots?.avatar ? (_jsx(slots.avatar, {})) : (_jsx(Avatar, { src: session.user?.image || "", alt: session.user?.name || session.user?.email || "", sx: {
height: variant === "expanded" ? 48 : 32,
width: variant === "expanded" ? 48 : 32
}, ...slotProps?.avatar, children: session.user?.image ? null : formatNameInitials(session.user) }));
if (variant === "expanded") {
return (_jsxs(Stack, { direction: "row", justifyContent: "flex-start", spacing: 2, padding: 2, children: [avatarContent, _jsxs(Stack, { direction: "column", justifyContent: "space-evenly", children: [_jsx(Typography, { variant: "body2", fontWeight: "bolder", noWrap: true, children: session.user?.name }), _jsx(Typography, { variant: "caption", noWrap: true, children: session.user?.email })] }), handleClick &&
(slots?.moreIconButton ? (_jsx(slots.moreIconButton, {})) : (_jsx(IconButton, { size: "small", onClick: handleClick, ...slotProps?.moreIconButton, sx: { alignSelf: "flex-start", ...slotProps?.moreIconButton?.sx }, children: _jsx(MoreVertIcon, { fontSize: "small" }) })))] }));
}
return (_jsx(Tooltip, { title: session.user.name ?? "Account", children: slots?.avatarIconButton ? (_jsx(slots.avatarIconButton, {})) : (_jsx(IconButton, { onClick: handleClick, "aria-label": localeText.accountIconButtonAriaLabel, size: "small", "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, ...slotProps?.avatarIconButton, children: avatarContent })) }));
}
export { AccountPreview };