fix: publication Number

src/constants/number.ts

@@ -10,11 +10,11 @@ export const QUIZ_QUESTION_NUMBER: Omit<QuizQuestionNumber, "id" | "backendId">
     required: false,
     innerNameCheck: false,
     innerName: "",
-    range: "1—100",
+    range: "0—100",
     defaultValue: 0,
     step: 1,
     steps: 5,
-    start: 50,
+    start: 0,
     chooseRange: false,
     form: "star",
   },

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Box, Typography, Slider, useTheme } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useDebouncedCallback } from "use-debounce";
 
 import CustomTextField from "@ui_kit/CustomTextField";
@@ -16,7 +16,6 @@ type NumberProps = {
 export const Number = ({ currentQuestion }: NumberProps) => {
   const [minRange, setMinRange] = useState<string>("0");
   const [maxRange, setMaxRange] = useState<string>("100000000000");
-  const theme = useTheme();
   const { answers } = useQuizViewStore();
   const updateMinRangeDebounced = useDebouncedCallback(
     (value, crowded = false) => {
@@ -26,7 +25,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
 
       updateAnswer(currentQuestion.content.id, value);
     },
-    1000
+    3000
   );
   const updateMaxRangeDebounced = useDebouncedCallback(
     (value, crowded = false) => {
@@ -36,7 +35,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
 
       updateAnswer(currentQuestion.content.id, value);
     },
-    1000
+    3000
   );
   const answer = answers.find(
     ({ questionId }) => questionId === currentQuestion.content.id
@@ -44,7 +43,14 @@ export const Number = ({ currentQuestion }: NumberProps) => {
 
   const min = window.Number(currentQuestion.content.range.split("—")[0]);
   const max = window.Number(currentQuestion.content.range.split("—")[1]);
-  const sliderValue = answer || currentQuestion.content.start + "—" + max;
+  const step = currentQuestion.content.step;
+  const sliderValue =
+    answer ||
+    (currentQuestion.content.start < min || currentQuestion.content.start > max
+      ? min
+      : currentQuestion.content.start) +
+      "—" +
+      max;
 
   useEffect(() => {
     if (answer) {
@@ -53,7 +59,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
     }
 
     if (!answer) {
-      setMinRange(String(currentQuestion.content.start));
+      setMinRange(sliderValue.split("—")[0]);
       setMaxRange(String(max));
     }
   }, []);
@@ -80,7 +86,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           }
           min={min}
           max={max}
-          step={currentQuestion.content.step || 1}
+          step={(max - min) % step ? 1 : step}
           onChange={(_, value) => {
             const range = String(value).replace(",", "—");
             updateAnswer(currentQuestion.content.id, range);
@@ -96,26 +102,31 @@ export const Number = ({ currentQuestion }: NumberProps) => {
         />
 
         {!currentQuestion.content.chooseRange && (
-          <CustomTextField
+          <Box
-            placeholder="0"
-            value={answer}
-            onChange={({ target }) => {
-              updateAnswer(
-                currentQuestion.content.id,
-                window.Number(target.value) > max
-                  ? String(max)
-                  : window.Number(target.value) < min
-                  ? String(min)
-                  : target.value
-              );
-            }}
             sx={{
-              maxWidth: "80px",
+              display: "flex",
-              "& .MuiInputBase-input": { textAlign: "center" },
+              gap: "15px",
+              alignItems: "center",
+              "& .MuiFormControl-root": { width: "auto" },
             }}
-          />
+          >
+            <CustomTextField
+              placeholder="0"
+              value={answer}
+              onChange={({ target }) => {
+                updateAnswer(
+                  currentQuestion.content.id,
+                  window.Number(target.value) > max
+                    ? String(max)
+                    : window.Number(target.value) < min
+                    ? String(min)
+                    : target.value
+                );
+              }}
+              sx={{ maxWidth: "80px", textAlign: "center" }}
+            />
+          </Box>
         )}
-
         {currentQuestion.content.chooseRange && (
           <Box
             sx={{
@@ -139,10 +150,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
 
                 updateMinRangeDebounced(`${target.value}—${maxRange}`);
               }}
-              sx={{
+              sx={{ maxWidth: "80px", textAlign: "center" }}
-                maxWidth: "80px",
-                "& .MuiInputBase-input": { textAlign: "center" },
-              }}
             />
             <Typography>до</Typography>
             <CustomTextField
@@ -159,10 +167,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
 
                 updateMaxRangeDebounced(`${minRange}—${target.value}`);
               }}
-              sx={{
+              sx={{ maxWidth: "80px", textAlign: "center" }}
-                maxWidth: "80px",
-                "& .MuiInputBase-input": { textAlign: "center" },
-              }}
             />
           </Box>
         )}

src/ui_kit/CustomTextField.tsx

@@ -1,5 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { Box, FormControl, TextField, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
 import type { InputProps, SxProps, Theme } from "@mui/material";
 
@@ -19,7 +25,7 @@ interface CustomTextFieldProps {
 
 export default function CustomTextField({
   placeholder,
-  value,
+  value = "",
   onChange,
   onKeyDown,
   onBlur,
@@ -32,9 +38,13 @@ export default function CustomTextField({
 }: CustomTextFieldProps) {
   const theme = useTheme();
 
-  const [inputValue, setInputValue] = useState(value || text || "");
+  const [inputValue, setInputValue] = useState("");
   const [isInputActive, setIsInputActive] = useState(false);
 
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value;
     setInputValue(inputValue);
@@ -88,8 +98,8 @@ export default function CustomTextField({
             fontSize: "18px",
             lineHeight: "21px",
             py: 0,
+            ...sx,
           },
-          ...sx,
         }}
         data-cy="textfield"
       />