Tom Butcher
26132d206c
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Introduced new components for managing Payment Policies and Fulfillment Policies, enhancing the dashboard's functionality for financial management. - Added corresponding SVG icons for Payment Policy, Fulfillment Policy, and Return Policy to improve visual representation. - Updated App.css with new styles for file gallery previews, ensuring a cohesive layout and user experience across the dashboard. - Implemented new object forms and tables for Payment Policies, allowing for better data handling and user interaction.
112 lines
2.8 KiB
JavaScript
112 lines
2.8 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { ApiServerContext } from '../context/ApiServerContext'
|
|
import {
|
|
useCallback,
|
|
useContext,
|
|
useEffect,
|
|
useState,
|
|
memo,
|
|
useRef
|
|
} from 'react'
|
|
import LoadingPlaceholder from './LoadingPlaceholder'
|
|
import GCodePreview from './GCodePreview'
|
|
import ThreeDPreview from './ThreeDPreview'
|
|
import { AuthContext } from '../context/AuthContext'
|
|
|
|
const FilePreview = ({ file, style = {} }) => {
|
|
useEffect(() => {
|
|
console.log('FILEPREVIEWFILE', file)
|
|
}, [file])
|
|
const { token } = useContext(AuthContext)
|
|
const { fetchFileContent } = useContext(ApiServerContext)
|
|
|
|
const [fileObjectUrl, setFileObjectUrl] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState(null)
|
|
|
|
const currentId = useRef(null)
|
|
|
|
const fetchPreview = useCallback(async () => {
|
|
if (error != null) {
|
|
return
|
|
}
|
|
setLoading(true)
|
|
const objectUrl = await fetchFileContent(file, false)
|
|
if (objectUrl == null) {
|
|
setLoading(false)
|
|
console.error('Failed to fetch file content', file)
|
|
setError('Failed to fetch file content')
|
|
return
|
|
}
|
|
setFileObjectUrl(objectUrl)
|
|
setLoading(false)
|
|
}, [file, fetchFileContent, error])
|
|
|
|
useEffect(() => {
|
|
if (file?.type && token != null && file._id !== currentId.current) {
|
|
currentId.current = file._id
|
|
fetchPreview()
|
|
}
|
|
}, [file._id, file?.type, fetchPreview, token])
|
|
|
|
if (loading == true || !file?.type) {
|
|
return <LoadingPlaceholder message={'Loading file preview...'} />
|
|
}
|
|
|
|
if (error != null) {
|
|
return <div style={{ color: 'red' }}>{error}</div>
|
|
}
|
|
|
|
const isGcode =
|
|
['.g', '.gcode'].includes((file?.extension || '').toLowerCase()) || false
|
|
|
|
const is3DModel =
|
|
['.stl', '.3mf'].includes((file?.extension || '').toLowerCase()) || false
|
|
|
|
const isImage = file?.type.startsWith('image/')
|
|
|
|
if (isGcode && fileObjectUrl) {
|
|
return (
|
|
<GCodePreview
|
|
src={fileObjectUrl}
|
|
topLayerColor={'#ff9800'}
|
|
lastSegmentColor={'#e91e63'}
|
|
startLayer={0}
|
|
endLayer={undefined}
|
|
lineWidth={1}
|
|
style={style}
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (is3DModel && fileObjectUrl) {
|
|
return (
|
|
<ThreeDPreview
|
|
src={fileObjectUrl}
|
|
style={style}
|
|
extension={file.extension}
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (isImage && fileObjectUrl) {
|
|
return <img src={fileObjectUrl} style={style}></img>
|
|
}
|
|
return null
|
|
}
|
|
|
|
FilePreview.propTypes = {
|
|
file: PropTypes.object.isRequired,
|
|
style: PropTypes.object
|
|
}
|
|
|
|
// Custom comparison function to only re-render when file._id changes
|
|
const areEqual = (prevProps, nextProps) => {
|
|
return (
|
|
prevProps.file?._id === nextProps.file?._id &&
|
|
JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)
|
|
)
|
|
}
|
|
|
|
export default memo(FilePreview, areEqual)
|