SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: slider answer logic

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-27 11:28:37 +03:00
parent ee87a5d7a8
commit c8a472ed0b
1 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/Questions/SliderOptions/SliderOptions.tsx
View File

@ -1,11 +1,16 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import { useDebouncedCallback } from "use-debounce";
import CustomNumberField from "@ui_kit/CustomNumberField"; import CustomNumberField from "@ui_kit/CustomNumberField";
import ButtonsOptions from "../ButtonsOptions";
import SwitchSlider from "./switchSlider"; import SwitchSlider from "./switchSlider";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
import { updateQuestion } from "@root/questions/actions"; import { updateQuestion } from "@root/questions/actions";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
interface Props { interface Props {
question: QuizQuestionNumber; question: QuizQuestionNumber;
} }
@ -19,14 +24,31 @@ export default function SliderOptions({ question }: Props) {
const [startError, setStartError] = useState<boolean>(false); const [startError, setStartError] = useState<boolean>(false);
const [minError, setMinError] = useState<boolean>(false); const [minError, setMinError] = useState<boolean>(false);
const [maxError, setMaxError] = useState<boolean>(false); const [maxError, setMaxError] = useState<boolean>(false);
const startValueDebounce = useDebouncedCallback((value) => {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.start = value;
});
}, 2000);
useEffect(() => { useEffect(() => {
const min = Number(question.content.range.split("—")[0]); const min = Number(question.content.range.split("—")[0]);
const max = Number(question.content.range.split("—")[1]); const max = Number(question.content.range.split("—")[1]);
const start = Number(question.content.start); const start = Number(question.content.start);
if (start < min || start > max) { if (start < min) {
setStartError(true); setStartError(true);
startValueDebounce(min);
return;
}
if (start > max && min < max) {
setStartError(true);
startValueDebounce(max);
return;
} }
if (start >= min && start <= max) { if (start >= min && start <= max) {
@ -211,7 +233,11 @@ export default function SliderOptions({ question }: Props) {
placeholder={"1"} placeholder={"1"}
error={stepError} error={stepError}
value={String(question.content.step)} value={String(question.content.step)}
onChange={({ target }) => { onChange={({ target, type }) => {
if (type === "blur") {
return;
}
updateQuestion(question.id, (question) => { updateQuestion(question.id, (question) => {
if (question.type !== "number") return; if (question.type !== "number") return;