diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index f0929191..838ec199 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -52,6 +52,7 @@ export default function SliderOptions({ totalIndex }: Props) { }); }} onBlur={({ target }) => { + const start = listQuestions[quizId][totalIndex].content.start; const min = Number(target.value); const max = Number( listQuestions[quizId][totalIndex].content.range.split("—")[1] @@ -68,6 +69,15 @@ export default function SliderOptions({ totalIndex }: Props) { content: clonContent, }); } + + if (start < min) { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + start: min, + }, + }); + } }} /> @@ -88,10 +98,13 @@ export default function SliderOptions({ totalIndex }: Props) { }); }} onBlur={({ target }) => { + const start = listQuestions[quizId][totalIndex].content.start; + const step = listQuestions[quizId][totalIndex].content.step; const min = Number( listQuestions[quizId][totalIndex].content.range.split("—")[0] ); const max = Number(target.value); + const range = max - min; if (max <= min) { const clonContent = listQuestions[quizId][totalIndex].content; @@ -104,6 +117,34 @@ export default function SliderOptions({ totalIndex }: Props) { content: clonContent, }); } + + if (start > max) { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + start: max, + }, + }); + } + + if (step > max) { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + step: max, + }, + }); + + if (range % step) { + setStepError( + `Шаг должен делить без остатка диапазон ${max} - ${min} = ${ + max - min + }` + ); + } else { + setStepError(""); + } + } }} /> @@ -120,7 +161,12 @@ export default function SliderOptions({ totalIndex }: Props) { Начальное значение { const clonContent = listQuestions[quizId][totalIndex].content; @@ -129,21 +175,6 @@ export default function SliderOptions({ totalIndex }: Props) { content: clonContent, }); }} - onBlur={({ target }) => { - const start = Number(target.value); - const min = Number( - listQuestions[quizId][totalIndex].content.range.split("—")[0] - ); - - if (start < min) { - updateQuestionsList(quizId, totalIndex, { - content: { - ...listQuestions[quizId][totalIndex].content, - start: min, - }, - }); - } - }} /> diff --git a/src/ui_kit/CustomNumberField.tsx b/src/ui_kit/CustomNumberField.tsx index 37fab7c2..8797d74f 100644 --- a/src/ui_kit/CustomNumberField.tsx +++ b/src/ui_kit/CustomNumberField.tsx @@ -30,16 +30,28 @@ export default function CustomNumberField({ const inputValue = event.target.value; if ( - Number(inputValue) >= min && - Number(inputValue) <= max && - (inputValue === "" || - inputValue.match(/^\d*$/) || - (inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/))) + inputValue === "" || + inputValue.match(/^\d*$/) || + (inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/)) ) { 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 ( );