223 lines
10 KiB
TypeScript
223 lines
10 KiB
TypeScript
import { useState } from "react";
|
||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import ButtonsOptions from "../ButtonsOptions";
|
||
import CustomNumberField from "@ui_kit/CustomNumberField";
|
||
import SwitchSlider from "./switchSlider";
|
||
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
|
||
import { updateQuestion } from "@root/questions/actions";
|
||
|
||
|
||
interface Props {
|
||
question: QuizQuestionNumber;
|
||
}
|
||
|
||
export default function SliderOptions({ question }: Props) {
|
||
const theme = useTheme();
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(980));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||
const [switchState, setSwitchState] = useState("setting");
|
||
const [stepError, setStepError] = useState("");
|
||
|
||
const SSHC = (data: string) => {
|
||
setSwitchState(data);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
width: isTablet ? "auto" : "100%",
|
||
maxWidth: "673.8px",
|
||
display: "flex",
|
||
pl: "20px",
|
||
pr: isMobile ? "13px" : "20px",
|
||
pb: isMobile ? "30px" : "20px",
|
||
flexDirection: "column",
|
||
gap: isMobile ? "25px" : "20px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
gap: isMobile ? "10px" : "14px",
|
||
mt: isMobile ? "25px" : "0px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
marginRight: isMobile ? "10px" : "0px",
|
||
}}
|
||
>
|
||
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
|
||
Выбор значения из диапазона
|
||
</Typography>
|
||
<Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
|
||
<CustomNumberField
|
||
sx={{ maxWidth: "310px", width: "100%" }}
|
||
placeholder={"0"}
|
||
min={0}
|
||
max={99}
|
||
value={question.content.range.split("—")[0]}
|
||
onChange={({ target }) => {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.range = `${target.value}—${question.content.range.split("—")[1]}`;
|
||
});
|
||
}}
|
||
onBlur={({ target }) => {
|
||
const start = question.content.start;
|
||
const min = Number(target.value);
|
||
const max = Number(question.content.range.split("—")[1]);
|
||
|
||
if (min >= max) {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${question.content.range.split("—")[1]}`;
|
||
});
|
||
}
|
||
|
||
if (start < min) {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.start = min;
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
<Typography>—</Typography>
|
||
<CustomNumberField
|
||
sx={{ maxWidth: "310px", width: "100%" }}
|
||
placeholder={"100"}
|
||
min={0}
|
||
max={100}
|
||
value={question.content.range.split("—")[1]}
|
||
onChange={({ target }) => {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.range = `${question.content.range.split("—")[0]}—${target.value}`;
|
||
});
|
||
}}
|
||
onBlur={({ target }) => {
|
||
const start = question.content.start;
|
||
const step = question.content.step;
|
||
const min = Number(question.content.range.split("—")[0]);
|
||
const max = Number(target.value);
|
||
const range = max - min;
|
||
|
||
if (max <= min) {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.range = `${min}—${min + 1 >= 100 ? 100 : min + 1}`;
|
||
});
|
||
}
|
||
|
||
if (start > max) {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.start = max;
|
||
});
|
||
}
|
||
|
||
if (step > max) {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.step = min;
|
||
});
|
||
|
||
if (range % step) {
|
||
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
|
||
} else {
|
||
setStepError("");
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
flexDirection: isMobile ? "column-reverse" : "",
|
||
gap: isMobile ? "15px" : "50px",
|
||
}}
|
||
>
|
||
<Box sx={{ width: "100%" }}>
|
||
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
|
||
Начальное значение
|
||
</Typography>
|
||
<CustomNumberField
|
||
sx={{ maxWidth: "310px", width: "100%" }}
|
||
placeholder={"50"}
|
||
min={Number(question.content.range.split("—")[0])}
|
||
max={Number(question.content.range.split("—")[1])}
|
||
value={String(question.content.start)}
|
||
onChange={({ target }) => {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.start = Number(target.value);
|
||
});
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box sx={{ width: "100%" }}>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: "500",
|
||
fontSize: "18px",
|
||
color: "#4D4D4D",
|
||
mb: "10px",
|
||
}}
|
||
>
|
||
Шаг
|
||
</Typography>
|
||
<CustomNumberField
|
||
sx={{ maxWidth: "310px", width: "100%" }}
|
||
min={0}
|
||
max={100}
|
||
placeholder={"1"}
|
||
error={stepError}
|
||
value={String(question.content.step)}
|
||
onChange={({ target }) => {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.step = Number(target.value);
|
||
});
|
||
}}
|
||
onBlur={({ target }) => {
|
||
const min = Number(question.content.range.split("—")[0]);
|
||
const max = Number(question.content.range.split("—")[1]);
|
||
const range = max - min;
|
||
const step = Number(target.value);
|
||
|
||
if (step > max) {
|
||
updateQuestion(question.id, question => {
|
||
if (question.type !== "number") return;
|
||
|
||
question.content.step = max;
|
||
});
|
||
}
|
||
|
||
if (range % step) {
|
||
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
|
||
} else {
|
||
setStepError("");
|
||
}
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
<ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
|
||
<SwitchSlider switchState={switchState} question={question} />
|
||
</>
|
||
);
|
||
}
|