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 | 1x 1x 1x 1x 3x 3x 3x 1x 3x 3x 1x 1x 3x 1x 3x 3x 3x 3x 3x | // @flow
/* eslint-disable max-lines-per-function, max-statements */
import ImageUploadModal from "./ImageUploadModal"
import type { ImageUploadModalProps } from "@bluframe/blublocks"
import prepareComponent from "@bluframe/grapple/prepareComponent"
import { useState } from "react"
export type Props = {|
...ImageUploadModalProps
|}
export type ComponentProps = {|
...Props,
+imageDataUrl: ?string,
+isLoading: boolean,
+isUploadDisabled: boolean,
+onDragOver: (event: SyntheticDragEvent<HTMLElement>) => void,
+onFileDrop: (event: SyntheticDragEvent<HTMLElement>) => void,
+onFileSelect: (event: SyntheticInputEvent<HTMLInputElement>) => void,
+onSubmit: (event: SyntheticInputEvent<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>(
DEFAULT_IMAGE_DATA_URL
)
const [data, setData] = useState<?File>(null)
const onPrepareImageUploadModal = (eventFile: File) => {
Iif (eventFile && ALLOWED_IMAGES_TYPES.includes(eventFile.type)) {
setData(eventFile)
const reader = new FileReader()
reader.onloadend = () => {
if (typeof reader.result === "string") {
setImageDataUrl(reader.result)
}
}
reader.readAsDataURL(eventFile)
}
}
const onFileSelect = (event: SyntheticInputEvent<HTMLInputElement>) => {
onPrepareImageUploadModal(event.target.files[FIRST_FILE])
}
const onFileDrop = (event: SyntheticDragEvent<HTMLElement>) => {
event.preventDefault()
onPrepareImageUploadModal(event.dataTransfer.files[FIRST_FILE])
}
const onDragOver = (event: SyntheticDragEvent<HTMLElement>) => {
event.preventDefault()
}
const onSubmit = (event: SyntheticInputEvent<HTMLFormElement>) => {
event.preventDefault()
if (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
): React$ComponentType<Props>)
|