Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 76x 76x 76x 76x 76x | import { CloseIcon } from "@assets/rebrandIcons";
import { Text, TruncateText } from "@common/Text";
import { Box, BoxProps, Stack, styled, SxProps } from "@mui/material";
import { palette } from "@palette";
type Props = {
name: string;
image?: string;
selected?: boolean;
handleDeselect?: () => void;
role?: string;
customStyle?: SxProps;
testId?: string;
isCurrentUser?: boolean;
isBigView?: boolean;
};
const AssignmentMenuItem = ({
name,
image,
selected,
handleDeselect,
role,
customStyle,
testId,
isCurrentUser = false,
isBigView = false,
}: Props) => {
const isBig = !!role || isBigView;
return (
<StyledMenuItem selected={selected} data-testid={testId}>
<Stack
alignItems="center"
gap={isBig ? "8px" : 0}
direction="row"
spacing={0.5}
minHeight="40px"
>
<StyledImage
isBig={isBig}
src={image}
alt="name"
data-testid="assignee-avatar"
/>
<Box>
<Stack direction="row" spacing={1} height="100%" alignItems="center">
<TruncateText
lineClamp={1}
fontWeight="regular"
variant="headline"
color={palette.neutral[80]}
{...(isBig && {
color: "#575353",
fontSize: "14px",
})}
sx={{ ...customStyle, wordBreak: "break-all" }}
>
{name}
</TruncateText>
{isCurrentUser && (
<Text
fontWeight="regular"
variant="headline"
color={palette.neutral[70]}
fontSize="14px"
sx={customStyle}
>
{" (You)"}
</Text>
)}
</Stack>
{role && (
<TruncateText
fontSize="12px"
lineClamp={1}
fontWeight="book"
color="#8F8F8F"
sx={customStyle}
>
{role}
</TruncateText>
)}
</Box>
</Stack>
{selected && (
<Box
onClick={(e) => {
e.stopPropagation();
if (handleDeselect) handleDeselect();
}}
display="inline-flex"
data-testid="deselect-assignee"
>
<CloseIcon height={20} width={20} />
</Box>
)}
</StyledMenuItem>
);
};
const StyledMenuItem = styled(Box, {
shouldForwardProp: (prop) => prop !== "selected",
})<BoxProps & { selected?: boolean }>(({ selected }) => ({
display: "flex",
width: "100%",
gap: "8px",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
padding: "0 4px",
borderRadius: "4px",
...(selected && {
background: palette.neutral[10],
}),
}));
const StyledImage = styled("img", {
shouldForwardProp: (prop) => prop !== "isBig",
})(({ isBig }: { isBig: boolean }) => ({
height: isBig ? 32 : 24,
width: isBig ? 32 : 24,
borderRadius: "100%",
objectFit: "cover",
}));
export default AssignmentMenuItem;
|