SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: publication Number

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-25 15:02:35 +03:00
parent c38c75af9a
commit 372300ead9
5 changed files with 100 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/icons/ArrowGear.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

55
src/assets/icons/NameplateLogoFQ.tsx
View File

File diff suppressed because one or more lines are too long

4
src/constants/number.ts
View File

@ -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",
},

69
src/pages/ViewPublicationPage/questions/Number.tsx
View File

@ -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
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
);
}}
<Box
sx={{
maxWidth: "80px",
"& .MuiInputBase-input": { textAlign: "center" },
display: "flex",
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={{
maxWidth: "80px",
"& .MuiInputBase-input": { textAlign: "center" },
}}
sx={{ maxWidth: "80px", textAlign: "center" }}
/>
<Typography>до</Typography>
<CustomTextField
@ -159,10 +167,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
updateMaxRangeDebounced(`${minRange}—${target.value}`);
}}
sx={{
maxWidth: "80px",
"& .MuiInputBase-input": { textAlign: "center" },
}}
sx={{ maxWidth: "80px", textAlign: "center" }}
/>
</Box>
)}

20
src/ui_kit/CustomTextField.tsx
View File

@ -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<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"
/>