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 | 52x 52x 52x 52x 52x 124x 124x 2x 122x 52x 124x 124x 124x 124x 598x 124x 124x 124x 124x 124x 124x 518x 518x | import { Stack, useMediaQuery } from "@mui/material";
import GiveUploadItem from "@shared/FileUpload/GiveUploadItem";
import { useAppTheme } from "@theme/v2/Provider";
import { FilePreviewType } from "@shared/FilePreview/types";
import { fileFormatter } from "@shared/FilePreview/utils";
import useDocumentPreviewV2 from "@shared/FilePreview/hooks/useDocumentPreviewV2";
import { UploadStackProps } from "@shared/FileUpload/types";
import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
import { useRef } from "react";
import { useMerchantSidePanelContext } from "../../Provider/MerchantSidePanelProvider";
const ITEM_HEIGHT = 75;
const ITEM_HEIGHT_MOBILE = 93;
const MAX_HEIGHT = 400;
const MAX_ITEMS_WITHOUT_SCROLL = MAX_HEIGHT / ITEM_HEIGHT;
const getHeight = (itemsLength: number, isMobile: boolean): number => {
const height = itemsLength * (isMobile ? ITEM_HEIGHT_MOBILE : ITEM_HEIGHT);
if (height > MAX_HEIGHT) {
return MAX_HEIGHT;
}
return height;
};
const DocumentsVirtualizedList = ({
items,
isHideDelete,
hideAllButtons,
handleLocalDelete,
totalDocuments = 0,
hideScrollbar = false,
}: UploadStackProps) => {
const { breakpoints } = useAppTheme();
const isDesktop = useMediaQuery(breakpoints.up("v2_sm"));
const merchantId = items?.[0]?.merchantId;
const { loadNextFilesPage } = useMerchantSidePanelContext();
const fileDataList = items?.map((item) => item.fileData) as FilePreviewType[];
const documentList = fileDataList?.map(fileFormatter);
const scroller = useRef<VirtuosoHandle>(null);
const shouldShowOverflow = totalDocuments > MAX_ITEMS_WITHOUT_SCROLL;
const listHeight = getHeight(totalDocuments, !isDesktop);
const { handlePreview } = useDocumentPreviewV2({
entityId: merchantId,
documentList: documentList || [],
isDeleteHidden: isHideDelete,
handleLocalDelete,
});
return (
<Virtuoso
ref={scroller}
style={{
height: listHeight,
width: "100%",
overflowY: shouldShowOverflow ? "auto" : "hidden",
...(hideScrollbar && {
msOverflowStyle: "none",
scrollbarWidth: "none",
}),
}}
className="custom-virtuoso"
data={items}
totalCount={totalDocuments}
endReached={loadNextFilesPage}
itemContent={(index, item) => {
const isBusinessOwnerID =
item?.fileData?.attTypeName === "legal_principal";
return (
<GiveUploadItem
key={item?.fileData?.id || index}
{...item}
isMobile={!isDesktop}
isHideDelete={isHideDelete || isBusinessOwnerID}
handlePreview={handlePreview}
isBusinessOwnerID={isBusinessOwnerID}
hideAllButtons={hideAllButtons}
isLast={index === items.length - 1}
/>
);
}}
/>
);
};
export default DocumentsVirtualizedList;
|