diff --git a/src/assets/icons/ArrowGear.svg b/src/assets/icons/ArrowGear.svg index 735328ac..53a0ca2a 100644 --- a/src/assets/icons/ArrowGear.svg +++ b/src/assets/icons/ArrowGear.svg @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/src/assets/icons/NameplateLogoFQ.tsx b/src/assets/icons/NameplateLogoFQ.tsx index db350ab5..947a7eae 100644 --- a/src/assets/icons/NameplateLogoFQ.tsx +++ b/src/assets/icons/NameplateLogoFQ.tsx @@ -1,22 +1,57 @@ import { FC, SVGProps } from "react"; export const NameplateLogoFQ: FC> = (props) => ( - + - - - + + + - - - - - + + + + + - + diff --git a/src/constants/number.ts b/src/constants/number.ts index 96cbd5a3..76d47ff8 100644 --- a/src/constants/number.ts +++ b/src/constants/number.ts @@ -10,11 +10,11 @@ export const QUIZ_QUESTION_NUMBER: Omit 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", }, diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx index 6056beab..e8c6569e 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/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("0"); const [maxRange, setMaxRange] = useState("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 && ( - { - updateAnswer( - currentQuestion.content.id, - window.Number(target.value) > max - ? String(max) - : window.Number(target.value) < min - ? String(min) - : target.value - ); - }} + + > + { + 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" }} + /> + )} - {currentQuestion.content.chooseRange && ( { updateMinRangeDebounced(`${target.value}—${maxRange}`); }} - sx={{ - maxWidth: "80px", - "& .MuiInputBase-input": { textAlign: "center" }, - }} + sx={{ maxWidth: "80px", textAlign: "center" }} /> до { updateMaxRangeDebounced(`${minRange}—${target.value}`); }} - sx={{ - maxWidth: "80px", - "& .MuiInputBase-input": { textAlign: "center" }, - }} + sx={{ maxWidth: "80px", textAlign: "center" }} /> )} diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx index bf7ea992..c9023f40 100755 --- a/src/ui_kit/CustomTextField.tsx +++ b/src/ui_kit/CustomTextField.tsx @@ -1,5 +1,11 @@ -import React, { useState } from "react"; -import { Box, FormControl, TextField, Typography, useTheme } from "@mui/material"; +import React, { useEffect, useState } from "react"; +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) => { 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" />