diff --git a/src/pages/Questions/SliderOptions/settingSlider.tsx b/src/pages/Questions/SliderOptions/settingSlider.tsx index d39434c1..c6aef2d1 100644 --- a/src/pages/Questions/SliderOptions/settingSlider.tsx +++ b/src/pages/Questions/SliderOptions/settingSlider.tsx @@ -49,7 +49,7 @@ export default function SettingSlider({ question }: SettingSliderProps) { height: isMobile ? "100%" : "auto", alignItems: isMobile ? "flex-start" : "center", }} - label={"Выбор диапозона (два ползунка)"} + label={"Выбор диапазона (два ползунка)"} checked={question.content.chooseRange} handleChange={({ target }) => { updateQuestion(question.id, question => { diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx index 073b1102..4ac33613 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/src/pages/ViewPublicationPage/questions/Number.tsx @@ -1,5 +1,6 @@ -import { useEffect } from "react"; +import { useState, useEffect } from "react"; import { Box, Typography, Slider, useTheme } from "@mui/material"; +import { useDebouncedCallback } from "use-debounce"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -12,8 +13,30 @@ type NumberProps = { }; export const Number = ({ currentQuestion }: NumberProps) => { + const [minRange, setMinRange] = useState("0"); + const [maxRange, setMaxRange] = useState("100"); const theme = useTheme(); const { answers } = useQuizViewStore(); + const updateMinRangeDebounced = useDebouncedCallback( + (value, crowded = false) => { + if (crowded) { + setMinRange(maxRange); + } + + updateAnswer(currentQuestion.content.id, value); + }, + 1000 + ); + const updateMaxRangeDebounced = useDebouncedCallback( + (value, crowded = false) => { + if (crowded) { + setMaxRange(minRange); + } + + updateAnswer(currentQuestion.content.id, value); + }, + 1000 + ); const { answer } = answers.find( ({ questionId }) => questionId === currentQuestion.content.id @@ -23,6 +46,11 @@ export const Number = ({ currentQuestion }: NumberProps) => { const max = window.Number(currentQuestion.content.range.split("—")[1]); useEffect(() => { + console.log("ans", currentQuestion.content.start); + if (answer) { + setMinRange(answer.split("—")[0]); + setMaxRange(answer.split("—")[1]); + } if (!answer) { updateAnswer( currentQuestion.content.id, @@ -31,8 +59,11 @@ export const Number = ({ currentQuestion }: NumberProps) => { : String(currentQuestion.content.start), false ); + + setMinRange(String(currentQuestion.content.start)); + setMaxRange(String(max)); } - }, [answer]); + }, []); return ( @@ -48,11 +79,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { {!currentQuestion.content.chooseRange && ( { updateAnswer( currentQuestion.content.id, @@ -79,21 +106,17 @@ export const Number = ({ currentQuestion }: NumberProps) => { > { - updateAnswer( - currentQuestion.content.id, - window.Number(target.value) > - window.Number(answer?.split("—")[1]) - ? `${answer?.split("—")[1]}—${answer?.split("—")[1]}` - : window.Number(target.value) < min - ? `${min}—${answer?.split("—")[1]}` - : `${target.value}—${answer?.split("—")[1]}` - ); + setMinRange(target.value); + + if (window.Number(target.value) >= window.Number(maxRange)) { + updateMinRangeDebounced(`${maxRange}—${maxRange}`, true); + + return; + } + + updateMinRangeDebounced(`${target.value}—${maxRange}`); }} sx={{ maxWidth: "80px", @@ -102,17 +125,17 @@ export const Number = ({ currentQuestion }: NumberProps) => { /> { - updateAnswer( - currentQuestion.content.id, - window.Number(target.value) > max - ? `${answer?.split("—")[0]}—${max}` - : window.Number(target.value) < - window.Number(answer?.split("—")[0]) - ? `${answer?.split("—")[0]}—${answer?.split("—")[0]}` - : `${answer?.split("—")[0]}—${target.value}` - ); + setMaxRange(target.value); + + if (window.Number(target.value) <= window.Number(minRange)) { + updateMaxRangeDebounced(`${minRange}—${minRange}`, true); + + return; + } + + updateMaxRangeDebounced(`${minRange}—${target.value}`); }} sx={{ maxWidth: "80px", @@ -138,10 +161,16 @@ export const Number = ({ currentQuestion }: NumberProps) => { marginTop: "25px", }} onChange={(_, value) => { - updateAnswer( - currentQuestion.content.id, - String(value).replace(",", "—") - ); + const range = String(value).replace(",", "—"); + updateAnswer(currentQuestion.content.id, range); + }} + onChangeCommitted={(_, value) => { + if (currentQuestion.content.chooseRange) { + const range = value as number[]; + + setMinRange(String(range[0])); + setMaxRange(String(range[1])); + } }} />