2021-06-29 15:20:35 +00:00
|
|
|
import { FunctionComponent, useEffect, useRef, useState } from 'react'
|
2021-06-24 23:42:46 +00:00
|
|
|
import { Document, Page, pdfjs } from 'react-pdf'
|
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
|
|
|
|
|
|
import Loading from '../Loading'
|
2021-06-25 14:15:00 +00:00
|
|
|
import DownloadBtn from '../DownloadBtn'
|
2021-06-24 23:42:46 +00:00
|
|
|
|
|
|
|
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`
|
|
|
|
|
|
|
|
const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
|
|
|
const [pageNumber, setPageNumber] = useState(1)
|
|
|
|
const [totalPages, setTotalPages] = useState(0)
|
|
|
|
const [loadingText, setLoadingText] = useState('Loading PDF ...')
|
|
|
|
|
2021-06-29 14:31:57 +00:00
|
|
|
const [pdfContainerWidth, setPdfContainerWidth] = useState(400)
|
|
|
|
const pdfContainter = useRef<HTMLDivElement>(null)
|
|
|
|
|
2021-06-24 23:42:46 +00:00
|
|
|
const onDocumentLoadSuccess = (pdf: any) => {
|
|
|
|
setTotalPages(pdf.numPages)
|
|
|
|
}
|
|
|
|
|
2021-06-29 14:31:57 +00:00
|
|
|
useEffect(() => {
|
|
|
|
setPdfContainerWidth(pdfContainter.current ? pdfContainter.current.offsetWidth : 400)
|
|
|
|
}, [])
|
|
|
|
|
2021-06-24 23:42:46 +00:00
|
|
|
return (
|
2021-06-29 14:31:57 +00:00
|
|
|
<>
|
|
|
|
<div
|
2021-09-04 14:15:09 +00:00
|
|
|
className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded shadow"
|
2021-06-29 14:31:57 +00:00
|
|
|
style={{ maxHeight: '90vh' }}
|
|
|
|
>
|
2021-09-04 14:15:09 +00:00
|
|
|
<div className="no-scrollbar flex-1 w-full overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
|
2021-06-29 14:31:57 +00:00
|
|
|
<Document
|
2021-09-04 14:15:09 +00:00
|
|
|
className="dark:bg-gray-800 bg-gray-100"
|
2021-06-29 14:31:57 +00:00
|
|
|
file={file['@microsoft.graph.downloadUrl']}
|
|
|
|
onLoadSuccess={onDocumentLoadSuccess}
|
|
|
|
loading={<Loading loadingText={loadingText} />}
|
|
|
|
onLoadProgress={({ loaded, total }) => {
|
|
|
|
setLoadingText(`Loading PDF ${Math.round((loaded / total) * 100)}%`)
|
|
|
|
}}
|
2021-12-02 09:10:28 +00:00
|
|
|
options={{
|
|
|
|
cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,
|
|
|
|
cMapPacked: true,
|
|
|
|
}}
|
2021-06-29 14:31:57 +00:00
|
|
|
>
|
|
|
|
<Page
|
|
|
|
pageNumber={pageNumber}
|
|
|
|
width={pdfContainerWidth > 400 ? pdfContainerWidth * 0.8 : pdfContainerWidth}
|
|
|
|
/>
|
|
|
|
</Document>
|
|
|
|
</div>
|
|
|
|
|
2021-09-04 14:15:09 +00:00
|
|
|
<div className="md:mb-0 dark:text-white flex flex-wrap items-center justify-center w-full my-4 space-x-2">
|
2021-06-29 14:31:57 +00:00
|
|
|
<button
|
2021-09-04 14:15:09 +00:00
|
|
|
className="focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 disabled:opacity-50 px-4 py-2 text-white transition-all duration-75 bg-red-500 rounded cursor-pointer"
|
2021-06-29 14:31:57 +00:00
|
|
|
onClick={() => {
|
|
|
|
pageNumber > 1 && setPageNumber(pageNumber - 1)
|
2021-06-24 23:42:46 +00:00
|
|
|
}}
|
2021-06-29 14:31:57 +00:00
|
|
|
disabled={!(pageNumber > 1)}
|
|
|
|
>
|
|
|
|
<FontAwesomeIcon icon="arrow-left" />
|
|
|
|
</button>
|
|
|
|
<div className="px-4 py-2">
|
|
|
|
Page{' '}
|
|
|
|
<input
|
|
|
|
value={pageNumber}
|
2021-09-04 14:15:09 +00:00
|
|
|
className="bg-red-50 dark:bg-gray-600 focus:ring focus:ring-red-300 dark:focus:ring-red-700 focus:outline-none w-10 p-1 mr-1 text-center rounded"
|
2021-06-29 14:31:57 +00:00
|
|
|
style={{
|
|
|
|
maxWidth: 50,
|
|
|
|
}}
|
|
|
|
onChange={e => {
|
|
|
|
const v = parseInt(e.target.value)
|
|
|
|
if (v <= totalPages && v >= 0) {
|
|
|
|
setPageNumber(v)
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
></input>
|
|
|
|
/<span className="ml-1 text-center">{totalPages}</span>
|
|
|
|
</div>
|
|
|
|
<button
|
2021-09-04 14:15:09 +00:00
|
|
|
className="focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 disabled:opacity-50 px-4 py-2 text-white transition-all duration-75 bg-red-500 rounded cursor-pointer"
|
2021-06-29 14:31:57 +00:00
|
|
|
onClick={() => {
|
|
|
|
pageNumber < totalPages && setPageNumber(pageNumber + 1)
|
|
|
|
}}
|
|
|
|
disabled={!(pageNumber < totalPages)}
|
|
|
|
>
|
|
|
|
<FontAwesomeIcon icon="arrow-right" />
|
|
|
|
</button>
|
2021-06-24 23:42:46 +00:00
|
|
|
</div>
|
2021-06-29 14:31:57 +00:00
|
|
|
</div>
|
|
|
|
<div className="mt-4">
|
2021-06-25 14:15:00 +00:00
|
|
|
<DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
2021-06-24 23:42:46 +00:00
|
|
|
</div>
|
2021-06-29 14:31:57 +00:00
|
|
|
</>
|
2021-06-24 23:42:46 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PDFPreview
|