fix: OptionsAndPicture
This commit is contained in:
IlyaDoronin
parent
1dbd5bea87
commit
e3e01a17f5
@ -1,18 +1,25 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Link,
|
||||
Typography,
|
||||
ButtonBase,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
Button,
|
||||
Popover,
|
||||
TextareaAutosize,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useParams } from "react-router-dom";
|
||||
import AddImage from "../../../assets/icons/questionsPage/addImage";
|
||||
|
||||
import { AnswerDraggableList } from "../AnswerDraggableList";
|
||||
import { CropModal } from "@ui_kit/Modal/CropModal";
|
||||
import { UploadImageModal } from "../UploadImage/UploadImageModal";
|
||||
|
||||
import AddImage from "@icons/questionsPage/addImage";
|
||||
import Image from "@icons/questionsPage/image";
|
||||
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
|
||||
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||||
import SwitchOptionsAndPict from "./switchOptionsAndPict";
|
||||
@ -22,233 +29,344 @@ import { ImageAddIcons } from "@icons/ImageAddIcons";
|
||||
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
||||
import { MessageIcon } from "@icons/messagIcon";
|
||||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||||
import PlusImage from "@icons/questionsPage/plus";
|
||||
|
||||
interface Props {
|
||||
totalIndex: number;
|
||||
}
|
||||
|
||||
export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||
const [switchState, setSwitchState] = React.useState("setting");
|
||||
const { listQuestions } = questionStore();
|
||||
const quizId = Number(useParams().quizId);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [opened, setOpened] = useState<boolean>(false);
|
||||
const [switchState, setSwitchState] = useState("setting");
|
||||
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data);
|
||||
};
|
||||
|
||||
const uploadImage = (files: FileList | null) => {
|
||||
if (files?.length) {
|
||||
const [file] = Array.from(files);
|
||||
|
||||
const clonContent = { ...listQuestions[quizId][totalIndex].content };
|
||||
clonContent.variants[currentIndex].image = URL.createObjectURL(file);
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
|
||||
setOpen(false);
|
||||
setOpened(true);
|
||||
}
|
||||
};
|
||||
|
||||
const addNewAnswer = () => {
|
||||
const answerNew =
|
||||
listQuestions[quizId][totalIndex].content.variants.slice();
|
||||
answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, {
|
||||
content: {
|
||||
...listQuestions[quizId][totalIndex].content,
|
||||
variants: answerNew,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ pl: "20px", pr: "20px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
paddingBottom: isMobile ? "15px" : "24px",
|
||||
marginTop: isMobile ? "15px" : "4px",
|
||||
height: isMobile ? "auto" : "40px",
|
||||
marginLeft: isTablet ? "0px" : "60px",
|
||||
}}
|
||||
>
|
||||
{listQuestions[quizId][totalIndex].content.variants.map((_, index) => (
|
||||
<ButtonBase
|
||||
key={index}
|
||||
component="label"
|
||||
sx={{
|
||||
display: isTablet ? "none" : "flex",
|
||||
cursor: "pointer",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
onChange={({ target }) => {
|
||||
if (target.files?.length) {
|
||||
const clonContent = listQuestions[quizId][totalIndex].content;
|
||||
|
||||
clonContent.variants[index].answer = URL.createObjectURL(target.files[0]);
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, {
|
||||
content: clonContent,
|
||||
});
|
||||
}
|
||||
}}
|
||||
hidden
|
||||
accept="image/*"
|
||||
multiple
|
||||
type="file"
|
||||
/>
|
||||
<Box sx={{ display: isTablet ? "none" : "flex", alignItems: "center" }}>
|
||||
<AnswerDraggableList
|
||||
variants={listQuestions[quizId][totalIndex].content.variants}
|
||||
totalIndex={totalIndex}
|
||||
additionalContent={(variant, index) => (
|
||||
<>
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "60px",
|
||||
height: "40px",
|
||||
background: "#EEE4FC",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setOpen(true);
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
|
||||
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
|
||||
</Box>
|
||||
<span
|
||||
style={{
|
||||
{variant.image ? (
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
width: "60px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
background: "#EEE4FC",
|
||||
borderRadius: "3px",
|
||||
margin: "0 10px",
|
||||
height: "40px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", width: "40px" }}>
|
||||
<img
|
||||
src={variant.image}
|
||||
alt=""
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
<PlusImage />
|
||||
</Box>
|
||||
) : (
|
||||
<Button component="label" sx={{ padding: "0px" }}>
|
||||
<AddImage
|
||||
sx={{
|
||||
height: "40px",
|
||||
width: "60px",
|
||||
margin: "0 10px",
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
additionalMobile={(variant, index) => (
|
||||
<>
|
||||
{isMobile && (
|
||||
<Box
|
||||
onClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setOpen(true);
|
||||
}}
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
m: "8px",
|
||||
position: "relative",
|
||||
borderRadius: "3px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
background: "#EEE4FC",
|
||||
height: "40px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "#7E2AEA",
|
||||
height: "100%",
|
||||
width: "25px",
|
||||
}}
|
||||
>
|
||||
{variant.image ? (
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
width: "40px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
background: "#EEE4FC",
|
||||
height: "30px",
|
||||
borderRadius: "3px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={variant.image}
|
||||
alt=""
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Button component="label" sx={{ padding: "0px" }}>
|
||||
<Image
|
||||
sx={{
|
||||
height: "40px",
|
||||
width: "60px",
|
||||
margin: "0 10px",
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "20px",
|
||||
background: "#EEE4FC",
|
||||
height: "40px",
|
||||
color: "white",
|
||||
fontSize: "15px",
|
||||
backgroundColor: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography
|
||||
sx={{
|
||||
padding: "0 0 0 20px",
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Typography>
|
||||
</Box>
|
||||
</ButtonBase>
|
||||
))}
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
border: "1px solid #9A9AAF",
|
||||
borderRadius: "8px",
|
||||
display: isTablet ? "block" : "none",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
focused={false}
|
||||
placeholder={"Добавьте ответ"}
|
||||
multiline={listQuestions[quizId][totalIndex].content.largeCheck}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<>
|
||||
<InputAdornment position="start">
|
||||
<PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
|
||||
</InputAdornment>
|
||||
{!isMobile && (
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<UploadImageModal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
imgHC={uploadImage}
|
||||
/>
|
||||
<CropModal
|
||||
opened={opened}
|
||||
onClose={() => setOpened(false)}
|
||||
picture={
|
||||
listQuestions[quizId][totalIndex].content.variants[currentIndex]
|
||||
.image
|
||||
}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
border: "1px solid #9A9AAF",
|
||||
borderRadius: "8px",
|
||||
display: isTablet ? "block" : "none",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
focused={false}
|
||||
placeholder={"Добавьте ответ"}
|
||||
multiline={listQuestions[quizId][totalIndex].content.largeCheck}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<>
|
||||
<InputAdornment position="start">
|
||||
<PointsIcon
|
||||
style={{ color: "#9A9AAF", fontSize: "30px" }}
|
||||
/>
|
||||
</InputAdornment>
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "60px",
|
||||
height: "40px",
|
||||
background: "#EEE4FC",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginRight: "20px",
|
||||
marginLeft: "12px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "60px",
|
||||
height: "40px",
|
||||
background: "#EEE4FC",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginRight: "20px",
|
||||
marginLeft: "12px",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
|
||||
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
|
||||
</Box>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "#7E2AEA",
|
||||
height: "100%",
|
||||
width: "25px",
|
||||
color: "white",
|
||||
fontSize: "15px",
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
|
||||
<MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
|
||||
</IconButton>
|
||||
<Popover
|
||||
id="my-popover-id"
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
|
||||
open={false}
|
||||
>
|
||||
<TextareaAutosize
|
||||
style={{ margin: "10px" }}
|
||||
placeholder="Подсказка для этого ответа"
|
||||
/>
|
||||
</Popover>
|
||||
<IconButton sx={{ padding: "0" }}>
|
||||
<DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
padding: "13.5px",
|
||||
borderRadius: "10px",
|
||||
background: "#ffffff",
|
||||
height: "48px",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "#7E2AEA",
|
||||
height: "100%",
|
||||
width: "25px",
|
||||
color: "white",
|
||||
fontSize: "15px",
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
sx={{ padding: "0" }}
|
||||
aria-describedby="my-popover-id"
|
||||
>
|
||||
<MessageIcon
|
||||
style={{
|
||||
color: "#9A9AAF",
|
||||
fontSize: "30px",
|
||||
marginRight: "6.5px",
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
<Popover
|
||||
id="my-popover-id"
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
|
||||
open={false}
|
||||
>
|
||||
<TextareaAutosize
|
||||
style={{ margin: "10px" }}
|
||||
placeholder="Подсказка для этого ответа"
|
||||
/>
|
||||
</Popover>
|
||||
<IconButton sx={{ padding: "0" }}>
|
||||
<DeleteIcon
|
||||
style={{
|
||||
color: theme.palette.grey2.main,
|
||||
marginRight: "-1px",
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
padding: "13.5px",
|
||||
borderRadius: "10px",
|
||||
background: "#ffffff",
|
||||
height: "48px",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
|
||||
}}
|
||||
/>
|
||||
|
||||
{isMobile && (
|
||||
{isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
m: "8px",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
|
||||
/>
|
||||
<ImageAddIcons
|
||||
style={{
|
||||
position: "absolute",
|
||||
color: "#7E2AEA",
|
||||
fontSize: "20px",
|
||||
left: "45%",
|
||||
right: "55%",
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
m: "8px",
|
||||
position: "relative",
|
||||
width: "20px",
|
||||
background: "#EEE4FC",
|
||||
height: "40px",
|
||||
color: "white",
|
||||
backgroundColor: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
|
||||
/>
|
||||
<ImageAddIcons
|
||||
style={{
|
||||
position: "absolute",
|
||||
color: "#7E2AEA",
|
||||
fontSize: "20px",
|
||||
left: "45%",
|
||||
right: "55%",
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "20px",
|
||||
background: "#EEE4FC",
|
||||
height: "40px",
|
||||
color: "white",
|
||||
backgroundColor: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
+
|
||||
</Box>
|
||||
+
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
@ -293,7 +411,13 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||
>
|
||||
или нажмите Enter
|
||||
</Typography>
|
||||
<EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
|
||||
<EnterIcon
|
||||
style={{
|
||||
color: "#7E2AEA",
|
||||
fontSize: "24px",
|
||||
marginLeft: "6px",
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user