83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
import { useParams } from "react-router-dom";
|
||
import { useState } from "react";
|
||
import { Typography, Box, useTheme, ButtonBase } from "@mui/material";
|
||
import UploadBox from "@ui_kit/UploadBox";
|
||
import { CropModal } from "@ui_kit/Modal/CropModal";
|
||
import UploadIcon from "../../../assets/icons/UploadIcon";
|
||
import * as React from "react";
|
||
import { questionStore, updateQuestionsList } from "@root/questions";
|
||
import { UploadImageModal } from "./UploadImageModal";
|
||
|
||
import type { DragEvent } from "react";
|
||
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
|
||
|
||
type UploadImageProps = {
|
||
totalIndex: number;
|
||
};
|
||
|
||
export default function UploadImage({ totalIndex }: UploadImageProps) {
|
||
const quizId = Number(useParams().quizId);
|
||
const theme = useTheme();
|
||
const [open, setOpen] = React.useState(false);
|
||
const { listQuestions } = questionStore();
|
||
const question = listQuestions[quizId][totalIndex] as QuizQuestionImages;
|
||
|
||
const handleOpen = () => setOpen(true);
|
||
const handleClose = () => setOpen(false);
|
||
const imgHC = (files: FileList | null) => {
|
||
if (files?.length) {
|
||
const [file] = Array.from(files);
|
||
|
||
updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
|
||
content: {
|
||
...question.content,
|
||
back: URL.createObjectURL(file),
|
||
},
|
||
});
|
||
|
||
handleClose();
|
||
setOpened(true);
|
||
}
|
||
};
|
||
const [opened, setOpened] = useState<boolean>(false);
|
||
|
||
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
imgHC(event.dataTransfer.files);
|
||
};
|
||
|
||
return (
|
||
<Box sx={{ padding: "20px" }}>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 500,
|
||
color: theme.palette.grey3.main,
|
||
mt: "11px",
|
||
mb: "14px",
|
||
}}
|
||
>
|
||
Загрузить изображение
|
||
</Typography>
|
||
<ButtonBase
|
||
onClick={handleOpen}
|
||
sx={{ width: "100%", maxWidth: "260px" }}
|
||
>
|
||
<UploadBox
|
||
handleDrop={handleDrop}
|
||
sx={{ maxWidth: "260px" }}
|
||
icon={<UploadIcon />}
|
||
text="5 MB максимум"
|
||
/>
|
||
</ButtonBase>
|
||
<UploadImageModal open={open} onClose={handleClose} imgHC={imgHC} />
|
||
<CropModal
|
||
opened={opened}
|
||
onClose={() => setOpened(false)}
|
||
picture={question.content.back}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|