121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
import { Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
|
||
|
||
import { Answer, useQuizViewStore } from "@stores/quizView";
|
||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||
|
||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||
|
||
import type { ChangeEvent, FC } from "react";
|
||
import type { QuizQuestionText } from "@model/questionTypes/text";
|
||
import { useQuizStore } from "@/stores/useQuizStore";
|
||
|
||
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
||
|
||
interface TextSpecialProps {
|
||
currentQuestion: QuizQuestionText;
|
||
answer?: Answer;
|
||
stepNumber?: number | null;
|
||
}
|
||
|
||
function highlightQuestions(text: string) {
|
||
// Регулярка с учётом возможной точки в конце
|
||
const regex = /(вопрос\s\d+[a-zA-Zа-яА-Я]\.?)/g;
|
||
|
||
// Замена на <span> с жирным текстом
|
||
return text.replace(regex, '<span style="font-weight: bold">$1</span>');
|
||
}
|
||
|
||
export const TextNeftyanka = ({ currentQuestion, answer, stepNumber }: TextSpecialProps) => {
|
||
const { settings } = useQuizStore();
|
||
const { updateAnswer } = useQuizViewStore((state) => state);
|
||
const isHorizontal = true;
|
||
const theme = useTheme();
|
||
const isMobile = useRootContainerSize() < 650;
|
||
|
||
const onInputChange = async ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||
updateAnswer(currentQuestion.id, target.value, 0);
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: isMobile ? "column" : undefined,
|
||
alignItems: isMobile ? "center" : undefined,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
width: "100%",
|
||
marginTop: "20px",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
}}
|
||
>
|
||
{isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
|
||
<Box
|
||
sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}
|
||
onClick={(event) => event.preventDefault()}
|
||
>
|
||
<img
|
||
key={currentQuestion.id}
|
||
src={currentQuestion.content.back}
|
||
style={{ width: "100%", height: "100%", objectFit: "contain" }}
|
||
alt=""
|
||
/>
|
||
</Box>
|
||
)}
|
||
<Typography
|
||
variant="h5"
|
||
color={theme.palette.text.primary}
|
||
sx={{ wordBreak: "break-word" }}
|
||
>
|
||
{highlightQuestions(currentQuestion.title)}
|
||
</Typography>
|
||
{
|
||
<TextField
|
||
autoFocus={true}
|
||
multiline
|
||
maxRows={4}
|
||
placeholder={currentQuestion.content.placeholder}
|
||
value={answer || ""}
|
||
onChange={onInputChange}
|
||
inputProps={{
|
||
maxLength: 400,
|
||
background: settings.cfg.design
|
||
? quizThemes[settings.cfg.theme].isLight
|
||
? "#F2F3F7"
|
||
: "rgba(154,154,175, 0.2)"
|
||
: "transparent",
|
||
}}
|
||
sx={{
|
||
width: "100%",
|
||
"& .MuiOutlinedInput-root": {
|
||
backgroundColor: settings.cfg.design ? "rgba(154,154,175, 0.2)" : "#FFFFFF",
|
||
},
|
||
"&:focus-visible": {
|
||
borderColor: theme.palette.primary.main,
|
||
},
|
||
}}
|
||
/>
|
||
}
|
||
</Box>
|
||
{!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
|
||
<Box
|
||
sx={{ margin: "15px", width: "40vw" }}
|
||
onClick={(event) => event.preventDefault()}
|
||
>
|
||
<img
|
||
key={currentQuestion.id}
|
||
src={currentQuestion.content.back}
|
||
style={{ width: "100%", height: "100%", objectFit: "contain" }}
|
||
alt=""
|
||
/>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
);
|
||
};
|