31 lines
795 B
TypeScript
31 lines
795 B
TypeScript
import { useCallback, useState } from "react";
|
|
import { z } from "zod";
|
|
|
|
type FloatInputProps = {
|
|
value: number;
|
|
onChange: (value: number) => void;
|
|
id: string;
|
|
};
|
|
|
|
const FloatInput: React.FC<FloatInputProps> = ({ value, onChange, id }) => {
|
|
const [inputValue, setInputValue] = useState<string>(value.toString());
|
|
|
|
const handleInputChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const val = e.target.value.replace(",", ".");
|
|
setInputValue(val);
|
|
|
|
const nextValue = z.coerce.number().min(-9999).max(9999).safeParse(val);
|
|
|
|
if (nextValue.success) {
|
|
onChange(nextValue.data);
|
|
}
|
|
},
|
|
[setInputValue, onChange]
|
|
);
|
|
|
|
return <input id={id} onChange={handleInputChange} value={inputValue} />;
|
|
};
|
|
|
|
export default FloatInput;
|