395 lines
12 KiB
JavaScript
395 lines
12 KiB
JavaScript
import {
|
|
AttachFile,
|
|
Close,
|
|
DeleteOutline,
|
|
DocumentScanner,
|
|
Image,
|
|
InsertDriveFile,
|
|
PhotoCamera,
|
|
} from '@mui/icons-material'
|
|
import {
|
|
Box,
|
|
Button,
|
|
CircularProgress,
|
|
IconButton,
|
|
Sheet,
|
|
Typography,
|
|
} from '@mui/joy'
|
|
import { ClickAwayListener, Popper } from '@mui/material'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
|
|
import { useDocumentScanner } from '../../hooks/useDocumentScanner'
|
|
import { useFileUpload } from '../../hooks/useFileUpload'
|
|
import { useNotification } from '../../service/NotificationProvider'
|
|
import { DeleteDraftAttachment } from '../../utils/Fetcher'
|
|
import { imageSourceToFile } from '../../utils/FileConvert'
|
|
|
|
const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg']
|
|
|
|
const isImageAttachment = attachment => {
|
|
const ext = (attachment?.name || '').split('.').pop()?.toLowerCase()
|
|
return IMAGE_EXTENSIONS.includes(ext)
|
|
}
|
|
|
|
const AttachmentPickerField = ({
|
|
attachments = [],
|
|
draftId,
|
|
emptyDisplay = 'icon-text',
|
|
entityId,
|
|
entityType = 'chore_attachment',
|
|
onChange,
|
|
onClear,
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [isUploading, setIsUploading] = useState(false)
|
|
const buttonRef = useRef(null)
|
|
const { uploadFile } = useFileUpload({ entityType, entityId, draftId })
|
|
const { isNativeScanner, scanDocument } = useDocumentScanner()
|
|
const { showError } = useNotification()
|
|
|
|
// Without a native scanner, `capture` asks a phone for its camera directly.
|
|
// Desktop browsers ignore it and fall back to the file picker, which would
|
|
// duplicate "Image", so the button only appears on touch devices.
|
|
const canTakePhoto = isNativeScanner || navigator.maxTouchPoints > 0
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return
|
|
const handleEscape = e => {
|
|
if (e.key === 'Escape') setIsOpen(false)
|
|
}
|
|
document.addEventListener('keydown', handleEscape)
|
|
return () => document.removeEventListener('keydown', handleEscape)
|
|
}, [isOpen])
|
|
|
|
const upload = async file => {
|
|
setIsUploading(true)
|
|
try {
|
|
const uploaded = await uploadFile(file)
|
|
if (uploaded) {
|
|
onChange([
|
|
...attachments,
|
|
{ url: uploaded.url, path: uploaded.path, name: uploaded.fileName },
|
|
])
|
|
}
|
|
} finally {
|
|
setIsUploading(false)
|
|
}
|
|
}
|
|
|
|
const handlePickFile = ({ accept, capture } = {}) => {
|
|
const input = document.createElement('input')
|
|
input.setAttribute('type', 'file')
|
|
if (accept) input.setAttribute('accept', accept)
|
|
if (capture) input.setAttribute('capture', capture)
|
|
input.onchange = () => {
|
|
const file = input.files?.[0]
|
|
if (file) upload(file)
|
|
}
|
|
input.click()
|
|
}
|
|
|
|
// Native builds get the OS document scanner (edge detection + perspective
|
|
// correction); everywhere else "take photo" is the camera roll shortcut.
|
|
const handleScan = async () => {
|
|
if (!isNativeScanner) {
|
|
handlePickFile({ accept: 'image/*', capture: 'environment' })
|
|
return
|
|
}
|
|
const { cancelled, error, image } = await scanDocument()
|
|
if (cancelled) return
|
|
if (error || !image) {
|
|
showError({
|
|
title: 'Scan Failed',
|
|
message: error || 'Could not scan the document.',
|
|
})
|
|
return
|
|
}
|
|
setIsUploading(true)
|
|
const file = await imageSourceToFile(image, `scan-${Date.now()}.jpg`)
|
|
setIsUploading(false)
|
|
if (!file) {
|
|
showError({
|
|
title: 'Scan Failed',
|
|
message: 'Could not read the scanned image.',
|
|
})
|
|
return
|
|
}
|
|
await upload(file)
|
|
}
|
|
|
|
const handleRemove = async index => {
|
|
const attachment = attachments[index]
|
|
// Draft uploads exist server-side too — delete there so they are not
|
|
// promoted onto the chore when it is created.
|
|
if (attachment?.path) {
|
|
try {
|
|
await DeleteDraftAttachment(attachment.path)
|
|
} catch {
|
|
// file may already be gone; still drop it from the list
|
|
}
|
|
}
|
|
const updated = attachments.filter((_, i) => i !== index)
|
|
onChange(updated)
|
|
if (updated.length === 0) setIsOpen(false)
|
|
}
|
|
|
|
const handleClear = e => {
|
|
e.stopPropagation()
|
|
onClear?.()
|
|
setIsOpen(false)
|
|
}
|
|
|
|
const isEmpty = attachments.length === 0
|
|
const shouldShowLabel = !isEmpty || emptyDisplay === 'icon-text'
|
|
|
|
return (
|
|
<>
|
|
<Box sx={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
|
|
<Button
|
|
ref={buttonRef}
|
|
size='sm'
|
|
variant={isEmpty ? 'outlined' : 'soft'}
|
|
color='neutral'
|
|
onClick={() => setIsOpen(prev => !prev)}
|
|
sx={{
|
|
borderRadius: '128px',
|
|
minHeight: 40,
|
|
minWidth: 'min-content',
|
|
px: shouldShowLabel ? 1.25 : 0.75,
|
|
gap: shouldShowLabel ? 1 : 0,
|
|
justifyContent: 'flex-start',
|
|
whiteSpace: 'nowrap',
|
|
transition: 'all 0.25s ease-in-out',
|
|
}}
|
|
>
|
|
{isUploading ? (
|
|
<CircularProgress
|
|
size='sm'
|
|
sx={{ '--CircularProgress-size': '16px' }}
|
|
/>
|
|
) : (
|
|
<AttachFile sx={{ fontSize: '20px' }} />
|
|
)}
|
|
<Typography
|
|
level='body-sm'
|
|
sx={{
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
maxWidth: shouldShowLabel ? 180 : 0,
|
|
opacity: shouldShowLabel ? 1 : 0,
|
|
transform: shouldShowLabel ? 'translateX(0)' : 'translateX(-4px)',
|
|
transition:
|
|
'max-width 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.25s ease-in-out',
|
|
}}
|
|
>
|
|
{isEmpty
|
|
? 'Attachments'
|
|
: `${attachments.length} file${attachments.length !== 1 ? 's' : ''}`}
|
|
</Typography>
|
|
</Button>
|
|
{!isEmpty && onClear && (
|
|
<IconButton
|
|
size='sm'
|
|
variant='soft'
|
|
color='danger'
|
|
onClick={handleClear}
|
|
sx={{
|
|
position: 'absolute',
|
|
top: -12,
|
|
right: -16,
|
|
zIndex: 10,
|
|
maxHeight: 18,
|
|
maxWidth: 18,
|
|
borderRadius: '50%',
|
|
'&:hover': { bgcolor: 'danger.softBg' },
|
|
}}
|
|
>
|
|
<Close sx={{ fontSize: '18px' }} />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
|
|
{isOpen && (
|
|
<Popper
|
|
open={isOpen}
|
|
anchorEl={buttonRef.current}
|
|
placement='top-start'
|
|
modifiers={[
|
|
{ name: 'offset', options: { offset: [0, 8] } },
|
|
{
|
|
name: 'flip',
|
|
options: { fallbackPlacements: ['bottom-start', 'top-start'] },
|
|
},
|
|
]}
|
|
sx={{ zIndex: 'calc(var(--joy-zIndex-modal) + 1)' }}
|
|
>
|
|
<ClickAwayListener onClickAway={() => setIsOpen(false)}>
|
|
<Sheet
|
|
variant='outlined'
|
|
sx={{
|
|
minWidth: 240,
|
|
maxWidth: 320,
|
|
p: 1,
|
|
borderRadius: 'md',
|
|
boxShadow: 'lg',
|
|
bgcolor: 'background.popup',
|
|
}}
|
|
>
|
|
{attachments.length > 0 && (
|
|
<Box
|
|
sx={{
|
|
mb: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 0.5,
|
|
}}
|
|
>
|
|
{attachments.map((attachment, index) => (
|
|
<Box
|
|
key={index}
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 1,
|
|
p: 0.5,
|
|
borderRadius: 'sm',
|
|
'&:hover': { bgcolor: 'background.level1' },
|
|
}}
|
|
>
|
|
{isImageAttachment(attachment) && (
|
|
<Box
|
|
component='img'
|
|
src={attachment.url}
|
|
alt={attachment.name}
|
|
sx={{
|
|
width: 36,
|
|
height: 36,
|
|
objectFit: 'cover',
|
|
borderRadius: 'sm',
|
|
flexShrink: 0,
|
|
bgcolor: 'background.level2',
|
|
}}
|
|
onError={e => {
|
|
e.target.style.display = 'none'
|
|
e.target.nextSibling.style.display = 'flex'
|
|
}}
|
|
/>
|
|
)}
|
|
<Box
|
|
sx={{
|
|
display: isImageAttachment(attachment)
|
|
? 'none'
|
|
: 'flex',
|
|
width: 36,
|
|
height: 36,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: 'sm',
|
|
bgcolor: 'background.level2',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{isImageAttachment(attachment) ? (
|
|
<Image
|
|
sx={{ fontSize: 20, color: 'text.tertiary' }}
|
|
/>
|
|
) : (
|
|
<InsertDriveFile
|
|
sx={{ fontSize: 20, color: 'text.tertiary' }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
<Typography
|
|
level='body-xs'
|
|
sx={{
|
|
flex: 1,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{attachment.name}
|
|
</Typography>
|
|
<IconButton
|
|
size='sm'
|
|
variant='plain'
|
|
color='danger'
|
|
onClick={() => handleRemove(index)}
|
|
sx={{ flexShrink: 0 }}
|
|
>
|
|
<DeleteOutline sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
)}
|
|
|
|
{isUploading ? (
|
|
<Button
|
|
fullWidth
|
|
size='sm'
|
|
variant='outlined'
|
|
color='neutral'
|
|
disabled
|
|
startDecorator={
|
|
<CircularProgress
|
|
size='sm'
|
|
sx={{ '--CircularProgress-size': '14px' }}
|
|
/>
|
|
}
|
|
>
|
|
Uploading…
|
|
</Button>
|
|
) : (
|
|
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
|
{canTakePhoto && (
|
|
<Button
|
|
size='sm'
|
|
variant='outlined'
|
|
color='neutral'
|
|
sx={{ flex: 1 }}
|
|
startDecorator={
|
|
isNativeScanner ? (
|
|
<DocumentScanner sx={{ fontSize: 16 }} />
|
|
) : (
|
|
<PhotoCamera sx={{ fontSize: 16 }} />
|
|
)
|
|
}
|
|
onClick={handleScan}
|
|
>
|
|
{isNativeScanner ? 'Scan' : 'Photo'}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size='sm'
|
|
variant='outlined'
|
|
color='neutral'
|
|
sx={{ flex: 1 }}
|
|
startDecorator={<Image sx={{ fontSize: 16 }} />}
|
|
onClick={() => handlePickFile({ accept: 'image/*' })}
|
|
>
|
|
Image
|
|
</Button>
|
|
<Button
|
|
size='sm'
|
|
variant='outlined'
|
|
color='neutral'
|
|
sx={{ flex: 1 }}
|
|
startDecorator={<AttachFile sx={{ fontSize: 16 }} />}
|
|
onClick={() => handlePickFile()}
|
|
>
|
|
File
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</Sheet>
|
|
</ClickAwayListener>
|
|
</Popper>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AttachmentPickerField
|