From 35bfcdeec9a3dd900c07be137d2692a472746307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Fri, 5 Jul 2024 14:36:21 +0000 Subject: [PATCH] AW-131-pdf-edits --- package-lock.json | 52 ++++++++++----------- package.json | 2 +- src/components/PDFViewer/index.tsx | 52 +++++++++++---------- src/components/PDFViewer/styles.module.scss | 2 +- src/init.tsx | 2 +- 5 files changed, 56 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7fb8b2a..b4afd0a 100755 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "react-dom": "^18.2.0", "react-ga4": "^2.1.0", "react-i18next": "^12.3.1", - "react-pdf": "^9.1.0", + "react-pdf": "8.0.2", "react-player": "^2.16.0", "react-redux": "^8.0.5", "react-router-dom": "^6.11.2", @@ -3919,25 +3919,25 @@ "node": ">=8" } }, - "node_modules/path2d": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.1.tgz", - "integrity": "sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==", + "node_modules/path2d-polyfill": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz", + "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==", "optional": true, "engines": { - "node": ">=6" + "node": ">=8" } }, "node_modules/pdfjs-dist": { - "version": "4.4.168", - "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.4.168.tgz", - "integrity": "sha512-MbkAjpwka/dMHaCfQ75RY1FXX3IewBVu6NGZOcxerRFlaBiIkZmUoR0jotX5VUzYZEXAGzSFtknWs5xRKliXPA==", + "version": "3.11.174", + "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz", + "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==", "engines": { "node": ">=18" }, "optionalDependencies": { "canvas": "^2.11.2", - "path2d": "^0.2.0" + "path2d-polyfill": "^2.0.1" } }, "node_modules/picocolors": { @@ -4106,16 +4106,16 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, "node_modules/react-pdf": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-9.1.0.tgz", - "integrity": "sha512-KhPDQE3QshkLdS3b48S5Bldv0N5flob6qwvsiADWdZOS5TMDaIrkRtEs+Dyl6ubRf2jTf9jWmFb6RjWu46lSSg==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-8.0.2.tgz", + "integrity": "sha512-C0PFC+j9vmEIZ82Iq0c85xUWkgsZTUS05syqOk8NC+7PAanyWlVi/ImYkGQe27zYAlBA6IidRYEt1DAAXKq1Ow==", "dependencies": { "clsx": "^2.0.0", "dequal": "^2.0.3", "make-cancellable-promise": "^1.3.1", "make-event-props": "^1.6.0", "merge-refs": "^1.3.0", - "pdfjs-dist": "4.4.168", + "pdfjs-dist": "3.11.174", "tiny-invariant": "^1.0.0", "warning": "^4.0.0" }, @@ -7654,19 +7654,19 @@ "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" }, - "path2d": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.1.tgz", - "integrity": "sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==", + "path2d-polyfill": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz", + "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==", "optional": true }, "pdfjs-dist": { - "version": "4.4.168", - "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.4.168.tgz", - "integrity": "sha512-MbkAjpwka/dMHaCfQ75RY1FXX3IewBVu6NGZOcxerRFlaBiIkZmUoR0jotX5VUzYZEXAGzSFtknWs5xRKliXPA==", + "version": "3.11.174", + "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz", + "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==", "requires": { "canvas": "^2.11.2", - "path2d": "^0.2.0" + "path2d-polyfill": "^2.0.1" } }, "picocolors": { @@ -7774,16 +7774,16 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, "react-pdf": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-9.1.0.tgz", - "integrity": "sha512-KhPDQE3QshkLdS3b48S5Bldv0N5flob6qwvsiADWdZOS5TMDaIrkRtEs+Dyl6ubRf2jTf9jWmFb6RjWu46lSSg==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-8.0.2.tgz", + "integrity": "sha512-C0PFC+j9vmEIZ82Iq0c85xUWkgsZTUS05syqOk8NC+7PAanyWlVi/ImYkGQe27zYAlBA6IidRYEt1DAAXKq1Ow==", "requires": { "clsx": "^2.0.0", "dequal": "^2.0.3", "make-cancellable-promise": "^1.3.1", "make-event-props": "^1.6.0", "merge-refs": "^1.3.0", - "pdfjs-dist": "4.4.168", + "pdfjs-dist": "3.11.174", "tiny-invariant": "^1.0.0", "warning": "^4.0.0" } diff --git a/package.json b/package.json index 29cd6af..15f562d 100755 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "react-dom": "^18.2.0", "react-ga4": "^2.1.0", "react-i18next": "^12.3.1", - "react-pdf": "^9.1.0", + "react-pdf": "8.0.2", "react-player": "^2.16.0", "react-redux": "^8.0.5", "react-router-dom": "^6.11.2", diff --git a/src/components/PDFViewer/index.tsx b/src/components/PDFViewer/index.tsx index 39e8f77..1972a55 100644 --- a/src/components/PDFViewer/index.tsx +++ b/src/components/PDFViewer/index.tsx @@ -14,13 +14,14 @@ const pagesOfPaginationPageLength = 1; function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) { const { width = 496, file, className = "" } = props; - const pageRenderWidth = 700; const [numPages, setNumPages] = useState(0); const containerRef = useRef(null); - const [containerHeight, setContainerHeight] = useState(0); const [isLoadingDocument, setIsLoadingDocument] = useState(true); const [paginationPage, setPaginationPage] = useState(1); + const [isLoadingPage, setIsLoadingPage] = useState(true); + const handleChange = (_event: React.ChangeEvent, value: number) => { + setIsLoadingPage(true); setPaginationPage(value); }; @@ -34,14 +35,7 @@ function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) {
{isLoadingDocument && ( @@ -56,20 +50,29 @@ function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) { onLoadSuccess={onDocumentLoadSuccess} className={className} > - {Array.from({ length: pagesOfPaginationPageLength }, (_, i) => ( - } - key={i} - pageNumber={ - i + pagesOfPaginationPageLength * (paginationPage - 1) + 1 - } - width={pageRenderWidth} - className={styles["pdf-page"]} - onLoadSuccess={() => { - setContainerHeight(containerRef.current?.offsetHeight || 0); - }} - /> - ))} + {Array.from({ length: pagesOfPaginationPageLength }, (_, i) => { + return ( + } + key={i} + pageNumber={ + i + pagesOfPaginationPageLength * (paginationPage - 1) + 1 + } + width={width} + className={styles["pdf-page"]} + onRenderSuccess={() => { + setIsLoadingPage(false); + }} + > + {isLoadingPage && ( + + )} + + ); + })}
{!isLoadingDocument && ( @@ -77,7 +80,6 @@ function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) { classes={{ ul: styles["pagination-list"] }} className={styles.pagination} count={Math.ceil(numPages / pagesOfPaginationPageLength)} - size="large" onChange={handleChange} /> )} diff --git a/src/components/PDFViewer/styles.module.scss b/src/components/PDFViewer/styles.module.scss index ee19776..3789e05 100644 --- a/src/components/PDFViewer/styles.module.scss +++ b/src/components/PDFViewer/styles.module.scss @@ -25,7 +25,7 @@ .pagination { position: sticky; - bottom: 0; + bottom: 0dvh; background-color: #fff; } diff --git a/src/init.tsx b/src/init.tsx index 8a8ba98..5fa33c6 100755 --- a/src/init.tsx +++ b/src/init.tsx @@ -14,7 +14,7 @@ import metricService from "./services/metric/metricService"; import "core-js/actual"; import { pdfjs } from "react-pdf"; -pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`; +pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`; const environments = import.meta.env;