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

feat: SliderOptions logic

Browse Source
This commit is contained in:
IlyaDoronin 2023-09-12 18:23:56 +03:00
parent a4bc0f5c76
commit e9313dc1e6
3 changed files with 83 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/pages/Questions/SliderOptions/SliderOptions.tsx
View File

@ -36,7 +36,9 @@ export default function SliderOptions({ totalIndex }: Props) {
<Box sx={{ display: "flex", alignItems: "center", gap: "20px" }}>
<CustomNumberField
placeholder={"0"}
text={
min={0}
max={99}
value={
listQuestions[quizId][totalIndex].content.range.split("—")[0]
}
onChange={({ target }) => {
@ -48,11 +50,31 @@ export default function SliderOptions({ totalIndex }: Props) {
content: clonContent,
});
}}
onBlur={({ target }) => {
const min = Number(target.value);
const max = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[1]
);
if (min >= max) {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${max - 1 >= 0 ? max - 1 : 0}—${
listQuestions[quizId][totalIndex].content.range.split(
"—"
)[1]
}`;
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}
}}
/>
<Typography>—</Typography>
<CustomNumberField
placeholder={"100"}
text={
min={0}
max={100}
value={
listQuestions[quizId][totalIndex].content.range.split("—")[1]
}
onChange={({ target }) => {
@ -64,6 +86,24 @@ export default function SliderOptions({ totalIndex }: Props) {
content: clonContent,
});
}}
onBlur={({ target }) => {
const min = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[0]
);
const max = Number(target.value);
if (max <= min) {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${
listQuestions[quizId][totalIndex].content.range.split(
"—"
)[0]
}—${min + 1 >= 100 ? 100 : min + 1}`;
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}
}}
/>
</Box>
</Box>
@ -79,7 +119,8 @@ export default function SliderOptions({ totalIndex }: Props) {
<Typography>Начальное значение</Typography>
<CustomNumberField
placeholder={"50"}
text={String(listQuestions[quizId][totalIndex].content.start)}
min={0}
value={String(listQuestions[quizId][totalIndex].content.start)}
onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.start = Number(target.value);
@ -87,13 +128,30 @@ export default function SliderOptions({ totalIndex }: Props) {
content: clonContent,
});
}}
onBlur={({ target }) => {
const start = Number(target.value);
const min = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[0]
);
if (start < min) {
updateQuestionsList(quizId, totalIndex, {
content: {
...listQuestions[quizId][totalIndex].content,
start: min,
},
});
}
}}
/>
</Box>
<Box sx={{ width: "100%" }}>
<Typography>Шаг</Typography>
<CustomNumberField
min={0}
max={100}
placeholder={"1"}
text={String(listQuestions[quizId][totalIndex].content.step)}
value={String(listQuestions[quizId][totalIndex].content.step)}
onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.step = Number(target.value);
@ -101,6 +159,25 @@ export default function SliderOptions({ totalIndex }: Props) {
content: clonContent,
});
}}
onBlur={({ target }) => {
const min = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[0]
);
const max = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[1]
);
const range = max - min;
const step = Number(target.value);
if (step > range) {
updateQuestionsList(quizId, totalIndex, {
content: {
...listQuestions[quizId][totalIndex].content,
step: range,
},
});
}
}}
/>
</Box>
</Box>

2
src/stores/questions.ts
View File

@ -30,7 +30,6 @@ export interface Question {
required: boolean;
deleted: true;
page: number;
completed: boolean;
content: {
variants: Variants[];
hint: Hint;
@ -141,7 +140,6 @@ export const createQuestion = (quizId: number) => {
required: true,
deleted: true,
page: 0,
completed: false,
content: {
largeCheck: false,
large: "",

10
src/ui_kit/CustomNumberField.tsx
View File

@ -1,4 +1,3 @@
import { useState } from "react";
import CustomTextField from "./CustomTextField";
import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
@ -9,7 +8,7 @@ interface CustomNumberFieldProps {
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
text?: string;
value: string;
sx?: SxProps<Theme>;
min?: number;
max?: number;
@ -17,7 +16,7 @@ interface CustomNumberFieldProps {
export default function CustomNumberField({
placeholder,
text,
value,
sx,
onChange,
onKeyDown,
@ -25,8 +24,6 @@ export default function CustomNumberField({
min = -999999999,
max = 999999999,
}: CustomNumberFieldProps) {
const [value, setValue] = useState<string>("");
const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
const inputValue = event.target.value;
@ -37,8 +34,6 @@ export default function CustomNumberField({
inputValue.match(/^\d*$/) ||
(inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/)))
) {
setValue(inputValue);
onChange?.({ ...event, target: { ...event.target, value: inputValue } });
}
};
@ -46,7 +41,6 @@ export default function CustomNumberField({
return (
<CustomTextField
placeholder={placeholder}
text={text}
sx={sx}
onChange={onInputChange}
onKeyDown={onKeyDown}