@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
97 lines (96 loc) • 5.21 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccountPreview = AccountPreview;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
const Stack_1 = __importDefault(require("@mui/material/Stack"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
const AppProvider_1 = require("../AppProvider");
const LocaleContext_1 = require("../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(AppProvider_1.SessionContext);
const localeText = (0, LocaleContext_1.useLocaleText)();
if (!session || !session.user) {
return null;
}
const avatarContent = slots?.avatar ? ((0, jsx_runtime_1.jsx)(slots.avatar, {})) : ((0, jsx_runtime_1.jsx)(Avatar_1.default, { 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 ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "flex-start", spacing: 2, padding: 2, children: [avatarContent, (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", justifyContent: "space-evenly", children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", fontWeight: "bolder", noWrap: true, children: session.user?.name }), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", noWrap: true, children: session.user?.email })] }), handleClick &&
(slots?.moreIconButton ? ((0, jsx_runtime_1.jsx)(slots.moreIconButton, {})) : ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: handleClick, ...slotProps?.moreIconButton, sx: { alignSelf: "flex-start", ...slotProps?.moreIconButton?.sx }, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, { fontSize: "small" }) })))] }));
}
return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: session.user.name ?? "Account", children: slots?.avatarIconButton ? ((0, jsx_runtime_1.jsx)(slots.avatarIconButton, {})) : ((0, jsx_runtime_1.jsx)(IconButton_1.default, { 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 })) }));
}