71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
|
import { updateQuestion } from "@root/questions/actions";
|
|
import CustomTextField from "@ui_kit/CustomTextField";
|
|
|
|
import { useState } from "react";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
|
|
import ButtonsOptions from "../ButtonsOptions";
|
|
import SwitchPageOptions from "./switchPageOptions";
|
|
import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay";
|
|
|
|
type Props = {
|
|
disableInput?: boolean;
|
|
question: QuizQuestionPage;
|
|
};
|
|
|
|
export default function PageOptions({ disableInput, question }: Props) {
|
|
const [switchState, setSwitchState] = useState("setting");
|
|
const theme = useTheme();
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(980));
|
|
const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(780));
|
|
|
|
const setText = useDebouncedCallback((value) => {
|
|
updateQuestion(question.id, (question) => {
|
|
if (question.type !== "page") return;
|
|
|
|
question.content.text = value;
|
|
});
|
|
}, 200);
|
|
|
|
const SSHC = (data: string) => {
|
|
setSwitchState(data);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
sx={{
|
|
width: isTablet ? "auto" : "100%",
|
|
maxWidth: isFigmaTablet ? "549px" : "640px",
|
|
display: "flex",
|
|
px: "20px",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: disableInput ? "none" : "",
|
|
mt: isMobile ? "15px" : "0px",
|
|
}}
|
|
>
|
|
<CustomTextField
|
|
placeholder={"Можно добавить текст"}
|
|
text={question.content.text}
|
|
onChange={({ target }) => setText(target.value)}
|
|
/>
|
|
</Box>
|
|
|
|
<MediaSelectionAndDisplay resultData={question} />
|
|
</Box>
|
|
<ButtonsOptions
|
|
switchState={switchState}
|
|
SSHC={SSHC}
|
|
question={question}
|
|
/>
|
|
<SwitchPageOptions switchState={switchState} question={question} />
|
|
</>
|
|
);
|
|
}
|