diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index bcc23b7d..a449d69c 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import CustomNumberField from "@ui_kit/CustomNumberField"; @@ -16,6 +16,22 @@ export default function SliderOptions({ question }: Props) { const isMobile = useMediaQuery(theme.breakpoints.down(790)); const [switchState, setSwitchState] = useState("setting"); const [stepError, setStepError] = useState(""); + const [startError, setStartError] = useState(false); + + useEffect(() => { + const min = Number(question.content.range.split("—")[0]); + const max = Number(question.content.range.split("—")[1]); + const start = Number(question.content.start); + console.log(min, max, start); + + if (start < min || start > max) { + setStartError(true); + } + + if (start >= min && start <= max) { + setStartError(false); + } + }, [question.content.range, question.content.start]); const SSHC = (data: string) => { setSwitchState(data); @@ -44,10 +60,19 @@ export default function SliderOptions({ question }: Props) { marginRight: isMobile ? "10px" : "0px", }} > - + Выбор значения из диапазона - + { if (question.type !== "number") return; - question.content.range = `${target.value}—${question.content.range.split("—")[1]}`; + 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]); @@ -70,15 +96,9 @@ export default function SliderOptions({ question }: Props) { 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; + question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${ + question.content.range.split("—")[1] + }`; }); } }} @@ -94,11 +114,12 @@ export default function SliderOptions({ question }: Props) { updateQuestion(question.id, (question) => { if (question.type !== "number") return; - question.content.range = `${question.content.range.split("—")[0]}—${target.value}`; + 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); @@ -108,15 +129,9 @@ export default function SliderOptions({ question }: Props) { 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; + question.content.range = `${min}—${ + min + 1 >= 100 ? 100 : min + 1 + }`; }); } @@ -128,7 +143,11 @@ export default function SliderOptions({ question }: Props) { }); if (range % step) { - setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`); + setStepError( + `Шаг должен делить без остатка диапазон ${max} - ${min} = ${ + max - min + }` + ); } else { setStepError(""); } @@ -147,7 +166,14 @@ export default function SliderOptions({ question }: Props) { }} > - + Начальное значение { updateQuestion(question.id, (question) => { if (question.type !== "number") return; @@ -205,7 +232,11 @@ export default function SliderOptions({ question }: Props) { } if (range % step) { - setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`); + setStepError( + `Шаг должен делить без остатка диапазон ${max} - ${min} = ${ + max - min + }` + ); } else { setStepError(""); } @@ -214,7 +245,11 @@ export default function SliderOptions({ question }: Props) { - + ); diff --git a/src/ui_kit/CustomNumberField.tsx b/src/ui_kit/CustomNumberField.tsx index 8797d74f..9a443fc7 100644 --- a/src/ui_kit/CustomNumberField.tsx +++ b/src/ui_kit/CustomNumberField.tsx @@ -9,6 +9,7 @@ interface CustomNumberFieldProps { onKeyDown?: (event: KeyboardEvent) => void; onBlur?: (event: FocusEvent) => void; error?: string; + emptyError?: boolean; value: string; sx?: SxProps; min?: number; @@ -20,6 +21,7 @@ export default function CustomNumberField({ value, sx, error, + emptyError, onChange, onKeyDown, onBlur, @@ -34,32 +36,20 @@ export default function CustomNumberField({ inputValue.match(/^\d*$/) || (inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/)) ) { + console.log("inputValue", inputValue); onChange?.({ ...event, target: { ...event.target, value: inputValue } }); } }; - const onInputBlur = (event: FocusEvent) => { - const inputValue = event.target.value; - - if (Number(inputValue) < min) { - onChange?.({ ...event, target: { ...event.target, value: String(min) } }); - } - - if (Number(inputValue) > max) { - onChange?.({ ...event, target: { ...event.target, value: String(max) } }); - } - - onBlur?.(event); - }; - return ( ); diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx index 34dc98b8..8ce1f705 100755 --- a/src/ui_kit/CustomTextField.tsx +++ b/src/ui_kit/CustomTextField.tsx @@ -7,6 +7,7 @@ interface CustomTextFieldProps { placeholder: string; value?: string; error?: string; + emptyError?: boolean; onChange?: (event: ChangeEvent) => void; onKeyDown?: (event: KeyboardEvent) => void; onBlur?: (event: FocusEvent) => void; @@ -25,6 +26,7 @@ export default function CustomTextField({ text, sx, error, + emptyError, InputProps, maxLength = 200, }: CustomTextFieldProps) { @@ -62,7 +64,7 @@ export default function CustomTextField({ value={inputValue} placeholder={placeholder} onChange={handleInputChange} - error={!!error} + error={!!error || emptyError} label={error} onFocus={handleInputFocus} onBlur={handleInputBlur}