gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AW-131-pdf-edits

Browse Source
This commit is contained in:
Денис Катаев 2024-07-05 14:36:21 +00:00 committed by Daniil Chemerkin
parent 3bb1ac78d1
commit 35bfcdeec9
5 changed files with 56 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
package-lock.json generated
View File

@ -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"
}

2
package.json
View File

@ -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",

34
src/components/PDFViewer/index.tsx
View File

@ -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<number>(0);
const containerRef = useRef<HTMLDivElement>(null);
const [containerHeight, setContainerHeight] = useState<number>(0);
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);
};
@ -34,14 +35,7 @@ function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) {
<div
ref={containerRef}
style={{
marginTop: `-${
((containerHeight || 0) * (1 - width / pageRenderWidth)) / 2 + 39
}px`,
marginBottom: `-${
((containerHeight || 0) * (1 - width / pageRenderWidth)) / 2
}px`,
transform: `scale(${width / (pageRenderWidth || 1)})`,
minHeight: "100dvh",
minHeight: "calc(100dvh - 32px)",
}}
>
{isLoadingDocument && (
@ -56,20 +50,29 @@ function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) {
onLoadSuccess={onDocumentLoadSuccess}
className={className}
>
{Array.from({ length: pagesOfPaginationPageLength }, (_, i) => (
{Array.from({ length: pagesOfPaginationPageLength }, (_, i) => {
return (
<Page
loading={<></>}
key={i}
pageNumber={
i + pagesOfPaginationPageLength * (paginationPage - 1) + 1
}
width={pageRenderWidth}
width={width}
className={styles["pdf-page"]}
onLoadSuccess={() => {
setContainerHeight(containerRef.current?.offsetHeight || 0);
onRenderSuccess={() => {
setIsLoadingPage(false);
}}
>
{isLoadingPage && (
<Loader
className={styles["pdf-page__loader"]}
color={LoaderColor.Black}
/>
))}
)}
</Page>
);
})}
</Document>
</div>
{!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}
/>
)}

2
src/components/PDFViewer/styles.module.scss
View File

@ -25,7 +25,7 @@
.pagination {
position: sticky;
bottom: 0;
bottom: 0dvh;
background-color: #fff;
}

2
src/init.tsx
View File

@ -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;