@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
67 lines (66 loc) • 3.52 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import Popover from "@mui/material/Popover";
import Divider from "@mui/material/Divider";
import Stack from "@mui/material/Stack";
import { SignInButton } from "./SignInButton";
import { SignOutButton } from "./SignOutButton";
import { AccountPreview } from "./AccountPreview";
import { AccountPopoverHeader } from "./AccountPopoverHeader";
import { AccountPopoverFooter } from "./AccountPopoverFooter";
import { SessionContext, AuthenticationContext } from "../AppProvider/AppProvider";
/**
*
* Demos:
*
* - [Account](https://mui.com/toolpad/core/react-account/)
* - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
* - [Sign-in Page](https://mui.com/toolpad/core/react-sign-in-page/)
*
* API:
*
* - [Account API](https://mui.com/toolpad/core/api/account)
*/
function Account(props) {
const { slots, slotProps } = props;
const [anchorEl, setAnchorEl] = React.useState(null);
const session = React.useContext(SessionContext);
const authentication = React.useContext(AuthenticationContext);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
if (!authentication) {
return null;
}
if (!session?.user) {
return slots?.signInButton ? (_jsx(slots.signInButton, { onClick: authentication.signIn })) : (_jsx(SignInButton, { ...slotProps?.signInButton }));
}
return (_jsxs(React.Fragment, { children: [slots?.preview ? (_jsx(slots.preview, { handleClick: handleClick, open: open })) : (_jsx(AccountPreview, { variant: "condensed", handleClick: handleClick, open: open, ...slotProps?.preview })), slots?.popover ? (_jsx(slots.popover, { ...slotProps?.popover })) : (_jsx(Popover, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, ...slotProps?.popover, slotProps: {
paper: {
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 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
}
}
},
...slotProps?.popover?.slotProps
}, children: slots?.popoverContent ? (_jsx(slots.popoverContent, { ...slotProps?.popoverContent })) : (_jsxs(Stack, { direction: "column", ...slotProps?.popoverContent, children: [_jsx(AccountPopoverHeader, { children: _jsx(AccountPreview, { variant: "expanded" }) }), _jsx(Divider, {}), _jsx(AccountPopoverFooter, { children: _jsx(SignOutButton, { ...slotProps?.signOutButton }) })] })) }))] }));
}
export { Account };