manuel/labyrinth-frontend
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Fix linting and build errors.

Browse source
This commit is contained in:
Manuel Friedli 2025-01-08 21:30:02 +01:00
parent d8d05589e7
commit 36e1ea45d5
Signed by: manuel
GPG key ID: 41D08ABA75634DA1
9 changed files with 94 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/app/validating-input-number-field.tsx
View file

@ -1,28 +1,39 @@
import React, {useState} from 'react';
import React, {ChangeEventHandler, useState} from 'react';
export default function ValidatingInputNumberField({
id,
label,
value = 0,
constraints = {},
constraints = undefined,
validatorFn = (value) => {
return {valid: true, value};
return {valid: true, value: Number(value)};
},
disabled = false,
onChange = _ => {
onChange = () => {
}
}:
{
id: string;
label: string;
value?: number;
constraints?: { min?: number; max?: number; };
validatorFn: ValidatorFunction<string, number>;
disabled: boolean;
onChange: (v: number) => void;
}) {
const [error, setError] = useState(null);
const [error, setError] = useState<string>();
const handleValueChange = (e) => {
const handleValueChange: ChangeEventHandler<HTMLInputElement> = (e) => {
const value = e.target.value;
const validation = validatorFn(value);
if (!validation.valid) {
setError(validation.message);
} else {
setError(null);
setError(undefined);
}
if (validation.value) {
onChange(validation.value);
}
onChange(validation.value);
};
return (
<>
@ -31,11 +42,19 @@ export default function ValidatingInputNumberField({
type={"number"}
onChange={handleValueChange}
value={value || ""}
min={constraints.min || null}
max={constraints.max || null}
min={constraints?.min}
max={constraints?.max}
disabled={disabled}
/>
<span>{error}</span>
</>
);
}
export interface Validation<T> {
valid: boolean;
message?: string;
value?: T;
}
export type ValidatorFunction<I, T> = (v: I) => Validation<T>;