Tom Butcher
85273bea1b
Some checks failed
farmcontrol/farmcontrol-ui/pipeline/head There was a failure building this commit
- Introduced PDFPreview and PDFViewer components to facilitate PDF rendering and interaction within the dashboard. - Implemented zoom and pan functionalities in PDFPreview for improved user experience. - Enhanced App.css with styles for a new overlay during PDF loading, ensuring a smooth visual transition. - Updated TemplatePreview to integrate PDF viewing capabilities, allowing users to preview PDF documents seamlessly. - Modified ApiServerContext to support asynchronous PDF downloads, improving document handling efficiency.
86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
import { useState } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Flex, Button } from 'antd'
|
|
import PlusIcon from '../../Icons/PlusIcon.jsx'
|
|
import MinusIcon from '../../Icons/MinusIcon.jsx'
|
|
import PanIcon from '../../Icons/PanIcon.jsx'
|
|
import PanFilledIcon from '../../Icons/PanFilledIcon.jsx'
|
|
import PDFViewer from './PDFViewer.jsx'
|
|
|
|
const PDFPreview = ({ file, loading = false, style }) => {
|
|
const [previewScale, setPreviewScale] = useState(1)
|
|
const [panMode, setPanMode] = useState(false)
|
|
|
|
return (
|
|
<Flex vertical gap={'middle'} style={{ height: '100%', ...style }}>
|
|
<Flex gap={'small'}>
|
|
<Button
|
|
icon={
|
|
panMode ? (
|
|
<PanFilledIcon style={{ color: 'var(--color-primary)' }} />
|
|
) : (
|
|
<PanIcon />
|
|
)
|
|
}
|
|
disabled={loading}
|
|
onClick={() => {
|
|
setPanMode((prev) => !prev)
|
|
}}
|
|
/>
|
|
<Button
|
|
icon={<PlusIcon />}
|
|
onClick={() => {
|
|
setPreviewScale((prev) => prev + 0.05)
|
|
}}
|
|
disabled={loading}
|
|
/>
|
|
<Button
|
|
icon={<MinusIcon />}
|
|
onClick={() => {
|
|
setPreviewScale((prev) => Math.max(0.1, prev - 0.05))
|
|
}}
|
|
disabled={loading}
|
|
/>
|
|
<Button
|
|
readOnly={true}
|
|
style={{ width: '65px' }}
|
|
disabled={loading}
|
|
onClick={() => {
|
|
setPreviewScale(1)
|
|
}}
|
|
>
|
|
{previewScale.toFixed(2)}x
|
|
</Button>
|
|
</Flex>
|
|
|
|
<div
|
|
style={{
|
|
flex: '1 1 auto',
|
|
minHeight: 0,
|
|
border: '1px solid #85858541'
|
|
}}
|
|
>
|
|
<PDFViewer
|
|
file={file}
|
|
scale={previewScale}
|
|
panMode={panMode}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
PDFPreview.propTypes = {
|
|
file: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.instanceOf(Blob),
|
|
PropTypes.instanceOf(ArrayBuffer),
|
|
PropTypes.object
|
|
]),
|
|
loading: PropTypes.bool,
|
|
style: PropTypes.object
|
|
}
|
|
|
|
export default PDFPreview
|