Fetching remote data from the REST service works, basic drawing too.
That's a first prototype.
This commit is contained in:
parent
aa8ddde965
commit
fee75ff8a7
8 changed files with 190 additions and 3696 deletions
49
src/ValidatingInputNumberField.js
Normal file
49
src/ValidatingInputNumberField.js
Normal file
|
@ -0,0 +1,49 @@
|
|||
import React, {useState} from 'react';
|
||||
|
||||
export default function ValidatingInputNumberField({
|
||||
id,
|
||||
label,
|
||||
defaultValue = 0,
|
||||
constraints = {},
|
||||
validatorFn = (value) => {
|
||||
return {valid: true, value};
|
||||
},
|
||||
disabled = false,
|
||||
onChange = _ => {
|
||||
}
|
||||
}) {
|
||||
const [error, setError] = useState(null);
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
|
||||
const handleValueChange = (e) => {
|
||||
const value = e.target.value;
|
||||
const validation = validatorFn(value);
|
||||
if (!validation.valid) {
|
||||
setError(validation.message);
|
||||
} else {
|
||||
setError(null);
|
||||
onChange(validation.value);
|
||||
}
|
||||
setValue(validation.value);
|
||||
};
|
||||
let errorComponent;
|
||||
if (!!error) {
|
||||
errorComponent = <span>{error}</span>;
|
||||
} else {
|
||||
errorComponent = <span/>;
|
||||
}
|
||||
return (
|
||||
<span>
|
||||
<label htmlFor={id}>{label}: </label>
|
||||
<input id={id}
|
||||
type={"number"}
|
||||
onChange={handleValueChange}
|
||||
value={value || ""}
|
||||
min={constraints.min || null}
|
||||
max={constraints.max || null}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{errorComponent}
|
||||
</span>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue