feat: CustomNumberField

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
 import React from "react";
-import CustomTextField from "@ui_kit/CustomTextField";
+import CustomNumberField from "@ui_kit/CustomNumberField";
 import SwitchSlider from "./switchSlider";
 import { questionStore, updateQuestionsList } from "@root/questions";
 
@@ -34,7 +34,7 @@ export default function SliderOptions({ totalIndex }: Props) {
         <Box sx={{ gap: "10px", display: "flex", flexDirection: "column" }}>
           <Typography>Выбор значения из диапазона</Typography>
           <Box sx={{ display: "flex", alignItems: "center", gap: "20px" }}>
-            <CustomTextField
+            <CustomNumberField
               placeholder={"0"}
               text={
                 listQuestions[quizId][totalIndex].content.range.split("—")[0]
@@ -50,7 +50,7 @@ export default function SliderOptions({ totalIndex }: Props) {
               }}
             />
             <Typography>—</Typography>
-            <CustomTextField
+            <CustomNumberField
               placeholder={"100"}
               text={
                 listQuestions[quizId][totalIndex].content.range.split("—")[1]
@@ -72,11 +72,12 @@ export default function SliderOptions({ totalIndex }: Props) {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
+            gap: "50px",
           }}
         >
-          <Box>
+          <Box sx={{ width: "100%" }}>
             <Typography>Начальное значение</Typography>
-            <CustomTextField
+            <CustomNumberField
               placeholder={"50"}
               text={String(listQuestions[quizId][totalIndex].content.start)}
               onChange={({ target }) => {
@@ -88,9 +89,9 @@ export default function SliderOptions({ totalIndex }: Props) {
               }}
             />
           </Box>
-          <Box>
+          <Box sx={{ width: "100%" }}>
             <Typography>Шаг</Typography>
-            <CustomTextField
+            <CustomNumberField
               placeholder={"1"}
               text={String(listQuestions[quizId][totalIndex].content.step)}
               onChange={({ target }) => {

src/stores/questions.ts

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

src/ui_kit/CustomNumberField.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import CustomTextField from "./CustomTextField";
+
+import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
+import type { SxProps, Theme } from "@mui/material";
+
+interface CustomNumberFieldProps {
+  placeholder: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  text?: string;
+  sx?: SxProps<Theme>;
+  min?: number;
+  max?: number;
+}
+
+export default function CustomNumberField({
+  placeholder,
+  text,
+  sx,
+  onChange,
+  onKeyDown,
+  onBlur,
+  min = -999999999,
+  max = 999999999,
+}: CustomNumberFieldProps) {
+  const [value, setValue] = useState<string>("");
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+
+    if (
+      Number(inputValue) >= min &&
+      Number(inputValue) <= max &&
+      (inputValue === "" ||
+        inputValue.match(/^\d*$/) ||
+        (inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/)))
+    ) {
+      setValue(inputValue);
+
+      onChange?.({ ...event, target: { ...event.target, value: inputValue } });
+    }
+  };
+
+  return (
+    <CustomTextField
+      placeholder={placeholder}
+      text={text}
+      sx={sx}
+      onChange={onInputChange}
+      onKeyDown={onKeyDown}
+      onBlur={onBlur}
+      value={value}
+    />
+  );
+}

src/ui_kit/CustomTextField.tsx

@@ -10,6 +10,7 @@ import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
 
 interface CustomTextFieldProps {
   placeholder: string;
+  value?: string;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -19,6 +20,7 @@ interface CustomTextFieldProps {
 
 export default function CustomTextField({
   placeholder,
+  value,
   text,
   sx,
   onChange,
@@ -32,6 +34,7 @@ export default function CustomTextField({
       <TextField
         defaultValue={text}
         fullWidth
+        value={value}
         placeholder={placeholder}
         onChange={onChange}
         onKeyDown={onKeyDown}