Untitled
unknown
plain_text
a month ago
5.0 kB
6
Indexable
import { useState } from 'react'; import Modal from '@/components/Modal'; import Button from '@/components/Button'; import { Cancel, Download } from '../Icon'; import Typography from '../Typography'; import { ZoomIn, ZoomOut } from '@/components/Icon'; import { Document, Page, pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`; const PreviewEvidence = (props: any) => { const { isOpen, onClose, fileUrl, fileName } = props; const [numPages, setNumPages] = useState(0); // const [scale, setScale] = useState(1.25); const [scale, setScale] = useState(1); // for a4 landscape const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setNumPages(numPages); }; const content = () => { const btnClose = () => ( <button onClick={onClose} className="appearance-none no-underline hover:opacity-2" > <Cancel className="text-general-main" height={20} width={20} /> </button> ); const btnDownload = () => ( <button onClick={() => window.open(fileUrl)} className="appearance-none no-underline hover:opacity-2" > <Download className="text-general-main" height={20} width={20} /> </button> ); const view = (type: string) => { const image = ( <div className="flex justify-center"> <img style={{ maxHeight: '80vh' }} src={fileUrl} alt={`Preview ${fileName}`} /> </div> ); const document = ( <div className="flex justify-center w-full"> <div className="pb-20"> <Document file={fileUrl} onLoadSuccess={onDocumentLoadSuccess} className="text-gray-50" > {Array.from(new Array(numPages), (el, index) => ( <div> <Page className="mb-3 flex justify-center" key={`page_${index + 1}`} pageNumber={index + 1} scale={scale} /> </div> ))} </Document> </div> {numPages > 0 && ( <div className="flex fixed mb-5 justify-center bottom-1.5 h-12"> <div className="flex items-center bg-white px-4" style={{ boxShadow: '0px 6px 9px rgba(46, 67, 77, 0.08)', }} > <div className="flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-200" style={{ width: 40, height: 40 }} onClick={() => { setScale(scale - 0.25); }} > <ZoomOut /> </div> <div className="flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-200" style={{ width: 40, height: 40 }} onClick={() => { setScale(scale + 0.25); }} > <ZoomIn /> </div> </div> </div> )} </div> ); switch (type) { case 'png': return image; case 'jpg': return image; case 'jpeg': return image; case 'pdf': return document; default: return ( <div className="bg-white rounded pt-5 mt-10"> <Typography variant="h4" className="block ml-3 text-center mb-5"> Sorry, We Cannot Preview your file </Typography> <div className="flex flex-col justify-center items-center pb-5"> <Button children="Download File" onClick={() => window.open(fileUrl)} size="medium" /> </div> </div> ); } }; return ( <> <div className="absolute z-0 bg-transparent w-full h-full" onClick={onClose} /> <div className="z-30 justify-between absolute top:0 p-5 bg-white w-full flex align-center shadow-md"> <div className="flex"> {btnClose()} <Typography variant="subtitle1" className="block ml-3"> {fileName} </Typography> </div> {btnDownload()} </div> <div className="z-10 ml-auto mr-auto mt-20 overflow-auto w-full"> {view(fileName?.split('.')[1])} </div> </> ); }; return ( <Modal size="fluid" title={fileName} type="preview" isOpen={isOpen as boolean} onRequestClose={onClose} content={content()} /> ); }; export default PreviewEvidence;
Editor is loading...
Leave a Comment