File size: 1,637 Bytes
abcf568 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import { useRef } from 'react'
import { CanvasWorkspaceModal } from '../../../../components/canvas/CanvasWorkspaceModal'
import { ImageInputModeModal } from '../../../../components/ImageInputModeModal'
import type { ReferenceImage } from '../../../../types/api'
interface StudioImageInputCommandUIProps {
isImageModeOpen: boolean
isCanvasOpen: boolean
onCloseImageMode: () => void
onCloseCanvas: () => void
onImportFiles: (files: FileList | File[]) => Promise<void> | void
onStartImport: () => void
onStartDraw: () => void
onCanvasComplete: (images: ReferenceImage[]) => void
}
export function StudioImageInputCommandUI({
isImageModeOpen,
isCanvasOpen,
onCloseImageMode,
onCloseCanvas,
onImportFiles,
onStartImport,
onStartDraw,
onCanvasComplete,
}: StudioImageInputCommandUIProps) {
const fileInputRef = useRef<HTMLInputElement>(null)
return (
<>
<input
ref={fileInputRef}
type="file"
accept="image/*"
multiple
className="hidden"
onChange={(event) => {
const files = event.target.files
if (files && files.length > 0) {
void onImportFiles(files)
}
event.currentTarget.value = ''
}}
/>
<ImageInputModeModal
isOpen={isImageModeOpen}
onClose={onCloseImageMode}
onImport={() => {
onStartImport()
fileInputRef.current?.click()
}}
onDraw={onStartDraw}
/>
<CanvasWorkspaceModal
isOpen={isCanvasOpen}
onClose={onCloseCanvas}
onComplete={onCanvasComplete}
/>
</>
)
}
|