117 lines
3.5 KiB
TypeScript
117 lines
3.5 KiB
TypeScript
import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import { useCallback, useState } from "react";
|
||
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
|
||
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
|
||
import { AnswerDraggableList } from "../AnswerDraggableList";
|
||
import ButtonsOptions from "../QuestionOptions/ButtonsOptions/ButtonsOptions";
|
||
import SwitchDropDown from "./switchDropDown";
|
||
|
||
import type { QuizQuestionSelect } from "@frontend/squzanswerer";
|
||
import AnswerItem from "../AnswerDraggableList/AnswerItem";
|
||
|
||
interface Props {
|
||
question: QuizQuestionSelect;
|
||
openBranchingPage: boolean;
|
||
setOpenBranchingPage: (a: boolean) => void;
|
||
}
|
||
|
||
export default function DropDown({ question, openBranchingPage, setOpenBranchingPage }: Props) {
|
||
const onClickAddAnAnswer = useAddAnswer();
|
||
const [switchState, setSwitchState] = useState("setting");
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
padding: isMobile ? "15px 20px 20px 20px" : "20px 20px 20px 20px ",
|
||
}}
|
||
>
|
||
{question.content.variants.length === 0 ? (
|
||
<Typography
|
||
sx={{
|
||
padding: "0 0 33px 80px",
|
||
fontWeight: 400,
|
||
fontSize: "18px",
|
||
lineHeight: "21.33px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Добавьте ответ
|
||
</Typography>
|
||
) : (
|
||
<AnswerDraggableList
|
||
questionId={question.id}
|
||
variants={question.content.variants.map((variant, index) => (
|
||
<AnswerItem
|
||
key={variant.id}
|
||
index={index}
|
||
disableKeyDown={question.content.variants.length >= 100}
|
||
questionId={question.id}
|
||
variant={variant}
|
||
/>
|
||
))}
|
||
/>
|
||
)}
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
marginBottom: "20px",
|
||
}}
|
||
>
|
||
<Link
|
||
component="button"
|
||
variant="body2"
|
||
sx={{
|
||
color: theme.palette.brightPurple.main,
|
||
fontWeight: "400",
|
||
fontSize: "16px",
|
||
mr: "4px",
|
||
height: "19px",
|
||
}}
|
||
onClick={() => onClickAddAnAnswer(question)}
|
||
>
|
||
Добавьте ответ
|
||
</Link>
|
||
{isMobile ? null : (
|
||
<>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 400,
|
||
lineHeight: "21.33px",
|
||
color: theme.palette.grey2.main,
|
||
fontSize: "16px",
|
||
}}
|
||
>
|
||
или нажмите Enter
|
||
</Typography>
|
||
<EnterIcon
|
||
style={{
|
||
color: "#7E2AEA",
|
||
fontSize: "24px",
|
||
marginLeft: "6px",
|
||
}}
|
||
/>
|
||
</>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
<ButtonsOptions
|
||
switchState={switchState}
|
||
SSHC={setSwitchState}
|
||
questionId={question.id}
|
||
questionContentId={question.content.id}
|
||
questionType={question.type}
|
||
questionHasParent={question.content.rule.parentId?.length !== 0}
|
||
setOpenBranchingPage={setOpenBranchingPage}
|
||
/>
|
||
<SwitchDropDown
|
||
switchState={switchState}
|
||
question={question}
|
||
/>
|
||
</>
|
||
);
|
||
}
|