14 |
24 | )
25 |
26 | const FromBase64 = () => (
27 |
15 | Fetch PDF by URL
16 |
17 |
28 |
37 | )
38 |
39 | const ErrorHandling = () => (
40 |
29 | Load PDF from base 64 string
30 |
31 |
41 |
50 | )
51 |
52 | const CustomErrorHandling = () => (
53 |
42 | Error message for failures
43 |
44 |
54 | (
62 |
73 | )
74 |
75 | const WithCustomLoader = () => (
76 |
55 | Custom Error component for failures
56 |
57 |
67 |
70 | )}
71 | />
72 | Failed To load !!!
68 |{err.message}
69 |
77 | Custom loader element}
85 | />
86 |
87 | )
88 |
89 | const WithCustomStartingPage = () => (
90 |
78 | Custom loader element
79 |
80 |
91 |
101 | )
102 |
103 | const WithCustomScale = () => (
104 |
92 | Custom starting page
93 |
94 |
105 |
118 | )
119 |
120 | const WithCustomNavigationStyles = () => (
121 |
106 | Custom scale
107 |
108 |
122 |
147 | )
148 |
149 | const WithCustomNavigation = () => (
150 |
123 | Custom css classes
124 |
125 |
151 |
162 | )
163 |
164 | const WithOnDocumentClick = () => (
165 |
152 | Custom navigation
153 |
154 |
166 | alert('Document was clicked')}
177 | onPrevBtnClick={(page) => alert(`Page ${page} selected`)}
178 | onNextBtnClick={(page) => alert(`Page ${page} selected`)}
179 | onZoom={(scale) => alert(`Zoom scale is ${scale}`)}
180 | onRotation={(angle) => alert(`Page angle is ${angle}`)}
181 | />
182 |
183 | )
184 |
185 | const WithoutNavigation = () => (
186 |
167 |
168 | With onDocumentClick, onPrevBtnClick, onNextBtnClick, onZoom and
169 | onRotation handler
170 |
171 |
172 |
187 |
197 | )
198 |
199 | const WithoutZoomRotation = () => (
200 |
188 | Without Navigation
189 |
190 |
201 |
212 | )
213 |
214 | const WithNavbarTop = () => (
215 |
202 | Without Zoom and Rotation
203 |
204 |
216 |
226 | )
227 |
228 | const WithWatermark = () => (
229 |
217 | Navigation Bar on top
218 |
219 |
230 |
248 | )
249 |
250 | const WithExternalControl = () => {
251 | let [doc, setDoc] = useState({
252 | url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
253 | })
254 | let [pages, setPages] = useState(undefined)
255 | let [pageNo, setPageNo] = useState(1)
256 | let [scale, setScale] = useState(0.5)
257 | let [rotation, setRotation] = useState(0)
258 |
259 | return (
260 |
231 | Watermark and Protected
232 |
233 |
261 |
400 | )
401 | }
402 |
403 | function App() {
404 | return (
405 | <>
406 |
262 | External Controls
263 |
264 |
265 | setPages(pageCount)}
275 | />
276 |
399 |
277 |
365 |
366 |
278 |
307 |
282 |
292 |
306 |
293 | Page Number is {pageNo} / {pages}
294 |
295 |
305 |
308 |
335 |
312 |
322 |
334 | Scale is {scale}
323 |
333 |
336 |
364 |
340 |
350 |
363 | Rotation Angle is {rotation}
351 |
352 |
362 |
367 |
398 |
368 |
381 |
382 |
383 |
396 |
397 |
407 |
409 |
410 |
412 |
413 |
415 |
416 |
418 |
419 |
421 |
422 |
424 |
425 |
427 |
428 |
430 |
431 |
433 |
434 |
436 |
437 |
439 |
440 |
442 |
443 |
445 |
446 |
448 |
449 |
451 |
452 | )
453 | }
454 |
455 | export default App
456 |
--------------------------------------------------------------------------------
/example/src/Navigation.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | export const CustomPrevButton = (props) => {
5 | const { page, handlePrevClick } = props
6 | if (page === 1) return
7 |
8 | return (
9 | 17 | Previous page 18 |
19 | ) 20 | } 21 | CustomPrevButton.propTypes = { 22 | page: PropTypes.number.isRequired, 23 | pages: PropTypes.number.isRequired, 24 | handlePrevClick: PropTypes.func.isRequired, 25 | } 26 | 27 | export const CustomNextButton = (props) => { 28 | const { page, pages, handleNextClick } = props 29 | if (page === pages) return 30 | 31 | return ( 32 |40 | Next page 41 |
42 | ) 43 | } 44 | CustomNextButton.propTypes = { 45 | page: PropTypes.number.isRequired, 46 | pages: PropTypes.number.isRequired, 47 | handleNextClick: PropTypes.func.isRequired, 48 | } 49 | 50 | export const CustomPages = (props) => { 51 | const { page, pages } = props 52 | return ( 53 |54 | Page {page} from {pages} 55 |
56 | ) 57 | } 58 | CustomPages.propTypes = { 59 | page: PropTypes.number.isRequired, 60 | pages: PropTypes.number.isRequired, 61 | } 62 | 63 | const CustomNavigation = (props) => { 64 | const { page, pages } = props 65 | 66 | const { handlePrevClick, handleNextClick } = props 67 | 68 | return ( 69 |
70 |
82 | )
83 | }
84 | CustomNavigation.propTypes = {
85 | page: PropTypes.number.isRequired,
86 | pages: PropTypes.number.isRequired,
87 | handlePrevClick: PropTypes.func.isRequired,
88 | handleNextClick: PropTypes.func.isRequired,
89 | }
90 |
91 | export default CustomNavigation
92 |
--------------------------------------------------------------------------------
/example/src/Sources.js:
--------------------------------------------------------------------------------
1 | export default {
2 | url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
3 | base64:
4 | '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u78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNC4yLjEtYzA0MyA1Mi4zNzI3MjgsIDIwMDkvMDEvMTgtMTU6MDg6MDQgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+YXBwbGljYXRpb24vcGRmPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxkYzpjcmVhdG9yPgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaT5jZGFpbHk8L3JkZjpsaT4KICAgICAgICAgICAgPC9yZGY6U2VxPgogICAgICAgICA8L2RjOmNyZWF0b3I+CiAgICAgICAgIDxkYzp0aXRsZT4KICAgICAgICAgICAgPHJkZjpBbHQ+CiAgICAgICAgICAgICAgIDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+VGhpcyBpcyBhIHRlc3QgUERGIGZpbGU8L3JkZjpsaT4KICAgICAgICAgICAgPC9yZGY6QWx0PgogICAgICAgICA8L2RjOnRpdGxlPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMDAtMDYtMjlUMTA6MjE6MDgrMTE6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPk1pY3Jvc29mdCBXb3JkIDguMDwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMy0xMC0yOFQxNToyNDoxMy0wNDowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMTMtMTAtMjhUMTU6MjQ6MTMtMDQ6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpwZGY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8iPgogICAgICAgICA8cGRmOlByb2R1Y2VyPkFjcm9iYXQgRGlzdGlsbGVyIDQuMCBmb3IgV2luZG93czwvcGRmOlByb2R1Y2VyPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD51dWlkOjA4MDVlMjIxLTgwYTgtNDU5ZS1hNTIyLTYzNWVkNWMxZTJlNjwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+dXVpZDo2MmQ2YWU2ZC00M2M0LTQ3MmQtOWIyOC03YzRhZGQ4ZjllNDY8L3htcE1NOkluc3RhbmNlSUQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz4NCmVuZHN0cmVhbQ1lbmRvYmoNMiAwIG9iag08PC9GaWx0ZXIvRmxhdGVEZWNvZGUvRmlyc3QgNC9MZW5ndGggNDgvTiAxL1R5cGUvT2JqU3RtPj5zdHJlYW0NCmjeMlUwULCx0XfOL80rUTDU985MKY62BIoFxeqHVBak6gckpqcW29kBBBgA1ncLgA0KZW5kc3RyZWFtDWVuZG9iag0zIDAgb2JqDTw8L0ZpbHRlci9GbGF0ZURlY29kZS9GaXJzdCA0L0xlbmd0aCAxNjcvTiAxL1R5cGUvT2JqU3RtPj5zdHJlYW0NCmjePMvBCsIwEEXRX5mdDaKdxCpVSqFY3AkuBNexSelA6EAyRfx7A4qPu3znAAhNU3aLTByLwVkKb1Weo7dCPPdWfNGfDOYdzFGj0VivtV4hrn6vrK40RE48Cjw4Oqi3qMoruz/WuwxrvTeV3m2w+uJbZLcMPhZdxk8r0FMSCsFHqLYII0d40Oz4lVR5Jwm+uE+UIGdBfBK49RcYKXjVth8BBgBnZztkDQplbmRzdHJlYW0NZW5kb2JqDTQgMCBvYmoNPDwvRGVjb2RlUGFybXM8PC9Db2x1bW5zIDMvUHJlZGljdG9yIDEyPj4vRmlsdGVyL0ZsYXRlRGVjb2RlL0lEWzw0REM5MUExODc1QTZENzA3QUVDMjAzQkIwMjFDOTNBMD48RjZDOTJCMzY4QThBMTM0MDg0NTdBMUQzOTVBMzdFQjk+XS9JbmZvIDYgMCBSL0xlbmd0aCAzNy9Sb290IDggMCBSL1NpemUgNy9UeXBlL1hSZWYvV1sxIDIgMF0+PnN0cmVhbQ0KaN5iYmBgYGLkPcLEwD+ViYGhh4mBkYWJ8bEkkM0IEGAAKlkDFA0KZW5kc3RyZWFtDWVuZG9iag1zdGFydHhyZWYNCjExNg0KJSVFT0YNCg==',
5 | }
6 |
--------------------------------------------------------------------------------
/example/src/__tests__/App.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import renderer from 'react-test-renderer'
3 | import App from '../App'
4 |
5 | describe('App', () => {
6 | it('Should render correctly', () => {
7 | const tree = renderer.create(
6 |
15 | )
16 |
17 | Alert.propTypes = {
18 | message: PropTypes.string.isRequired,
19 | }
20 |
21 | export default Alert
22 |
--------------------------------------------------------------------------------
/src/components/Loader.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const loader = {
4 | display: 'inline-block',
5 | verticalAlign: 'text-bottom',
6 | backgroundColor: 'currentColor',
7 | borderRadius: '50%',
8 | width: '0.5rem',
9 | height: '0.5rem',
10 | }
11 |
12 | const Loader = () => (
13 |
7 |
8 | error_outline
9 |
10 |
11 |
12 | {message}
13 |
14 |
14 |
25 | )
26 |
27 | export default Loader
28 |
--------------------------------------------------------------------------------
/src/components/NavigationBar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import NextPageButton from './navigationComponents/NextPageButton'
4 | import PageIndicator from './navigationComponents/PageIndicator'
5 | import PreviousPageButton from './navigationComponents/PreviousPageButton'
6 | import ZoomIn from './navigationComponents/ZoomIn'
7 | import ZoomOut from './navigationComponents/ZoomOut'
8 | import ResetZoom from './navigationComponents/ResetZoom'
9 | import RotateLeft from './navigationComponents/RotateLeft'
10 | import ResetRotation from './navigationComponents/ResetRotation'
11 | import RotateRight from './navigationComponents/RotateRight'
12 |
13 | const Navigation = ({
14 | page,
15 | pages,
16 | scale,
17 | defaultScale,
18 | maxScale,
19 | minScale,
20 | rotationAngle,
21 | hideZoom,
22 | hideRotation,
23 | css,
24 | handlePrevClick,
25 | handleNextClick,
26 | handleZoomIn,
27 | handleResetZoom,
28 | handleZoomOut,
29 | handleRotateLeft,
30 | handleResetRotation,
31 | handleRotateRight,
32 | }) => {
33 | return (
34 | Loading
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
39 | {hideZoom ? (
40 |
41 | ) : (
42 |
102 | )
103 | }
104 |
105 | Navigation.propTypes = {
106 | page: PropTypes.number.isRequired,
107 | pages: PropTypes.number.isRequired,
108 | scale: PropTypes.number,
109 | defaultScale: PropTypes.number,
110 | maxScale: PropTypes.number,
111 | minScale: PropTypes.number,
112 | rotationAngle: PropTypes.number,
113 | hideZoom: PropTypes.bool,
114 | hideRotation: PropTypes.bool,
115 |
116 | css: PropTypes.shape({
117 | navbarWrapper: PropTypes.string,
118 | pages: PropTypes.string,
119 | pageIndicator: PropTypes.string,
120 | previousPageBtn: PropTypes.string,
121 | nextPageBtn: PropTypes.string,
122 | zoomOutBtn: PropTypes.string,
123 | resetZoomBtn: PropTypes.string,
124 | zoomInBtn: PropTypes.string,
125 | rotateLeftBtn: PropTypes.string,
126 | resetRotationBtn: PropTypes.string,
127 | rotateRightBtn: PropTypes.string,
128 | }),
129 |
130 | elements: PropTypes.shape({
131 | previousPageBtn: PropTypes.any,
132 | nextPageBtn: PropTypes.any,
133 | pages: PropTypes.any,
134 | }),
135 |
136 | handlePrevClick: PropTypes.func.isRequired,
137 | handleNextClick: PropTypes.func.isRequired,
138 | handleZoomIn: PropTypes.func.isRequired,
139 | handleResetZoom: PropTypes.func.isRequired,
140 | handleZoomOut: PropTypes.func.isRequired,
141 | handleRotateLeft: PropTypes.func.isRequired,
142 | handleResetRotation: PropTypes.func.isRequired,
143 | handleRotateRight: PropTypes.func.isRequired,
144 | }
145 |
146 | Navigation.defaultProps = {
147 | css: {},
148 | elements: {},
149 | }
150 |
151 | export default Navigation
152 |
--------------------------------------------------------------------------------
/src/components/RenderPdf.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 | import * as pdfjs from 'pdfjs-dist'
4 | import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
5 |
6 | import Alert from './Alert'
7 |
8 | pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
9 |
10 | function usePrevious(value) {
11 | const ref = useRef()
12 | useEffect(() => {
13 | ref.current = value
14 | })
15 | return ref.current
16 | }
17 |
18 | const RenderPdf = ({
19 | document,
20 | withCredentials,
21 | password,
22 | pageNum,
23 | scale,
24 | rotation,
25 | pageCount,
26 | changePage,
27 | showThumbnail,
28 | protectContent,
29 | watermark,
30 | alert,
31 | canvasCss,
32 | }) => {
33 | const [pdf, setPDF] = useState(null)
34 | const [thumbnailImages, setThumbnailImages] = useState(null)
35 | const [prevRenderTask, setPrevRenderTask] = useState(null)
36 | const [error, setError] = useState({ status: false, message: '' })
37 | const canvasRef = useRef(null)
38 | const thumbnailRef = useRef(null)
39 | const selectedRef = useRef(null)
40 |
41 | const [thumbnails, setThumbnails] = useState([])
42 |
43 | const prevDocument = usePrevious(document)
44 | const prevPassword = usePrevious(password)
45 |
46 | const AlertComponent = alert ? alert : Alert
47 |
48 | const fetchPDF = async () => {
49 | // Get PDF file
50 | let pdfDoc = null
51 | let thumbImages = null
52 | try {
53 | if (
54 | JSON.stringify(prevDocument) !== JSON.stringify(document) ||
55 | prevPassword.base64 !== password.url
56 | ) {
57 | let objDocInit = { withCredentials, password }
58 | if (document.url == undefined) {
59 | objDocInit.data = atob(document.base64)
60 | } else {
61 | objDocInit.url = document.url
62 | }
63 | pdfDoc = await pdfjs.getDocument(objDocInit).promise
64 | thumbImages = await createImages(pdfDoc)
65 |
66 | displayThumbnails(thumbImages)
67 |
68 | setPDF(pdfDoc)
69 | setThumbnailImages(thumbImages)
70 | }
71 | await displayPage(pdfDoc)
72 | // call pageCountfunction to update page count
73 | pageCount(pdfDoc.numPages)
74 | } catch (error) {
75 | console.warn('Error while opening the document !\n', error)
76 | pageCount(-1) // set page count to -1 on error
77 | setError({
78 | status: true,
79 | message: 'Error while opening the document !',
80 | })
81 | }
82 | }
83 |
84 | const displayPage = async (pdfDoc = null) => {
85 | // display pdf page
86 | if (pdfDoc == null) {
87 | pdfDoc = pdf
88 | }
89 | try {
90 | const page = await pdfDoc.getPage(pageNum)
91 | const viewport = page.getViewport({ scale, rotation })
92 |
93 | // Prepare canvas using PDF page dimensions
94 | const canvas = canvasRef.current
95 | canvas.height = viewport.height
96 | canvas.width = viewport.width
97 |
98 | // Render PDF page into canvas context
99 | let canvasContext = canvas.getContext('2d')
100 | canvasContext.clearRect(0, 0, canvas.width, canvas.height)
101 | canvasContext.beginPath()
102 | const renderContext = {
103 | canvasContext,
104 | viewport,
105 | }
106 | const renderTask = page.render(renderContext)
107 | // cancel previous render task
108 | if (prevRenderTask != null) {
109 | prevRenderTask._internalRenderTask.cancel()
110 | }
111 | try {
112 | await renderTask.promise
113 | if (Object.entries(watermark).length !== 0) {
114 | //watermark config
115 | const { text, diagonal, opacity, font, size, color } = watermark
116 | // setup watermark text for filling
117 | canvasContext.globalAlpha = opacity
118 | canvasContext.font = `${size * scale}px ${
119 | font !== '' ? font : 'Comic Sans MS'
120 | }`
121 | canvasContext.fillStyle = color
122 |
123 | // get the metrics with font settings
124 | var metrics = canvasContext.measureText(text)
125 | var width = metrics.width
126 | var height = size * scale // height is font size
127 | canvasContext.translate(viewport.width / 2, viewport.height / 2)
128 |
129 | // rotate the context and center the text
130 | if (diagonal) {
131 | canvasContext.rotate(-0.785)
132 | }
133 | canvasContext.fillText(text, -width / 2, height / 2)
134 | }
135 | } catch (error) {
136 | console.warn('Error occured while rendering !\n', error)
137 | pageCount(-1) // set page count to -1 on error
138 | setError({
139 | status: true,
140 | message: 'Error occured while rendering !',
141 | })
142 | }
143 | setPrevRenderTask(renderTask)
144 | } catch (error) {
145 | console.warn('Error while reading the pages !\n', error)
146 | pageCount(-1) // set page count to -1 on error
147 | setError({
148 | status: true,
149 | message: 'Error while reading the pages !',
150 | })
151 | }
152 | }
153 |
154 | const createImages = async (pdf) => {
155 | // create images for all pages
156 | const imgList = []
157 |
158 | if (Object.entries(showThumbnail).length !== 0) {
159 | let scale = 0.1
160 | let rotation = 0
161 | if (1 <= showThumbnail.scale && showThumbnail.scale <= 5) {
162 | scale = showThumbnail.scale / 10
163 | }
164 | if (
165 | showThumbnail.rotationAngle === -90 ||
166 | showThumbnail.rotationAngle === 90
167 | ) {
168 | rotation = showThumbnail.rotationAngle
169 | }
170 |
171 | for (let pageNo = 1; pageNo <= pdf.numPages; pageNo++) {
172 | const page = await pdf.getPage(pageNo)
173 | const viewport = page.getViewport({ scale, rotation })
174 |
175 | // Prepare canvas using PDF page dimensions
176 | const canvas = thumbnailRef.current
177 | canvas.height = viewport.height
178 | canvas.width = viewport.width
179 |
180 | // Render PDF page into canvas context
181 | let canvasContext = canvas.getContext('2d')
182 | canvasContext.clearRect(0, 0, canvas.width, canvas.height)
183 | canvasContext.beginPath()
184 | const renderContext = {
185 | canvasContext,
186 | viewport,
187 | }
188 | const renderTask = page.render(renderContext)
189 | await renderTask.promise
190 | if (Object.entries(watermark).length !== 0) {
191 | //watermark config
192 | const { text, diagonal, opacity, font, size, color } = watermark
193 | // setup watermark text for filling
194 | canvasContext.globalAlpha = opacity
195 | canvasContext.font = `${size * scale}px ${
196 | font !== '' ? font : 'Comic Sans MS'
197 | }`
198 | canvasContext.fillStyle = color
199 |
200 | // get the metrics with font settings
201 | var metrics = canvasContext.measureText(text)
202 | var width = metrics.width
203 | var height = size * scale // height is font size
204 | canvasContext.translate(viewport.width / 2, viewport.height / 2)
205 |
206 | // rotate the context and center the text
207 | if (diagonal) {
208 | canvasContext.rotate(-0.785)
209 | }
210 | canvasContext.fillText(text, -width / 2, height / 2)
211 | }
212 |
213 | // create image from canvas and push into array
214 | imgList.push({
215 | image: canvas.toDataURL('image/png'),
216 | height: viewport.height,
217 | width: viewport.width,
218 | })
219 | }
220 | }
221 | return imgList
222 | }
223 |
224 | const displayThumbnails = (images) => {
225 | if (Object.entries(showThumbnail).length !== 0 && images !== null) {
226 | // display thumbnails for all pages
227 | const thumbnailList = []
228 |
229 | for (let pageNo = 1; pageNo <= images.length; pageNo++) {
230 | let image = images[pageNo - 1].image
231 | let height = images[pageNo - 1].height
232 | let width = images[pageNo - 1].width
233 | let thumbnailCss = ''
234 | let thumbnailStyle = {
235 | height,
236 | width,
237 | display: 'flex',
238 | cursor: 'pointer',
239 | }
240 | if (showThumbnail.thumbCss && showThumbnail.selectedThumbCss) {
241 | if (pageNum === pageNo) {
242 | thumbnailCss = showThumbnail.selectedThumbCss
243 | } else {
244 | thumbnailCss = showThumbnail.thumbCss
245 | }
246 | } else {
247 | if (pageNum === pageNo) {
248 | thumbnailStyle.margin = '10px 20px'
249 | thumbnailStyle.border = '5px solid rgba(58, 58, 64, 1)'
250 | thumbnailStyle.boxShadow =
251 | 'rgba(0, 0, 0, 0.6) 0 4px 8px 0, rgba(0, 0, 0, 0.58) 0 6px 20px 0'
252 | } else {
253 | thumbnailStyle.margin = '15px 25px'
254 | thumbnailStyle.boxShadow = 'rgba(0, 0, 0, 0.6) 0px 2px 2px 0px'
255 | }
256 | }
257 |
258 | thumbnailList.push(
259 |
43 |
64 | )}
65 |
66 |
80 | {hideRotation ? (
81 |
82 | ) : (
83 |
84 |
100 | )}
101 |
322 |
337 |
338 |
339 |
340 | )
341 | } else {
342 | return (
343 | <>
344 |
324 |
326 | {thumbnails}
327 |
354 |
368 |
356 |
358 | {thumbnails}
369 |
370 |
371 | )
372 | }
373 | } else {
374 | return (
375 |
376 |
399 | )
400 | }
401 | }
402 |
403 | RenderPdf.propTypes = {
404 | document: PropTypes.any.isRequired,
405 | withCredentials: PropTypes.bool,
406 | password: PropTypes.string,
407 | pageNum: PropTypes.number.isRequired,
408 | scale: PropTypes.number.isRequired,
409 | rotation: PropTypes.number.isRequired,
410 | changePage: PropTypes.func,
411 | pageCount: PropTypes.func,
412 | showThumbnail: PropTypes.shape({
413 | scale: PropTypes.number,
414 | rotationAngle: PropTypes.number,
415 | onTop: PropTypes.bool,
416 | backgroundColor: PropTypes.string,
417 | thumbCss: PropTypes.string,
418 | selectedThumbCss: PropTypes.string,
419 | }),
420 | protectContent: PropTypes.bool,
421 | watermark: PropTypes.shape({
422 | text: PropTypes.string,
423 | diagonal: PropTypes.bool,
424 | opacity: PropTypes.string,
425 | size: PropTypes.string,
426 | color: PropTypes.string,
427 | }),
428 | canvasCss: PropTypes.string,
429 | }
430 |
431 | RenderPdf.defaultProps = {
432 | changePage() {},
433 | pageCount() {},
434 | showThumbnail: {},
435 | protectContent: false,
436 | watermark: {},
437 | canvasCss: '',
438 | }
439 |
440 | export default RenderPdf
441 |
--------------------------------------------------------------------------------
/src/components/__tests__/Alert.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import Alert from '../Alert'
4 |
5 | describe('Alert', () => {
6 | const errMsg = 'error msg for alert'
7 |
8 | it('Should display the Error Message', () => {
9 | const alert = shallow(
386 |
398 |
388 |
390 |
7 |
61 | `;
62 |
--------------------------------------------------------------------------------
/src/components/__tests__/__snapshots__/NavigationBar.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Navigation Bar Should render correctly 1`] = `
4 | 10 | Loading 11 |
12 |
15 |
27 |
28 |
31 |
43 |
44 |
47 |
59 |
60 |
7 |
137 | `;
138 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/NextPageButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const NextPageButton = ({ css, page, pages, handleNextClick }) => {
5 | const nextClass = css || 'button is-black my-0 mx-3'
6 |
7 | if (page === pages) {
8 | return (
9 |
14 | )
15 | }
16 |
17 | return (
18 |
23 | )
24 | }
25 | NextPageButton.propTypes = {
26 | css: PropTypes.string,
27 | page: PropTypes.number.isRequired,
28 | pages: PropTypes.number.isRequired,
29 | handleNextClick: PropTypes.func.isRequired,
30 | }
31 |
32 | export default NextPageButton
33 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/PageIndicator.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const PageIndicator = ({ css, page, pages }) => {
5 | const pagesClass = css || 'is-size-7 has-text-centered my-0 mx-3'
6 |
7 | return {`Page ${page} / ${pages}`}
8 | }
9 |
10 | PageIndicator.propTypes = {
11 | css: PropTypes.string,
12 | page: PropTypes.number.isRequired,
13 | pages: PropTypes.number.isRequired,
14 | }
15 |
16 | export default PageIndicator
17 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/PreviousPageButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const PreviousPageButton = ({ css, page, handlePrevClick }) => {
5 | const prevClass = css || 'button is-black my-0 mx-3'
6 |
7 | if (page === 1) {
8 | return (
9 |
14 | )
15 | }
16 |
17 | return (
18 |
23 | )
24 | }
25 | PreviousPageButton.propTypes = {
26 | css: PropTypes.string,
27 | page: PropTypes.number.isRequired,
28 | handlePrevClick: PropTypes.func.isRequired,
29 | }
30 |
31 | export default PreviousPageButton
32 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/ResetRotation.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ResetRotation = ({ css, rotationAngle, handleResetRotation }) => {
5 | const resetRotationClass = css || 'button is-black my-0 mx-3'
6 |
7 | if (rotationAngle === 0) {
8 | return (
9 |
14 | )
15 | }
16 |
17 | return (
18 |
23 | )
24 | }
25 | ResetRotation.propTypes = {
26 | css: PropTypes.string,
27 | rotationAngle: PropTypes.number.isRequired,
28 | handleResetRotation: PropTypes.func.isRequired,
29 | }
30 |
31 | export default ResetRotation
32 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/ResetZoom.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ResetZoom = ({ css, scale, defaultScale, handleResetZoom }) => {
5 | const resetZoomClass = css || 'button is-black my-0 mx-3'
6 |
7 | if (scale.toFixed(2) === defaultScale.toFixed(2)) {
8 | return (
9 |
14 | )
15 | }
16 |
17 | return (
18 |
23 | )
24 | }
25 |
26 | ResetZoom.propTypes = {
27 | css: PropTypes.string,
28 | scale: PropTypes.number.isRequired,
29 | defaultScale: PropTypes.number.isRequired,
30 | handleResetZoom: PropTypes.func.isRequired,
31 | }
32 |
33 | export default ResetZoom
34 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/RotateLeft.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const RotateLeft = ({ css, rotationAngle, handleRotateLeft }) => {
5 | const rotateLeftClass = css || 'button is-black my-0 mx-3'
6 |
7 | if (rotationAngle === -90) {
8 | return (
9 |
14 | )
15 | }
16 |
17 | return (
18 |
23 | )
24 | }
25 |
26 | RotateLeft.propTypes = {
27 | css: PropTypes.string,
28 | rotationAngle: PropTypes.number.isRequired,
29 | handleRotateLeft: PropTypes.func.isRequired,
30 | }
31 |
32 | export default RotateLeft
33 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/RotateRight.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const RotateRight = ({ css, rotationAngle, handleRotateRight }) => {
5 | const rotateRightClass = css || 'button is-black my-0 mx-3'
6 |
7 | if (rotationAngle === 90) {
8 | return (
9 |
14 | )
15 | }
16 |
17 | return (
18 |
23 | )
24 | }
25 | RotateRight.propTypes = {
26 | css: PropTypes.string,
27 | rotationAngle: PropTypes.number.isRequired,
28 | handleRotateRight: PropTypes.func.isRequired,
29 | }
30 |
31 | export default RotateRight
32 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/ZoomIn.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ZoomIn = ({ css, scale, defaultScale, maxScale, handleZoomIn }) => {
5 | const zoomInClass = css || 'button is-black my-0 mx-3'
6 |
7 | let checkScale = maxScale
8 | if (defaultScale > maxScale) {
9 | checkScale = defaultScale
10 | }
11 |
12 | if (scale.toFixed(2) === checkScale.toFixed(2)) {
13 | return (
14 |
19 | )
20 | }
21 |
22 | return (
23 |
28 | )
29 | }
30 |
31 | ZoomIn.propTypes = {
32 | css: PropTypes.string,
33 | scale: PropTypes.number.isRequired,
34 | defaultScale: PropTypes.number.isRequired,
35 | maxScale: PropTypes.number.isRequired,
36 | handleZoomIn: PropTypes.func.isRequired,
37 | }
38 |
39 | export default ZoomIn
40 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/ZoomOut.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ZoomOut = ({ css, scale, defaultScale, minScale, handleZoomOut }) => {
5 | const zoomOutClass = css || 'button is-black my-0 mx-3'
6 |
7 | let checkScale = minScale
8 | if (defaultScale < minScale) {
9 | checkScale = defaultScale
10 | }
11 |
12 | if (scale.toFixed(2) === checkScale.toFixed(2)) {
13 | return (
14 |
19 | )
20 | }
21 |
22 | return (
23 |
28 | )
29 | }
30 |
31 | ZoomOut.propTypes = {
32 | css: PropTypes.string,
33 | scale: PropTypes.number.isRequired,
34 | defaultScale: PropTypes.number.isRequired,
35 | minScale: PropTypes.number.isRequired,
36 | handleZoomOut: PropTypes.func.isRequired,
37 | }
38 |
39 | export default ZoomOut
40 |
--------------------------------------------------------------------------------
/src/components/navigationComponents/__tests__/NextPageButton.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import NextPageButton from '../NextPageButton'
4 |
5 | describe('Next Page Button', () => {
6 | const page = 1
7 | const pages = 10
8 | const css = 'custom-class'
9 | const mockFn = jest.fn()
10 |
11 | it('Should display the "Right Arrow" Icon', () => {
12 | const btn = shallow(
13 |
10 |
24 |
38 |
52 |
53 |
56 |
70 |
73 | Page 1 / 10
74 |
75 |
89 |
90 |
93 |
107 |
121 |
135 |
136 |
280 |
308 | )
309 | }
310 | }
311 |
312 | PDFViewer.propTypes = {
313 | document: PropTypes.shape({
314 | url: PropTypes.string, // File path
315 | base64: PropTypes.string, // PDF file encoded in base64
316 | }).isRequired,
317 | withCredentials: PropTypes.bool,
318 | password: PropTypes.string,
319 | loader: PropTypes.node,
320 | externalInput: PropTypes.bool,
321 | page: PropTypes.number,
322 | scale: PropTypes.number,
323 | scaleStep: PropTypes.number,
324 | maxScale: PropTypes.number,
325 | minScale: PropTypes.number,
326 | css: PropTypes.string,
327 | canvasCss: PropTypes.string,
328 | rotationAngle: PropTypes.number,
329 | onDocumentClick: PropTypes.func,
330 | onPrevBtnClick: PropTypes.func,
331 | onNextBtnClick: PropTypes.func,
332 | onZoom: PropTypes.func,
333 | onRotation: PropTypes.func,
334 | getMaxPageCount: PropTypes.func,
335 | hideNavbar: PropTypes.bool,
336 | navbarOnTop: PropTypes.bool,
337 | hideZoom: PropTypes.bool,
338 | hideRotation: PropTypes.bool,
339 | showThumbnail: PropTypes.shape({
340 | scale: PropTypes.number,
341 | rotationAngle: PropTypes.number,
342 | onTop: PropTypes.bool,
343 | backgroundColor: PropTypes.string,
344 | thumbCss: PropTypes.string,
345 | selectedThumbCss: PropTypes.string,
346 | }),
347 | protectContent: PropTypes.bool,
348 | watermark: PropTypes.shape({
349 | text: PropTypes.string,
350 | diagonal: PropTypes.bool,
351 | opacity: PropTypes.string,
352 | font: PropTypes.string,
353 | size: PropTypes.string,
354 | color: PropTypes.string,
355 | }),
356 | alert: PropTypes.any,
357 | navigation: PropTypes.oneOfType([
358 | // Can be an object with css classes or react elements to be rendered
359 | PropTypes.shape({
360 | css: PropTypes.shape({
361 | navbarWrapper: PropTypes.string,
362 | zoomOutBtn: PropTypes.string,
363 | resetZoomBtn: PropTypes.string,
364 | zoomInBtn: PropTypes.string,
365 | previousPageBtn: PropTypes.string,
366 | pageIndicator: PropTypes.string,
367 | nextPageBtn: PropTypes.string,
368 | rotateLeftBtn: PropTypes.string,
369 | resetRotationBtn: PropTypes.string,
370 | rotateRightBtn: PropTypes.string,
371 | }),
372 | }),
373 | // Or a full navigation component
374 | PropTypes.any,
375 | ]),
376 | }
377 |
378 | PDFViewer.defaultProps = {
379 | page: 1,
380 | withCredentials: false,
381 | password: '',
382 | scale: 1,
383 | scaleStep: 1,
384 | maxScale: 3,
385 | minScale: 1,
386 | rotationAngle: 0,
387 | externalInput: false,
388 | hideNavbar: false,
389 | hideZoom: false,
390 | hideRotation: false,
391 | navbarOnTop: false,
392 | canvasCss: '',
393 | }
394 |
395 | export default PDFViewer
396 |
--------------------------------------------------------------------------------
281 |
294 |
291 | {loader ? loader :
293 |
295 | {navbarOnTop ? (
296 |
307 |
297 |
300 | ) : (
301 | {nav}
298 | {pdf}
299 |
302 |
305 | )}
306 | {pdf}
303 | {nav}
304 |