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

fix: min max value

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-19 15:31:01 +03:00
parent 860c883037
commit d179e0ceca
2 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,12 +17,13 @@ export default function SliderOptions({ question }: Props) {
const [switchState, setSwitchState] = useState("setting");
const [stepError, setStepError] = useState("");
const [startError, setStartError] = useState<boolean>(false);
const [minError, setMinError] = useState<boolean>(false);
const [maxError, setMaxError] = useState<boolean>(false);
useEffect(() => {
const min = Number(question.content.range.split("—")[0]);
const max = Number(question.content.range.split("—")[1]);
const start = Number(question.content.start);
console.log(min, max, start);
if (start < min || start > max) {
setStartError(true);
@ -79,7 +80,11 @@ export default function SliderOptions({ question }: Props) {
min={0}
max={99999999999}
value={question.content.range.split("—")[0]}
emptyError={minError}
onChange={({ target }) => {
const min = Number(target.value);
const max = Number(question.content.range.split("—")[1]);
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
@ -87,19 +92,12 @@ export default function SliderOptions({ question }: Props) {
question.content.range.split("—")[1]
}`;
});
}}
onBlur={({ target }) => {
const min = Number(target.value);
const max = Number(question.content.range.split("—")[1]);
if (min >= max) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${
question.content.range.split("—")[1]
}`;
});
setMinError(true);
} else {
setMinError(false);
setMaxError(false);
}
}}
/>
@ -110,7 +108,11 @@ export default function SliderOptions({ question }: Props) {
min={0}
max={100000000000}
value={question.content.range.split("—")[1]}
emptyError={maxError}
onChange={({ target }) => {
const min = Number(question.content.range.split("—")[0]);
const max = Number(target.value);
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
@ -118,6 +120,13 @@ export default function SliderOptions({ question }: Props) {
question.content.range.split("—")[0]
}—${target.value}`;
});
if (max <= min) {
setMaxError(true);
} else {
setMaxError(false);
setMinError(false);
}
}}
onBlur={({ target }) => {
const step = question.content.step;
@ -125,16 +134,6 @@ export default function SliderOptions({ question }: Props) {
const max = Number(target.value);
const range = max - min;
if (max <= min) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${min}—${
min + 1 >= 100 ? 100 : min + 1
}`;
});
}
if (step > max) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
@ -179,8 +178,6 @@ export default function SliderOptions({ question }: Props) {
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"50"}
min={Number(question.content.range.split("—")[0])}
max={Number(question.content.range.split("—")[1])}
value={String(question.content.start)}
emptyError={startError}
onChange={({ target }) => {

17
src/ui_kit/CustomNumberField.tsx
View File

@ -36,11 +36,24 @@ export default function CustomNumberField({
inputValue.match(/^\d*$/) ||
(inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/))
) {
console.log("inputValue", inputValue);
onChange?.({ ...event, target: { ...event.target, value: inputValue } });
}
};
const onInputBlur = (event: FocusEvent<HTMLInputElement>) => {
const inputValue = event.target.value;
if (Number(inputValue) < min) {
onChange?.({ ...event, target: { ...event.target, value: String(min) } });
}
if (Number(inputValue) > max) {
onChange?.({ ...event, target: { ...event.target, value: String(max) } });
}
onBlur?.(event);
};
return (
<CustomTextField
placeholder={placeholder}
@ -49,7 +62,7 @@ export default function CustomNumberField({
emptyError={emptyError}
onChange={onInputChange}
onKeyDown={onKeyDown}
onBlur={onBlur}
onBlur={onInputBlur}
value={value}
/>
);