89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
|
||
import { openCropModal } from "@root/cropModal";
|
||
import { closeImageUploadModal, openImageUploadModal } from "@root/imageUploadModal";
|
||
import { setQuestionBackgroundImage, setQuestionOriginalBackgroundImage } from "@root/questions/actions";
|
||
import { CropModal } from "@ui_kit/Modal/CropModal";
|
||
import UploadBox from "@ui_kit/UploadBox";
|
||
import { type DragEvent } from "react";
|
||
import UploadIcon from "../../../assets/icons/UploadIcon";
|
||
import { UploadImageModal } from "./UploadImageModal";
|
||
|
||
|
||
type UploadImageProps = {
|
||
question: AnyTypedQuizQuestion;
|
||
};
|
||
|
||
export default function UploadImage({ question }: UploadImageProps) {
|
||
const theme = useTheme();
|
||
|
||
const handleImageUpload = (files: FileList | null) => {
|
||
if (!files?.length) return;
|
||
|
||
const [file] = Array.from(files);
|
||
|
||
const url = URL.createObjectURL(file);
|
||
|
||
setQuestionBackgroundImage(question.id, url);
|
||
setQuestionOriginalBackgroundImage(question.id, url);
|
||
closeImageUploadModal();
|
||
openCropModal(url, url);
|
||
};
|
||
|
||
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
handleImageUpload(event.dataTransfer.files);
|
||
};
|
||
|
||
function handleCropModalSaveClick(url: string) {
|
||
setQuestionBackgroundImage(question.id, url);
|
||
}
|
||
|
||
return (
|
||
<Box sx={{ padding: "20px" }}>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 500,
|
||
color: theme.palette.grey3.main,
|
||
mt: "11px",
|
||
mb: "14px",
|
||
}}
|
||
>
|
||
Загрузить изображение
|
||
</Typography>
|
||
<ButtonBase
|
||
onClick={openImageUploadModal}
|
||
sx={{
|
||
width: "100%",
|
||
maxWidth: "260px",
|
||
height: "120px",
|
||
}}
|
||
>
|
||
{question.content.back ?
|
||
<img
|
||
src={question.content.back}
|
||
alt="question background"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
objectFit: "scale-down",
|
||
display: "block",
|
||
}}
|
||
/>
|
||
:
|
||
<UploadBox
|
||
handleDrop={handleDrop}
|
||
sx={{ maxWidth: "260px" }}
|
||
icon={<UploadIcon />}
|
||
text="5 MB максимум"
|
||
/>
|
||
}
|
||
</ButtonBase>
|
||
<UploadImageModal imgHC={handleImageUpload} />
|
||
<CropModal onSaveImageClick={handleCropModalSaveClick} />
|
||
</Box>
|
||
);
|
||
}
|