@parkassist/pa-ui-library
Version:
INX Platform elements
303 lines (297 loc) • 10.3 kB
JavaScript
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import Palette from "../../constants/Palette";
import Measures from "../../constants/Measures";
import Popper from '@mui/material/Popper';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Grow from '@mui/material/Grow';
import Paper from '@mui/material/Paper';
import Button from "../Button";
import Separator from "../Separator";
import { Avatar } from "@mui/material";
import LabelWithIcon from "../LabelWithIcon";
import { ProfileSettingsIcon, DocumentationIcon, FullscreenIcon, LogoutIcon, InfoIcon } from "../Icons";
import Helmet from "react-helmet";
import { Column, Row } from "../Layout/Flex";
import FontStyles from "../../constants/FontStyles";
import { CustomTooltip, Icons } from "../..";
export const MenuListStyled = styled(MenuList)`
background:${Palette.BLACK};
`;
export const PaperStyled = styled(Paper)`
background:${Palette.BLACK};
min-width: 300px;
top: 16px !important;
right: -8px;
padding: 0;
`;
export const StyledMenuItem = styled(MenuItem)`
list-style: none;
padding: 8px 16px;
border-radius: 0;
cursor: default;
user-select: none;
font: ${FontStyles.BODY2_FONT};
display: block !important;
color: ${Palette.DARK_GREY} !important;
&:last-of-type {
border-bottom: none;
}
&.disabled {
color: ${Palette.NIGHT_RIDER} !important;
}
&:hover:not(.disabled) {
background-color: ${Palette.LIGHT_BLACK};
color: ${Palette.WHITE} !important;
}
`;
export const TriggerButton = styled(Button)`
box-sizing: border-box;
height: 40px;
width: 40px;
font-size: 16px;
padding: 0;
margin-left: calc(${Measures.minMargin} * 2);
border-radius: 50%;
background: ${Palette.PRIMARY};
border: 1px solid ${Palette.PRIMARY};
color: ${Palette.BLACK};
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;
&:hover {
background: ${Palette.PRIMARY};
border-color: ${Palette.PRIMARY};
box-shadow: none;
}
&:focus {
background: ${Palette.PRIMARY};
border-color: ${Palette.PRIMARY};
}
`;
export const SeparatorStyled = styled(Separator)`
background-color: ${Palette.LIGHT_BLACK};
width: 100%;
margin: 8px 0;
`;
export const AvatarStyled = styled(Avatar)`
color: ${Palette.BLACK} !important;
font: ${FontStyles.BODY1_FONT} !important;
font-size: 16px !important;
height: 56px !important;
width: 56px !important;
margin-right: 8px !important;
`;
export const UserInfoWrapper = styled(Row)`
padding: 8px;
`;
export const TextName = styled(Row)`
color: ${Palette.WHITE};
font: ${FontStyles.BODY1_FONT};
`;
export const TextInfo = styled(Row)`
Color: ${Palette.DIM_GREY};
font: ${FontStyles.BODY2_FONT};
`;
const ProfileButton = _a => {
var _b, _c, _d;
var {
icon = null,
faIcon,
disabled = false,
tooltip = null,
placement = "bottom-start",
user,
handleProfileSettingsClick,
handleOnboardingTourClick,
toggleFullScreen,
handleSignOutClick,
valueScreen = false,
isMobile = false
} = _a,
props = __rest(_a, ["icon", "faIcon", "disabled", "tooltip", "placement", "user", "handleProfileSettingsClick", "handleOnboardingTourClick", "toggleFullScreen", "handleSignOutClick", "valueScreen", "isMobile"]);
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const fullName = user && `${user.firstname || ""} ${user.lastname || ""}`;
const initials = user && `${((_b = user.firstname) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ""}${((_c = user.lastname) === null || _c === void 0 ? void 0 : _c.charAt(0)) || ""}`;
const resources = (_d = user === null || user === void 0 ? void 0 : user.resourcesNames) === null || _d === void 0 ? void 0 : _d.join(",");
const formattedResources = _jsxs(Column, {
children: [_jsx(Row, {
style: {
fontWeight: "bold"
},
children: "Access to:"
}), _jsx(Row, {
children: resources
})]
});
const handleToggle = () => {
setOpen(prevOpen => !prevOpen);
};
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
function handleListKeyDown(event) {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
} else if (event.key === 'Escape') {
setOpen(false);
}
}
const prevOpen = React.useRef(open);
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus();
}
prevOpen.current = open;
}, [open]);
return _jsxs(_Fragment, {
children: [_jsx(Column, {
children: _jsx(TriggerButton, {
ref: anchorRef,
id: "composition-button",
"aria-controls": open ? 'composition-menu' : undefined,
"aria-expanded": open ? 'true' : undefined,
"aria-haspopup": "true",
onClick: handleToggle,
"data-testid": "avatar",
children: initials || "D"
})
}), !isMobile && _jsx(Column, {
children: _jsx(Icons.OpenArrowIcon, {
filter: Palette.FILTER_WHITE,
style: {
transform: "translateY(8px)",
cursor: 'pointer'
},
onClick: handleToggle
})
}), _jsx(Popper, {
open: open,
anchorEl: anchorRef.current,
role: undefined,
placement: placement,
transition: true,
disablePortal: true,
children: ({
TransitionProps
}) => _jsx(Grow, Object.assign({}, TransitionProps, {
style: {
transformOrigin: 'right top',
marginTop: 20,
marginRight: isMobile ? 0 : -20
},
children: _jsx(PaperStyled, {
children: _jsx(ClickAwayListener, {
onClickAway: handleClose,
children: _jsxs(MenuListStyled, {
autoFocusItem: open,
id: "composition-menu",
"aria-labelledby": "composition-button",
onKeyDown: handleListKeyDown,
"data-testid": "avatar-menu-list",
children: [_jsxs(UserInfoWrapper, {
style: {
marginLeft: 15
},
children: [_jsx(Column, {
children: _jsx(AvatarStyled, {
sx: {
bgcolor: `${Palette.PRIMARY}`
},
children: initials || "D"
})
}), _jsxs(Column, {
style: {
marginLeft: 5
},
children: [_jsx(TextName, {
"data-testid": "user-name",
children: fullName || "default"
}), _jsx(TextInfo, {
children: user === null || user === void 0 ? void 0 : user.email
}), _jsxs(TextInfo, {
children: [_jsx(Column, {
style: {
marginRight: 8
},
children: user && user.type + " user"
}), _jsx(Column, {
style: {
marginTop: 2
},
children: (user === null || user === void 0 ? void 0 : user.type) && _jsx(CustomTooltip, {
placement: "bottom",
content: user.type === "Global" ? "Full access to INX" : formattedResources,
children: _jsx(InfoIcon, {
size: 14,
filter: Palette.FILTER_DIM_GREY
})
})
})]
})]
})]
}), _jsx(SeparatorStyled, {}), _jsx(StyledMenuItem, {
datatestid: "profile-settings",
onClick: handleProfileSettingsClick,
children: _jsx(LabelWithIcon, {
text: "Profile settings",
leftIcon: _jsx(ProfileSettingsIcon, {})
})
}), _jsx(StyledMenuItem, {
onClick: () => {
handleOnboardingTourClick();
setOpen(false);
},
children: _jsx(LabelWithIcon, {
text: "Onboarding tour",
leftIcon: _jsx(DocumentationIcon, {})
})
}), _jsx(StyledMenuItem, {
onClick: toggleFullScreen,
children: _jsx(LabelWithIcon, {
text: valueScreen ? "Exit fullscreen mode" : "Fullscreen mode",
leftIcon: _jsx(FullscreenIcon, {})
})
}), _jsx(SeparatorStyled, {}), _jsx(StyledMenuItem, {
dataTestId: "sign-out",
onClick: handleSignOutClick,
children: _jsx(LabelWithIcon, {
text: "Sign out",
leftIcon: _jsx(LogoutIcon, {})
})
})]
})
})
})
}))
}), _jsx(Helmet, {
children: _jsx("style", {
children: `
.MuiMenuItem-root img {
filter: ${Palette.FILTER_DIM_GREY} !important;
}
.MuiMenuItem-root:hover img {
filter: ${Palette.FILTER_WHITE} !important;
}
`
})
})]
});
};
export default ProfileButton;