119 lines
3.4 KiB
TypeScript
119 lines
3.4 KiB
TypeScript
import {
|
||
Box,
|
||
Tooltip,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import { updateQuestion } from "@root/questions/actions";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
|
||
import { useEffect, useState } from "react";
|
||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||
import type { QuizQuestionText } from "../../../model/questionTypes/text";
|
||
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||
import SwitchTextField from "./switchTextField";
|
||
|
||
interface Props {
|
||
question: QuizQuestionText;
|
||
openBranchingPage: boolean;
|
||
setOpenBranchingPage: (a: boolean) => void;
|
||
}
|
||
|
||
export default function OwnTextField({
|
||
question,
|
||
openBranchingPage,
|
||
setOpenBranchingPage,
|
||
}: Props) {
|
||
const [switchState, setSwitchState] = useState("setting");
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||
|
||
const setPlaceholder = (value: string) => {
|
||
updateQuestion(question.id, (question) => {
|
||
if (question.type !== "text") return;
|
||
|
||
question.content.placeholder = value;
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (question.deleteTimeoutId) {
|
||
clearTimeout(question.deleteTimeoutId);
|
||
}
|
||
}, [question]);
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
width: "auto",
|
||
maxWidth: "745px",
|
||
display: "flex",
|
||
pb: "20px",
|
||
pl: "20px",
|
||
pr: "20px",
|
||
flexDirection: "column",
|
||
gap: isMobile ? "15px" : "20px",
|
||
}}
|
||
>
|
||
<CustomTextField
|
||
placeholder={"Пример ответа"}
|
||
value={question.content.placeholder}
|
||
onChange={({ target }) => setPlaceholder(target.value)}
|
||
sx={{
|
||
maxWidth: isFigmaTablte ? "549px" : "640px",
|
||
width: "100%",
|
||
mt: isMobile ? "15px" : "0px",
|
||
}}
|
||
maxLength={200}
|
||
/>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: isMobile ? "flex-start" : "center",
|
||
gap: "12px",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 400,
|
||
fontSize: "16px",
|
||
lineHeight: "18.96px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Пользователю будет дано поле для ввода значения
|
||
</Typography>
|
||
{isMobile ? (
|
||
<TooltipClickInfo
|
||
title={"Будет использоваться для ввода значения."}
|
||
/>
|
||
) : (
|
||
<Tooltip
|
||
title="Будет использоваться для ввода значения."
|
||
placement="top"
|
||
>
|
||
<Box>
|
||
<InfoIcon />
|
||
</Box>
|
||
</Tooltip>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
<ButtonsOptionsAndPict
|
||
switchState={switchState}
|
||
SSHC={setSwitchState}
|
||
questionId={question.id}
|
||
questionContentId={question.content.id}
|
||
questionHasParent={question.content.rule.parentId.length !== 0}
|
||
questionType={question.type}
|
||
openBranchingPage={openBranchingPage}
|
||
setOpenBranchingPage={setOpenBranchingPage}
|
||
/>
|
||
<SwitchTextField switchState={switchState} question={question} />
|
||
</>
|
||
);
|
||
}
|