feat: SliderOptions logic

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -36,7 +36,9 @@ export default function SliderOptions({ totalIndex }: Props) {
           <Box sx={{ display: "flex", alignItems: "center", gap: "20px" }}>
             <CustomNumberField
               placeholder={"0"}
-              text={
+              min={0}
+              max={99}
+              value={
                 listQuestions[quizId][totalIndex].content.range.split("—")[0]
               }
               onChange={({ target }) => {
@@ -48,11 +50,31 @@ export default function SliderOptions({ totalIndex }: Props) {
                   content: clonContent,
                 });
               }}
+              onBlur={({ target }) => {
+                const min = Number(target.value);
+                const max = Number(
+                  listQuestions[quizId][totalIndex].content.range.split("—")[1]
+                );
+
+                if (min >= max) {
+                  const clonContent = listQuestions[quizId][totalIndex].content;
+                  clonContent.range = `${max - 1 >= 0 ? max - 1 : 0}—${
+                    listQuestions[quizId][totalIndex].content.range.split(
+                      "—"
+                    )[1]
+                  }`;
+                  updateQuestionsList(quizId, totalIndex, {
+                    content: clonContent,
+                  });
+                }
+              }}
             />
             <Typography>—</Typography>
             <CustomNumberField
               placeholder={"100"}
-              text={
+              min={0}
+              max={100}
+              value={
                 listQuestions[quizId][totalIndex].content.range.split("—")[1]
               }
               onChange={({ target }) => {
@@ -64,6 +86,24 @@ export default function SliderOptions({ totalIndex }: Props) {
                   content: clonContent,
                 });
               }}
+              onBlur={({ target }) => {
+                const min = Number(
+                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
+                );
+                const max = Number(target.value);
+
+                if (max <= min) {
+                  const clonContent = listQuestions[quizId][totalIndex].content;
+                  clonContent.range = `${
+                    listQuestions[quizId][totalIndex].content.range.split(
+                      "—"
+                    )[0]
+                  }—${min + 1 >= 100 ? 100 : min + 1}`;
+                  updateQuestionsList(quizId, totalIndex, {
+                    content: clonContent,
+                  });
+                }
+              }}
             />
           </Box>
         </Box>
@@ -79,7 +119,8 @@ export default function SliderOptions({ totalIndex }: Props) {
             <Typography>Начальное значение</Typography>
             <CustomNumberField
               placeholder={"50"}
-              text={String(listQuestions[quizId][totalIndex].content.start)}
+              min={0}
+              value={String(listQuestions[quizId][totalIndex].content.start)}
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
                 clonContent.start = Number(target.value);
@@ -87,13 +128,30 @@ 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,
+                    },
+                  });
+                }
+              }}
             />
           </Box>
           <Box sx={{ width: "100%" }}>
             <Typography>Шаг</Typography>
             <CustomNumberField
+              min={0}
+              max={100}
               placeholder={"1"}
-              text={String(listQuestions[quizId][totalIndex].content.step)}
+              value={String(listQuestions[quizId][totalIndex].content.step)}
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
                 clonContent.step = Number(target.value);
@@ -101,6 +159,25 @@ export default function SliderOptions({ totalIndex }: Props) {
                   content: clonContent,
                 });
               }}
+              onBlur={({ target }) => {
+                const min = Number(
+                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
+                );
+                const max = Number(
+                  listQuestions[quizId][totalIndex].content.range.split("—")[1]
+                );
+                const range = max - min;
+                const step = Number(target.value);
+
+                if (step > range) {
+                  updateQuestionsList(quizId, totalIndex, {
+                    content: {
+                      ...listQuestions[quizId][totalIndex].content,
+                      step: range,
+                    },
+                  });
+                }
+              }}
             />
           </Box>
         </Box>

src/stores/questions.ts

@@ -30,7 +30,6 @@ export interface Question {
   required: boolean;
   deleted: true;
   page: number;
-  completed: boolean;
   content: {
     variants: Variants[];
     hint: Hint;
@@ -141,7 +140,6 @@ export const createQuestion = (quizId: number) => {
     required: true,
     deleted: true,
     page: 0,
-    completed: false,
     content: {
       largeCheck: false,
       large: "",

src/ui_kit/CustomNumberField.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import CustomTextField from "./CustomTextField";
 
 import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
@@ -9,7 +8,7 @@ interface CustomNumberFieldProps {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-  text?: string;
+  value: string;
   sx?: SxProps<Theme>;
   min?: number;
   max?: number;
@@ -17,7 +16,7 @@ interface CustomNumberFieldProps {
 
 export default function CustomNumberField({
   placeholder,
-  text,
+  value,
   sx,
   onChange,
   onKeyDown,
@@ -25,8 +24,6 @@ export default function CustomNumberField({
   min = -999999999,
   max = 999999999,
 }: CustomNumberFieldProps) {
-  const [value, setValue] = useState<string>("");
-
   const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value;
 
@@ -37,8 +34,6 @@ export default function CustomNumberField({
         inputValue.match(/^\d*$/) ||
         (inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/)))
     ) {
-      setValue(inputValue);
-
       onChange?.({ ...event, target: { ...event.target, value: inputValue } });
     }
   };
@@ -46,7 +41,6 @@ export default function CustomNumberField({
   return (
     <CustomTextField
       placeholder={placeholder}
-      text={text}
       sx={sx}
       onChange={onInputChange}
       onKeyDown={onKeyDown}