Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 1x 3x 3x 1x 1x 3x 1x 3x 3x 3x 3x 3x 1x | /* eslint-disable max-lines-per-function, max-statements */
import { ChangeEvent, DragEvent, FormEvent, useState } from "react"
import ImageUploadModal from "./ImageUploadModal"
import prepareComponent from "@bluframe/grapple/prepareComponent"
export interface Props {
additionalMessage?: string
errorMessage?: string
currentImageId?: string
isAddImageLoading?: boolean
isDeleteImageLoading?: boolean
isDisabled?: boolean
onClose: () => void
// eslint-disable-next-line no-unused-vars
onSubmit: (data: FormData) => void
message?: string
}
export interface ComponentProps extends Omit<Props, "onSubmit"> {
imageDataUrl: string | null
isLoading: boolean
isUploadDisabled: boolean
// eslint-disable-next-line no-unused-vars
onDragOver: (event: DragEvent<HTMLElement>) => void
// eslint-disable-next-line no-unused-vars
onFileDrop: (event: DragEvent<HTMLElement>) => void
// eslint-disable-next-line no-unused-vars
onFileSelect: (event: ChangeEvent<HTMLInputElement>) => void
// eslint-disable-next-line no-unused-vars
onSubmit: (event: FormEvent<HTMLFormElement>) => void
}
const ALLOWED_IMAGES_TYPES = ["image/jpeg", "image/png", "image/webp"]
const DEFAULT_IMAGE_DATA_URL = null
const FIRST_FILE = 0
export const usePrepareComponent = (props: Props): ComponentProps => {
const [imageDataUrl, setImageDataUrl] = useState<string | null>(
DEFAULT_IMAGE_DATA_URL
)
const [data, setData] = useState<File | null>(null)
const onPrepareImageUploadModal = (eventFile: File) => {
Iif (eventFile && ALLOWED_IMAGES_TYPES.includes(eventFile.type)) {
setData(eventFile)
const reader = new FileReader()
reader.onloadend = () => {
Iif (typeof reader.result === "string") {
setImageDataUrl(reader.result)
}
}
reader.readAsDataURL(eventFile)
}
}
const onFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
Iif (event.target.files) {
onPrepareImageUploadModal(event.target.files[FIRST_FILE])
}
}
const onFileDrop = (event: DragEvent<HTMLElement>) => {
event.preventDefault()
onPrepareImageUploadModal(event.dataTransfer.files[FIRST_FILE])
}
const onDragOver = (event: DragEvent<HTMLElement>) => {
event.preventDefault()
}
const onSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
Iif (data) {
const formData = new FormData()
formData.append("image", data, data.name)
formData.append("name", data.name)
props.onSubmit(formData)
}
}
const isLoading = Boolean(
props.isAddImageLoading || props.isDeleteImageLoading
)
const isDisabled = props.isDisabled || isLoading
const isUploadDisabled = !imageDataUrl
return {
...props,
imageDataUrl,
isDisabled,
isLoading,
isUploadDisabled,
onDragOver,
onFileDrop,
onFileSelect,
onSubmit
}
}
export default prepareComponent<Props, ComponentProps>(usePrepareComponent)(
ImageUploadModal
)
|