90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import styles from "./styles.module.scss";
|
|
import { useRef, useState } from "react";
|
|
import { Document, DocumentProps, Page } from "react-pdf";
|
|
import Loader, { LoaderColor } from "../Loader";
|
|
import { Pagination } from "@mui/material";
|
|
|
|
interface IPDFViewerProps {
|
|
width?: number;
|
|
file?: DocumentProps["file"];
|
|
}
|
|
|
|
const pagesOfPaginationPageLength = 1;
|
|
|
|
function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) {
|
|
const { width = 496, file, className = "" } = props;
|
|
const [numPages, setNumPages] = useState<number>(0);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [isLoadingDocument, setIsLoadingDocument] = useState<boolean>(true);
|
|
const [paginationPage, setPaginationPage] = useState(1);
|
|
const [isLoadingPage, setIsLoadingPage] = useState<boolean>(true);
|
|
|
|
const handleChange = (_event: React.ChangeEvent<unknown>, value: number) => {
|
|
setIsLoadingPage(true);
|
|
setPaginationPage(value);
|
|
};
|
|
|
|
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
|
|
setNumPages(numPages);
|
|
setIsLoadingDocument(false);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
ref={containerRef}
|
|
style={{
|
|
minHeight: "calc(100dvh - 32px)",
|
|
}}
|
|
>
|
|
{isLoadingDocument && (
|
|
<Loader
|
|
color={LoaderColor.White}
|
|
className={styles["document-loader"]}
|
|
/>
|
|
)}
|
|
<Document
|
|
loading={<></>}
|
|
file={file}
|
|
onLoadSuccess={onDocumentLoadSuccess}
|
|
className={className}
|
|
>
|
|
{Array.from({ length: pagesOfPaginationPageLength }, (_, i) => {
|
|
return (
|
|
<Page
|
|
loading={<></>}
|
|
key={i}
|
|
pageNumber={
|
|
i + pagesOfPaginationPageLength * (paginationPage - 1) + 1
|
|
}
|
|
width={width}
|
|
className={styles["pdf-page"]}
|
|
onRenderSuccess={() => {
|
|
setIsLoadingPage(false);
|
|
}}
|
|
>
|
|
{isLoadingPage && (
|
|
<Loader
|
|
className={styles["pdf-page__loader"]}
|
|
color={LoaderColor.Black}
|
|
/>
|
|
)}
|
|
</Page>
|
|
);
|
|
})}
|
|
</Document>
|
|
</div>
|
|
{!isLoadingDocument && (
|
|
<Pagination
|
|
classes={{ ul: styles["pagination-list"] }}
|
|
className={styles.pagination}
|
|
count={Math.ceil(numPages / pagesOfPaginationPageLength)}
|
|
onChange={handleChange}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default PDFViewer;
|