340 lines
15 KiB
TypeScript
340 lines
15 KiB
TypeScript
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
|
||
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
|
||
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
|
||
import { QuizQuestionVarImg } from "@model/questionTypes/varimg";
|
||
import {
|
||
Box,
|
||
IconButton,
|
||
Tooltip,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import { copyQuestion, deleteQuestion, updateQuestion } from "@root/questions/actions";
|
||
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
||
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
|
||
import { useEffect, useState } from "react";
|
||
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
|
||
import Branching from "../../assets/icons/questionsPage/branching";
|
||
import Clue from "../../assets/icons/questionsPage/clue";
|
||
import { DeleteIcon } from "../../assets/icons/questionsPage/deleteIcon";
|
||
import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
|
||
import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
|
||
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
|
||
import { QuizQuestionVariant } from "@model/questionTypes/variant";
|
||
import { updateOpenedModalSettingsId } from "@root/questions/actions";
|
||
import { updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
|
||
|
||
interface Props {
|
||
switchState: string;
|
||
SSHC: (data: string) => void;
|
||
question: QuizQuestionVariant | QuizQuestionVarImg;
|
||
}
|
||
|
||
export default function ButtonsOptionsAndPict({
|
||
SSHC,
|
||
switchState,
|
||
question,
|
||
}: Props) {
|
||
const [buttonHover, setButtonHover] = useState<string>("");
|
||
const [openedReallyChangingModal, setOpenedReallyChangingModal] =
|
||
useState<boolean>(false);
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
|
||
const { openBranchingPanel } = useQuestionsStore.getState()
|
||
const quiz = useCurrentQuiz();
|
||
|
||
useEffect(() => {
|
||
if (question.deleteTimeoutId) {
|
||
clearTimeout(question.deleteTimeoutId);
|
||
}
|
||
}, [question]);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
width: "100%",
|
||
background: "#f2f3f7",
|
||
height: isMobile ? "92px" : "70px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
padding: isMobile ? " 3px 12px 11px" : "20px",
|
||
display: "flex",
|
||
flexWrap: isMobile ? "wrap" : "nowrap",
|
||
gap: "6px",
|
||
}}
|
||
>
|
||
<MiniButtonSetting
|
||
onMouseEnter={() => setButtonHover("setting")}
|
||
onMouseLeave={() => setButtonHover("")}
|
||
onClick={() => {
|
||
SSHC("setting");
|
||
}}
|
||
sx={{
|
||
maxWidth: "104px",
|
||
minWidth: isIconMobile ? "30px" : "64px",
|
||
height: "30px",
|
||
backgroundColor:
|
||
switchState === "setting"
|
||
? theme.palette.brightPurple.main
|
||
: "transparent",
|
||
color:
|
||
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
|
||
"&:hover": {
|
||
color:
|
||
switchState === "setting" ? theme.palette.grey3.main : null,
|
||
},
|
||
}}
|
||
>
|
||
<SettingIcon
|
||
color={
|
||
buttonHover === "setting"
|
||
? theme.palette.grey3.main
|
||
: switchState === "setting"
|
||
? "#ffffff"
|
||
: theme.palette.grey3.main
|
||
}
|
||
/>
|
||
{isIconMobile ? null : "Настройки"}
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onMouseEnter={() => setButtonHover("help")}
|
||
onMouseLeave={() => setButtonHover("")}
|
||
onClick={() => {
|
||
SSHC("help");
|
||
}}
|
||
sx={{
|
||
minWidth: isIconMobile ? "30px" : "64px",
|
||
maxWidth: "102px",
|
||
height: "30px",
|
||
backgroundColor:
|
||
switchState === "help"
|
||
? theme.palette.brightPurple.main
|
||
: "transparent",
|
||
color:
|
||
switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
|
||
"&:hover": {
|
||
color: switchState === "help" ? theme.palette.grey3.main : null,
|
||
},
|
||
}}
|
||
>
|
||
<Clue
|
||
color={
|
||
buttonHover === "help"
|
||
? theme.palette.grey3.main
|
||
: switchState === "help"
|
||
? "#ffffff"
|
||
: theme.palette.grey3.main
|
||
}
|
||
/>
|
||
{isIconMobile ? null : "Подсказка"}
|
||
</MiniButtonSetting>
|
||
<>
|
||
<Tooltip
|
||
arrow
|
||
placement="right"
|
||
componentsProps={{
|
||
tooltip: {
|
||
sx: {
|
||
background: "#fff",
|
||
borderRadius: "6px",
|
||
color: "#9A9AAF",
|
||
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
||
"& .MuiTooltip-arrow": {
|
||
color: "#FFF",
|
||
},
|
||
},
|
||
},
|
||
}}
|
||
title={
|
||
<Box>
|
||
<Typography
|
||
sx={{
|
||
color: "#4D4D4D",
|
||
fontWeight: "bold",
|
||
fontSize: "14px",
|
||
marginBottom: "10px",
|
||
}}
|
||
>
|
||
Будет показан при условии
|
||
</Typography>
|
||
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
|
||
Название
|
||
</Typography>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: "bold",
|
||
fontSize: "12px",
|
||
marginBottom: "10px",
|
||
}}
|
||
>
|
||
Условие 1, Условие 2
|
||
</Typography>
|
||
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
|
||
Все условия обязательны
|
||
</Typography>
|
||
</Box>
|
||
}
|
||
>
|
||
<MiniButtonSetting
|
||
onMouseEnter={() => setButtonHover("branching")}
|
||
onMouseLeave={() => setButtonHover("")}
|
||
onClick={() => {
|
||
updateOpenBranchingPanel(true)
|
||
updateDesireToOpenABranchingModal(question.content.id)
|
||
}}
|
||
sx={{
|
||
height: "30px",
|
||
maxWidth: "103px",
|
||
minWidth: isIconMobile ? "30px" : "64px",
|
||
backgroundColor:
|
||
switchState === "branching"
|
||
? theme.palette.brightPurple.main
|
||
: "transparent",
|
||
color:
|
||
switchState === "branching"
|
||
? "#ffffff"
|
||
: theme.palette.grey3.main,
|
||
"&:hover": {
|
||
color:
|
||
switchState === "branching"
|
||
? theme.palette.grey3.main
|
||
: null,
|
||
},
|
||
}}
|
||
>
|
||
<Branching
|
||
color={
|
||
buttonHover === "branching"
|
||
? theme.palette.grey3.main
|
||
: switchState === "branching"
|
||
? "#ffffff"
|
||
: theme.palette.grey3.main
|
||
}
|
||
/>
|
||
{isIconMobile ? null : "Ветвление"}
|
||
</MiniButtonSetting>
|
||
</Tooltip>
|
||
<MiniButtonSetting
|
||
onMouseEnter={() => setButtonHover("image")}
|
||
onMouseLeave={() => setButtonHover("")}
|
||
onClick={() => {
|
||
SSHC("image");
|
||
}}
|
||
sx={{
|
||
height: "30px",
|
||
maxWidth: "123px",
|
||
minWidth: isIconMobile ? "30px" : "64px",
|
||
backgroundColor:
|
||
switchState === "image"
|
||
? theme.palette.brightPurple.main
|
||
: "transparent",
|
||
color:
|
||
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
|
||
"&:hover": {
|
||
color:
|
||
switchState === "image" ? theme.palette.grey3.main : null,
|
||
},
|
||
}}
|
||
>
|
||
<ImgIcon
|
||
color={
|
||
buttonHover === "image"
|
||
? theme.palette.grey3.main
|
||
: switchState === "image"
|
||
? "#ffffff"
|
||
: theme.palette.grey3.main
|
||
}
|
||
/>
|
||
{isIconMobile ? null : "Изображение"}
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onClick={() => setOpenedReallyChangingModal(true)}
|
||
sx={{
|
||
minWidth: "30px",
|
||
height: "30px",
|
||
backgroundColor: "#FEDFD0",
|
||
}}
|
||
>
|
||
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onClick={() => setOpenedReallyChangingModal(true)}
|
||
sx={{
|
||
minWidth: "30px",
|
||
height: "30px",
|
||
backgroundColor: "#FEDFD0",
|
||
}}
|
||
>
|
||
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onClick={() => setOpenedReallyChangingModal(true)}
|
||
sx={{
|
||
minWidth: "30px",
|
||
height: "30px",
|
||
backgroundColor: "#FEDFD0",
|
||
}}
|
||
>
|
||
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
|
||
</MiniButtonSetting>
|
||
</>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
}}
|
||
>
|
||
<IconButton sx={{ borderRadius: "6px", padding: "0px 2px" }}>
|
||
<HideIcon style={{ color: "#4D4D4D" }} />
|
||
</IconButton>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px" }}
|
||
onClick={() => copyQuestion(question.id, question.quizId)}
|
||
>
|
||
<CopyIcon style={{ color: "#4D4D4D" }} />
|
||
</IconButton>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => { // TODO
|
||
// const removedId = question.id;
|
||
// if (question.deleteTimeoutId) {
|
||
// clearTimeout(question.deleteTimeoutId);
|
||
// }
|
||
|
||
// removeQuestion(quizId, totalIndex);
|
||
|
||
// const newTimeoutId = window.setTimeout(() => {
|
||
// removeQuestionForce(quizId, removedId);
|
||
// }, 5000);
|
||
|
||
// updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||
// ...question,
|
||
// deleteTimeoutId: newTimeoutId,
|
||
// });
|
||
|
||
deleteQuestion(question.id, quiz?.id);
|
||
}}
|
||
data-cy="delete-question"
|
||
>
|
||
<DeleteIcon style={{ color: "#4D4D4D" }} />
|
||
</IconButton>
|
||
</Box>
|
||
<ReallyChangingModal
|
||
opened={openedReallyChangingModal}
|
||
onClose={() => setOpenedReallyChangingModal(false)}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|