@elacity-js/uikit
Version:
React / Material UI Design kit for Elacity project
53 lines (50 loc) • 3.05 kB
JavaScript
import { __awaiter } from '../node_modules/tslib/tslib.es6.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import React__default, { useRef, useState, useEffect } from 'react';
import { alpha } from '@mui/material/styles';
import { IconButton, Box } from '@mui/material';
import Avatar from './Avatar.js';
import MenuPopover from './MenuPopover.js';
import Button from './Button/index.js';
import useAuthentication from '../hooks/useAuthentication.js';
function AccountPopover({ label, altLabel, noMenu, size, children }) {
const { isAuthenticated, profile, connect, disconnect } = useAuthentication();
const anchorRef = useRef(null);
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleDisconnect = React__default.useCallback(() => __awaiter(this, void 0, void 0, function* () {
yield (disconnect === null || disconnect === void 0 ? void 0 : disconnect());
setOpen(false);
}), [isAuthenticated]);
const handleConnect = React__default.useCallback(() => __awaiter(this, void 0, void 0, function* () {
yield (connect === null || connect === void 0 ? void 0 : connect());
}), [isAuthenticated]);
useEffect(() => {
if (!anchorRef.current) {
setOpen(false);
}
}, [anchorRef.current]);
return (jsx(Fragment, { children: !isAuthenticated ? (jsx(Button.Animate, { onClick: handleConnect, label: label, altLabel: altLabel })) : (jsxs(Fragment, { children: [jsx(IconButton, Object.assign({ ref: anchorRef, onClick: handleOpen, sx: Object.assign({ padding: 0, width: size, height: size }, (open && {
'&:before': {
zIndex: 1,
content: '\'\'',
width: '100%',
height: '100%',
borderRadius: '50%',
position: 'absolute',
bgcolor: (theme) => alpha(theme.palette.grey[800], 0.6),
},
})) }, { children: jsx(Avatar, { src: profile === null || profile === void 0 ? void 0 : profile.image, alt: profile === null || profile === void 0 ? void 0 : profile.alias, sx: { width: `calc(${size}px - 4px)`, height: `calc(${size}px - 4px)` } }) })), !noMenu && (jsxs(MenuPopover, Object.assign({ open: open && Boolean(anchorRef.current), onClose: handleClose, anchorEl: anchorRef.current, sx: { width: 260, mt: 0.5 } }, { children: [jsx(Fragment, { children: children }), jsx(Box, Object.assign({ sx: { p: 2, pt: 1.5 } }, { children: jsx(Button.Standard, Object.assign({ fullWidth: true, color: "inherit", variant: "outlined", onClick: handleDisconnect }, { children: "Disconnect" })) }))] })))] })) }));
}
AccountPopover.defaultProps = {
size: 44,
label: 'Connect',
altLabel: 'Enter City',
};
export { AccountPopover as default };
//# sourceMappingURL=AccountPopover.js.map