131 lines
4.0 KiB
TypeScript
131 lines
4.0 KiB
TypeScript
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import { updateQuestion } from "@root/questions/actions";
|
||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||
import type { QuizQuestionVariant } from "@frontend/squzanswerer";
|
||
import { memo } from "react";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import { useAddAnswer } from "@/utils/hooks/useAddAnswer";
|
||
|
||
interface Props {
|
||
question: QuizQuestionVariant;
|
||
questionId: string;
|
||
isRequired: boolean;
|
||
isLargeCheck: boolean;
|
||
isMulti: boolean;
|
||
isOwn: boolean;
|
||
ownPlaceholder?: string;
|
||
}
|
||
|
||
const ResponseSettings = memo<Props>(function ({question, questionId, ownPlaceholder, isRequired, isLargeCheck, isMulti, isOwn }) {
|
||
const theme = useTheme();
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(900));
|
||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||
const {switchOwn} = useAddAnswer();
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
flexDirection: isTablet ? "column" : "row",
|
||
marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
|
||
pb: "20px",
|
||
pl: "20px",
|
||
pt: isTablet ? "5px" : "0px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
boxSizing: "border-box",
|
||
pt: "20px",
|
||
pr: isFigmaTablte ? "19px" : "20px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "14px",
|
||
width: "100%",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
height: isMobile ? "18px" : "auto",
|
||
fontWeight: "500",
|
||
fontSize: "18px",
|
||
color: " #4D4D4D",
|
||
}}
|
||
>
|
||
Настройки ответов
|
||
</Typography>
|
||
<CustomCheckbox
|
||
dataCy="checkbox-long-text-answer"
|
||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||
label={"Многострочный ответ"}
|
||
checked={isLargeCheck}
|
||
handleChange={({ target }) => {
|
||
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
|
||
question.content.largeCheck = target.checked;
|
||
});
|
||
}}
|
||
/>
|
||
<CustomCheckbox
|
||
dataCy="checkbox-multiple-answers"
|
||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||
label={"Можно несколько"}
|
||
checked={isMulti}
|
||
handleChange={({ target }) => {
|
||
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
|
||
question.content.multi = target.checked;
|
||
});
|
||
}}
|
||
/>
|
||
<CustomCheckbox
|
||
dataCy="checkbox-own-answer"
|
||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||
label={'Вариант "свой ответ"'}
|
||
checked={isOwn}
|
||
handleChange={({ target }) => {
|
||
switchOwn({question, checked:target.checked})
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
boxSizing: "border-box",
|
||
pt: "20px",
|
||
pr: isFigmaTablte ? "19px" : "20px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "14px",
|
||
width: "100%",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
height: isMobile ? "18px" : "auto",
|
||
fontWeight: "500",
|
||
fontSize: "18px",
|
||
color: " #4D4D4D",
|
||
}}
|
||
>
|
||
Настройки вопросов
|
||
</Typography>
|
||
<CustomCheckbox
|
||
dataCy="checkbox-optional-question"
|
||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||
label={"Необязательный вопрос"}
|
||
checked={!isRequired}
|
||
handleChange={({ target }) => {
|
||
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
|
||
question.content.required = !target.checked;
|
||
});
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
});
|
||
|
||
ResponseSettings.displayName = "ResponseSettings";
|
||
|
||
export default ResponseSettings;
|