import UploadIcon from "@icons/UploadIcon"; import DeleteIcon from '@mui/icons-material/Delete'; import { Box, ButtonBase, IconButton, SxProps, Theme, Typography, useTheme, } from "@mui/material"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { enqueueSnackbar } from "notistack"; import { useState } from "react"; interface Props { text?: string; sx?: SxProps; heightImg: string; widthImg?: string; onFileChange?: (file: File) => void; onDeleteClick?: () => void; imageUrl: string | null; } //Научи функцию принимать данные для валидации export const DropZone = ({ text, sx, heightImg, widthImg, onFileChange, onDeleteClick, imageUrl }: Props) => { const theme = useTheme(); const quiz = useCurrentQuiz(); const [ready, setReady] = useState(false); if (!quiz) return null; // TODO throw and catch with error boundary const imgHC = async (imgInp: HTMLInputElement) => { if (!quiz) return; const file = imgInp.files?.[0]; if (!file) return; if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик"); onFileChange?.(file); }; const dragenterHC = () => { setReady(true); }; const dragexitHC = () => { setReady(false); }; const dropHC = (event: React.DragEvent) => { event.preventDefault(); setReady(false); const file = event.dataTransfer.files[0]; if (file.size < 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик"); onFileChange?.(file); }; const dragOverHC = (event: React.DragEvent) => { event.preventDefault(); }; return imageUrl ? ( img ) : ( imgHC(event.target)} hidden accept="image/*" multiple type="file" /> {text} ); };