Commit 0f2686ec authored by David Sikter's avatar David Sikter
Browse files

Add pdf preview and improved memoizing

parent 7bee014f
Pipeline #124223 passed with stages
in 33 minutes and 34 seconds
......@@ -51,6 +51,7 @@
"react-highlight": "^0.12.0",
"react-infinite-scroller": "^1.2.4",
"react-json-view": "^1.19.1",
"react-pdf": "^5.7.1",
"react-keycloak": "^7.0.1-191016",
"react-markdown": "^4.3.1",
"react-mathjax": "^1.0.1",
......
......@@ -15,17 +15,22 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useState, useRef, useCallback, useEffect} from 'react'
import React, { useState, useRef, useCallback, useEffect, useLayoutEffect} from 'react'
import PropTypes from 'prop-types'
import { Typography, makeStyles, Button, Box } from '@material-ui/core'
import { useErrors } from '../errors'
import ReactJson from 'react-json-view'
import { Document, Page, pdfjs } from 'react-pdf'
import InfiniteScroll from 'react-infinite-scroller'
import { useApi } from '../api'
import { apiBase } from '../../config'
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
const useFilePreviewStyles = makeStyles(theme => ({
scrollableContainer: {
border: '1px solid black',
boxSizing: 'border-box',
width: '100%',
height: '100%',
display: 'inline-block',
......@@ -85,9 +90,24 @@ const viewerJSON = {
)
}
}
const viewers = [viewerText, viewerImg, viewerJSON]
const viewerPDF = {
name: 'pdf',
fileExtensions: ['pdf'],
maxSizeAutoPreview: 10e6,
requiresUrlWithAuth: true,
render: ({url, setFailedToPreview}) => {
return <FilePreviewPdf
file={{url: url}}
error={(error) => {
console.log(error)
setFailedToPreview(true)
}}
/>
}
}
const viewers = [viewerText, viewerImg, viewerJSON, viewerPDF]
export default function FilePreview({uploadId, path, size}) {
const FilePreview = React.memo(({uploadId, path, size}) => {
const classes = useFilePreviewStyles()
const {api, user} = useApi()
const {raiseError} = useErrors()
......@@ -179,12 +199,13 @@ export default function FilePreview({uploadId, path, size}) {
}
// Use the text viewer as last resort
return viewerText.render({uploadId, path, url, data, setFailedToPreview, classes})
}
})
FilePreview.propTypes = {
uploadId: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
size: PropTypes.number.isRequired
}
export default FilePreview
const useFilePreviewTextStyles = makeStyles(theme => ({
containerDiv: {
......@@ -263,3 +284,45 @@ FilePreviewText.propTypes = {
uploadId: PropTypes.string.isRequired,
path: PropTypes.string.isRequired
}
const useFilePreviewPdfStyles = makeStyles(theme => ({
containerDiv: {
width: '100%',
height: '100%',
overflowX: 'hidden',
overflowY: 'scroll',
border: '1px solid black',
boxSizing: 'border-box'
},
pageDiv: {
border: '5px solid gray'
}
}))
const FilePreviewPdf = React.memo(props => {
const classes = useFilePreviewPdfStyles()
const containerRef = useRef()
const [numPages, setNumPages] = useState(null)
const [pageWidth, setPageWidth] = useState()
useLayoutEffect(() => {
if (containerRef.current) {
setPageWidth(containerRef.current.clientWidth - 10) // The -10 is because of the borders
}
}, [])
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages)
}
return (
<div className={classes.containerDiv} ref={containerRef}>
<Document onLoadSuccess={onDocumentLoadSuccess} renderMode="svg" {...props}>
{numPages && pageWidth &&
Array(numPages).fill().map((_, i) =>
<div className={classes.pageDiv} key={`pdfPageDiv${i + 1}`}>
<Page pageNumber={i + 1} key={`pdfPage${i + 1}`} width={pageWidth}/>
</div>)
}
</Document>
</div>)
})
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment