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) => { export const Number = ({ currentQuestion }: NumberProps) => {
const theme = useTheme(); const theme = useTheme();
const { answers } = useQuizViewStore(); 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 min = window.Number(currentQuestion.content.range.split("—")[0]);
const max = window.Number(currentQuestion.content.range.split("—")[1]); const max = window.Number(currentQuestion.content.range.split("—")[1]);
useEffect(() => { useEffect(() => {
if (!answer) { if (!answer) {
updateAnswer(currentQuestion.content.id, "1"); updateAnswer(
currentQuestion.content.id,
currentQuestion.content.chooseRange
? `${currentQuestion.content.start},${max}`
: String(currentQuestion.content.start)
);
} }
}, []); }, [answer]);
return ( return (
<Box> <Box>
@ -36,26 +44,90 @@ export const Number = ({ currentQuestion }: NumberProps) => {
marginTop: "20px", marginTop: "20px",
}} }}
> >
<CustomTextField {!currentQuestion.content.chooseRange && (
placeholder="0" <CustomTextField
value={answer || ""} placeholder="0"
onChange={({ target }) => { value={
updateAnswer( currentQuestion.content.chooseRange
currentQuestion.content.id, ? answer?.split(",")[0]
window.Number(target.value) > max : answer
? String(max) }
: window.Number(target.value) < min onChange={({ target }) => {
? String(min) updateAnswer(
: target.value currentQuestion.content.id,
); window.Number(target.value) > max
}} ? String(max)
sx={{ : window.Number(target.value) < min
maxWidth: "80px", ? String(min)
"& .MuiInputBase-input": { textAlign: "center" }, : 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 <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} min={min}
max={max} max={max}
step={currentQuestion.content.step || 1} step={currentQuestion.content.step || 1}