105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
import { Browser } from '@capacitor/browser'
|
|
import { Capacitor } from '@capacitor/core'
|
|
import { Download } from '@mui/icons-material'
|
|
import { Box, CircularProgress, Typography } from '@mui/joy'
|
|
import { useState } from 'react'
|
|
import ModalActions from '../../../components/common/ModalActions'
|
|
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
|
|
|
|
const openUrl = async url => {
|
|
if (Capacitor.isNativePlatform()) {
|
|
await Browser.open({ url })
|
|
} else {
|
|
window.open(url, '_blank', 'noopener,noreferrer')
|
|
}
|
|
}
|
|
|
|
const downloadUrl = (url, fileName) => {
|
|
if (Capacitor.isNativePlatform()) {
|
|
Browser.open({ url })
|
|
} else {
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = fileName || 'attachment'
|
|
a.rel = 'noopener'
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
}
|
|
}
|
|
|
|
function AttachmentViewerModal({ config }) {
|
|
const { ResponsiveModal } = useResponsiveModal()
|
|
const [imgLoaded, setImgLoaded] = useState(false)
|
|
const [imgError, setImgError] = useState(false)
|
|
|
|
const { isOpen, url, fileName, onClose } = config || {}
|
|
|
|
const handleClose = () => {
|
|
setImgLoaded(false)
|
|
setImgError(false)
|
|
onClose?.()
|
|
}
|
|
|
|
return (
|
|
<ResponsiveModal
|
|
open={!!isOpen}
|
|
onClose={handleClose}
|
|
title={fileName || 'Attachment'}
|
|
maxHeight='92vh'
|
|
footer={
|
|
<ModalActions
|
|
secondary={{ label: 'Close', onClick: handleClose }}
|
|
primary={{
|
|
label: 'Download',
|
|
startDecorator: <Download />,
|
|
onClick: () => downloadUrl(url, fileName),
|
|
disabled: !url,
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: 200,
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{!imgLoaded && !imgError && (
|
|
<CircularProgress sx={{ position: 'absolute' }} size='md' />
|
|
)}
|
|
{imgError ? (
|
|
<Typography level='body-sm' sx={{ color: 'text.secondary' }}>
|
|
Failed to load image.
|
|
</Typography>
|
|
) : (
|
|
<Box
|
|
component='img'
|
|
src={url}
|
|
alt={fileName}
|
|
onClick={() => url && openUrl(url)}
|
|
onLoad={() => setImgLoaded(true)}
|
|
onError={() => {
|
|
setImgLoaded(true)
|
|
setImgError(true)
|
|
}}
|
|
sx={{
|
|
cursor: url ? 'zoom-in' : 'default',
|
|
maxWidth: '100%',
|
|
maxHeight: '65vh',
|
|
borderRadius: 'md',
|
|
objectFit: 'contain',
|
|
display: imgLoaded && !imgError ? 'block' : 'none',
|
|
}}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</ResponsiveModal>
|
|
)
|
|
}
|
|
|
|
export default AttachmentViewerModal
|