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 | 1x 1x 1x | import { useState } from "react";
import { TDocument, TFileNavigation } from "./types";
import NiceModal, { useModal } from "@ebay/nice-modal-react";
import { BaseModal } from "@common/Modal";
import ErrorCatcher from "@common/Error/ErrorCatcher";
import DocumentMobileDrawer from "./components/DocumentMobileDrawer";
import { TToolbarAction } from "./layout/types";
import Previewer from "./components/Previewer";
import useDocumentList from "./hooks/useDocumentList";
import useBackListener from "@hooks/common/router/useBackListener";
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `${process.env.VITE_ASSETS_CDN_HOST}/unpkg.com_pdfjs-dist@4.4.168_build_pdf.worker.min.mjs`;
export type FilePreviewActions = Omit<TToolbarAction, "onClick"> & {
onClick: (
file: TDocument | null,
handleCloseDrawer?: () => void,
navigation?: TFileNavigation,
) => void;
};
export interface IFilePreviewProps {
file?: TDocument;
onFileChange?: (file: TDocument) => void;
list: TDocument[];
handleClose?: () => void;
toolbarActions: FilePreviewActions[];
headerActions: TToolbarAction[];
merchantID: number;
merchantType: "acquirer" | "enterprise" | "merchant";
disableBackdropClick?: boolean;
}
const FilePreview = ({
file,
list,
handleClose,
toolbarActions,
merchantID,
merchantType,
headerActions,
disableBackdropClick,
}: IFilePreviewProps) => {
const { currentFile, currentIndex, navigation } = useDocumentList(
list,
file,
handleClose,
);
const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState<boolean>(false);
useBackListener(() => handleClose?.());
const toggleDrawer = (open: boolean) => setIsMobileDrawerOpen(open);
const handleOpenDrawer = () => toggleDrawer(true);
const handleCloseDrawer = () => toggleDrawer(false);
const mappedActions = toolbarActions.map(({ onClick, label, ...rest }) => ({
...rest,
label: label,
onClick: () => {
label === "delete"
? onClick(currentFile, handleCloseDrawer, navigation)
: onClick(currentFile);
},
}));
if (!currentFile) return <></>;
return (
<>
<Previewer
navigation={navigation}
file={currentFile}
onClose={handleClose}
headerActions={headerActions}
handleOpenDrawer={handleOpenDrawer}
toolbarActions={mappedActions}
count={list.length}
index={currentIndex}
disableBackdropClick={disableBackdropClick}
/>
<DocumentMobileDrawer
open={isMobileDrawerOpen}
merchantType={merchantType}
file={currentFile}
handleClose={handleCloseDrawer}
actions={mappedActions}
merchantID={merchantID}
/>
</>
);
};
const FilePreviewModal = NiceModal.create(
(props: Omit<IFilePreviewProps, "handleClose">) => {
const modal = useModal();
const handleClose = () => modal.remove();
return (
<BaseModal open={modal.visible} onClose={handleClose}>
<ErrorCatcher errorID="file-preview-modal">
<FilePreview {...props} handleClose={handleClose} />
</ErrorCatcher>
</BaseModal>
);
},
);
export default FilePreviewModal;
|