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

feat: Slider TextFields logic

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-06 17:23:48 +03:00
parent 82d43a3bea
commit c86e5344ab
1 changed files with 94 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,16 +14,24 @@ type NumberProps = {
export const Number = ({ currentQuestion }: NumberProps) => {
const theme = useTheme();
const { answers } = useQuizViewStore();
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.content.id
) ?? {};
const min = window.Number(currentQuestion.content.range.split("—")[0]);
const max = window.Number(currentQuestion.content.range.split("—")[1]);
useEffect(() => {
if (!answer) {
updateAnswer(currentQuestion.content.id, "1");
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.chooseRange
? `${currentQuestion.content.start},${max}`
: String(currentQuestion.content.start)
);
}
}, []);
}, [answer]);
return (
<Box>
@ -36,26 +44,90 @@ export const Number = ({ currentQuestion }: NumberProps) => {
marginTop: "20px",
}}
>
<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",
"& .MuiInputBase-input": { textAlign: "center" },
}}
/>
{!currentQuestion.content.chooseRange && (
<CustomTextField
placeholder="0"
value={
currentQuestion.content.chooseRange
? answer?.split(",")[0]
: 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",
"& .MuiInputBase-input": { textAlign: "center" },
}}
/>
)}
{currentQuestion.content.chooseRange && (
<Box
sx={{
display: "flex",
gap: "15px",
"& .MuiFormControl-root": { width: "auto" },
}}
>
<CustomTextField
placeholder="0"
value={
currentQuestion.content.chooseRange
? answer?.split(",")[0]
: answer
}
onChange={({ target }) => {
updateAnswer(
currentQuestion.content.id,
window.Number(target.value) >
window.Number(answer?.split(",")[1])
? `${answer?.split(",")[1]},${answer?.split(",")[1]}`
: window.Number(target.value) < min
? `${min},${answer?.split(",")[1]}`
: `${target.value},${answer?.split(",")[1]}`
);
}}
sx={{
maxWidth: "80px",
"& .MuiInputBase-input": { textAlign: "center" },
}}
/>
<CustomTextField
placeholder="0"
value={answer?.split(",")[1]}
onChange={({ target }) => {
updateAnswer(
currentQuestion.content.id,
window.Number(target.value) > max
? `${answer?.split(",")[0]},${max}`
: window.Number(target.value) <
window.Number(answer?.split(",")[0])
? `${answer?.split(",")[0]},${answer?.split(",")[0]}`
: `${answer?.split(",")[0]},${target.value}`
);
}}
sx={{
maxWidth: "80px",
"& .MuiInputBase-input": { textAlign: "center" },
}}
/>
</Box>
)}
<Slider
value={window.Number(answer || 1)}
value={
currentQuestion.content.chooseRange
? answer?.split(",").length || 0 > 1
? answer?.split(",").map((item) => window.Number(item))
: [min, min + 1]
: window.Number(answer || 1)
}
min={min}
max={max}
step={currentQuestion.content.step || 1}