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 | 23x 16x 16x 16x 16x 16x 23x 119x 16x | import { FileUploadIcon } from "@assets/icons";
import { TrashIcon } from "@assets/icons/RebrandedIcons/TrashIcon";
import { EyeIcon } from "@phosphor-icons/react";
import { Text, TruncateText } from "@common/Text";
import { Box, BoxProps, Stack, styled } from "@mui/material";
import { palette } from "@palette";
import { bytesToSize } from "@utils/index";
import { useState } from "react";
import { isFunction } from "lodash";
import { TMerchantDocument } from "@components/Merchants/MerchantPreview/data.types";
type TDocumentListItem = {
document?: TMerchantDocument;
fileName: string;
fileSize: number;
onDelete?: (fileName: string) => void;
onPreview?: (document: TMerchantDocument) => void;
backgroundColor?: string;
hoverColor?: string;
};
export const DocumentListItem = ({
document,
fileName,
fileSize,
onDelete,
onPreview,
backgroundColor = palette.neutral.white,
hoverColor = palette.neutral[5],
}: TDocumentListItem) => {
const { sizeString } = bytesToSize(fileSize);
const [isHovered, setIsHovered] = useState<boolean>(false);
const triggerOver = () => setIsHovered(true);
const disableOver = () => setIsHovered(false);
return (
<DocumentBase
backgroundColor={backgroundColor}
hoverColor={hoverColor}
onMouseOver={triggerOver}
onMouseLeave={disableOver}
data-testid="document-item"
>
<FileUploadIcon />
<Stack direction="column" flex={1}>
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
>
<TruncateText width="75%" color="neutral.80" lineClamp={1}>
{fileName}
</TruncateText>
{!isHovered && (
<Text color="gray.300" variant="caption" justifySelf="flex-end">
{sizeString}
</Text>
)}
</Stack>
</Stack>
{isHovered && (
<Stack>
{isFunction(onDelete) && (
<Box onClick={() => onDelete(fileName)} sx={{ cursor: "pointer" }}>
<TrashIcon width={24} height={24} />
</Box>
)}
{isFunction(onPreview) && document && (
<Box
data-testid="preview-icon"
onClick={() => {
onPreview(document);
}}
sx={{ cursor: "pointer" }}
>
<EyeIcon size={20} color={palette.gray[300]} weight="regular" />
</Box>
)}
</Stack>
)}
</DocumentBase>
);
};
const DocumentBase = styled(Stack, {
shouldForwardProp: (prop) => prop !== "backgroundColor",
})<BoxProps & { backgroundColor?: string; hoverColor?: string }>(
({ backgroundColor, hoverColor }) => ({
flexDirection: "row",
gap: "8px",
height: "48px",
alignItems: "center",
borderRadius: "8px",
padding: "12px 16px 12px 16px",
backgroundColor: backgroundColor,
cursor: "default",
"&:hover": {
backgroundColor: hoverColor,
cursor: "pointer",
},
}),
);
|