fix: ButtonsOptions
This commit is contained in:
IlyaDoronin
parent
79b6442377
commit
76186f6a7b
@ -193,7 +193,11 @@ export default function ButtonsOptions({
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
{value !== "setting" && quize.config.type === "quize" && (
|
||||
{(value !== "setting" ||
|
||||
quize.config.type === "quize" ||
|
||||
(value === "setting" &&
|
||||
quize.config.type === "form" &&
|
||||
question.type)) && (
|
||||
<MiniButtonSetting
|
||||
key={title}
|
||||
onClick={() => {
|
||||
|
||||
@ -16,6 +16,7 @@ import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
|
||||
import { DeleteIcon } from "../../assets/icons/questionsPage/deleteIcon";
|
||||
import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { quizStore } from "@root/quizes";
|
||||
import {
|
||||
questionStore,
|
||||
copyQuestion,
|
||||
@ -44,12 +45,14 @@ export default function ButtonsOptionsAndPict({
|
||||
}: Props) {
|
||||
const [buttonHover, setButtonHover] = useState<string>("");
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuizes } = quizStore();
|
||||
const { listQuestions } = questionStore();
|
||||
const [openedReallyChangingModal, setOpenedReallyChangingModal] =
|
||||
useState<boolean>(false);
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
|
||||
const quize = listQuizes[quizId];
|
||||
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
|
||||
|
||||
useEffect(() => {
|
||||
@ -146,151 +149,160 @@ export default function ButtonsOptionsAndPict({
|
||||
/>
|
||||
{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",
|
||||
{quize.config.type === "quize" && (
|
||||
<>
|
||||
<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={() => {
|
||||
SSHC("branching");
|
||||
openedModal();
|
||||
}}
|
||||
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
|
||||
}}
|
||||
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>
|
||||
}
|
||||
/>
|
||||
{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>
|
||||
>
|
||||
<MiniButtonSetting
|
||||
onMouseEnter={() => setButtonHover("branching")}
|
||||
onMouseLeave={() => setButtonHover("")}
|
||||
onClick={() => {
|
||||
SSHC("branching");
|
||||
openedModal();
|
||||
}}
|
||||
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={{
|
||||
@ -306,12 +318,6 @@ export default function ButtonsOptionsAndPict({
|
||||
>
|
||||
<CopyIcon style={{ color: "#4D4D4D" }} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{ borderRadius: "6px", padding: " 0px 2px" }}
|
||||
onClick={() => copyQuestion(quizId, totalIndex)}
|
||||
>
|
||||
<CopyIcon color={"#4D4D4D"} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||||
onClick={() => {
|
||||
|
||||
@ -201,6 +201,25 @@ export default function QuestionsPageCard({
|
||||
onChange={({ target }) => debounced(target.value)}
|
||||
sx={{ margin: "20px", width: "auto" }}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<Box>
|
||||
<InputAdornment
|
||||
ref={anchorRef}
|
||||
position="start"
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => setOpen((isOpened) => !isOpened)}
|
||||
>
|
||||
{IconAndrom(question.expanded, question.type)}
|
||||
</InputAdornment>
|
||||
<ChooseAnswerModal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
anchorRef={anchorRef}
|
||||
totalIndex={totalIndex}
|
||||
switchState={question.type}
|
||||
/>
|
||||
</Box>
|
||||
),
|
||||
endAdornment: (
|
||||
<>
|
||||
<InputAdornment {...draggableProps} position="start">
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import ButtonsOptions from "../ButtonsOptions";
|
||||
import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions";
|
||||
|
||||
@ -105,10 +103,6 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
|
||||
const debounced = useDebouncedCallback((title) => {
|
||||
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, { title });
|
||||
}, 1000);
|
||||
console.log("listQuestions[quizId]", listQuestions[quizId]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user