153 lines
4.2 KiB
TypeScript
153 lines
4.2 KiB
TypeScript
import {
|
|
Box,
|
|
TextField as MuiTextField,
|
|
TextFieldProps,
|
|
Typography,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
|
|
import { Answer, useQuizViewStore } from "@stores/quizView";
|
|
import { useQuizData } from "@contexts/QuizDataContext";
|
|
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";
|
|
|
|
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
|
|
|
const ORIENTATION = [
|
|
{ horizontal: true },
|
|
{ horizontal: false },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: false },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: false },
|
|
{ horizontal: true },
|
|
{ horizontal: false },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: false },
|
|
{ horizontal: false },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
{ horizontal: true },
|
|
];
|
|
|
|
interface TextSpecialProps {
|
|
currentQuestion: QuizQuestionText;
|
|
answer?: Answer;
|
|
inputHC: (text: string) => void;
|
|
stepNumber?: number | null;
|
|
}
|
|
|
|
export const TextSpecial = ({
|
|
currentQuestion,
|
|
answer,
|
|
inputHC,
|
|
stepNumber,
|
|
}: TextSpecialProps) => {
|
|
const { settings } = useQuizData();
|
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
|
const isHorizontal = ORIENTATION[Number(stepNumber) - 1].horizontal;
|
|
const theme = useTheme();
|
|
const isMobile = useRootContainerSize() < 650;
|
|
|
|
const onInputChange = async ({ target }: ChangeEvent<HTMLInputElement>) => {
|
|
updateAnswer(currentQuestion.id, target.value, 0);
|
|
inputHC(target.value);
|
|
};
|
|
|
|
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",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h5"
|
|
color={theme.palette.text.primary}
|
|
sx={{ wordBreak: "break-word" }}
|
|
>
|
|
{currentQuestion.title}
|
|
</Typography>
|
|
{isHorizontal &&
|
|
currentQuestion.content.back &&
|
|
currentQuestion.content.back !== " " && (
|
|
<Box sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}>
|
|
<img
|
|
key={currentQuestion.id}
|
|
src={currentQuestion.content.back}
|
|
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
alt=""
|
|
/>
|
|
</Box>
|
|
)}
|
|
{
|
|
<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" }}>
|
|
<img
|
|
key={currentQuestion.id}
|
|
src={currentQuestion.content.back}
|
|
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
alt=""
|
|
/>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|