58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
|
||
import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
|
||
import { DropZone } from "../../../pages/startPage/dropZone";
|
||
import { useDisclosure } from "../../../utils/useDisclosure";
|
||
import { UploadImageModal } from "./UploadImageModal";
|
||
|
||
type UploadImageProps = {
|
||
question: AnyTypedQuizQuestion;
|
||
};
|
||
|
||
export default function UploadImage({ question }: UploadImageProps) {
|
||
const theme = useTheme();
|
||
const quiz = useCurrentQuiz();
|
||
|
||
if (!quiz) return null;
|
||
|
||
return (
|
||
<Box sx={{ padding: "20px" }}>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 500,
|
||
color: theme.palette.grey3.main,
|
||
mt: "11px",
|
||
mb: "14px",
|
||
}}
|
||
>
|
||
Загрузить изображение
|
||
</Typography>
|
||
<DropZone
|
||
text={"5 MB максимум"}
|
||
heightImg={"110px"}
|
||
sx={{ maxWidth: "300px", width: "100%" }}
|
||
imageUrl={question.content.back}
|
||
originalImageUrl={question.content.originalBack}
|
||
onImageUploadClick={(file) => {
|
||
uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
|
||
question.content.back = url;
|
||
question.content.originalBack = url;
|
||
});
|
||
}}
|
||
onDeleteClick={() => {
|
||
updateQuestion(question.id, (question) => {
|
||
question.content.back = null;
|
||
});
|
||
}}
|
||
onImageSaveClick={(file) => {
|
||
uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
|
||
question.content.back = url;
|
||
});
|
||
}}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|