60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
import React, {ChangeEventHandler, useState} from 'react';
|
|
|
|
export default function ValidatingInputNumberField({
|
|
id,
|
|
label,
|
|
value = 0,
|
|
constraints = undefined,
|
|
validatorFn = (value) => {
|
|
return {valid: true, value: Number(value)};
|
|
},
|
|
disabled = false,
|
|
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<string>();
|
|
|
|
const handleValueChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
const value = e.target.value;
|
|
const validation = validatorFn(value);
|
|
if (!validation.valid) {
|
|
setError(validation.message);
|
|
} else {
|
|
setError(undefined);
|
|
}
|
|
if (validation.value) {
|
|
onChange(validation.value);
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
<label htmlFor={id}>{label}: </label>
|
|
<input id={id}
|
|
type={"number"}
|
|
onChange={handleValueChange}
|
|
value={value || ""}
|
|
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>;
|