44 lines
817 B
TypeScript
44 lines
817 B
TypeScript
import { ChangeEvent, useState } from "react";
|
|
|
|
interface NumberInputProps {
|
|
min?: number;
|
|
max?: number;
|
|
step?: number;
|
|
defaultValue?: number;
|
|
onChange: (value: number) => void;
|
|
}
|
|
|
|
function NumberInput({
|
|
min = 1,
|
|
max = 100,
|
|
step = 1,
|
|
defaultValue = 1,
|
|
onChange,
|
|
}: NumberInputProps) {
|
|
const [value, setValue] = useState<number>(defaultValue);
|
|
|
|
function handleChange(e: ChangeEvent<HTMLInputElement>) {
|
|
let value = +e.target.value;
|
|
|
|
if (value < min) value = min;
|
|
if (value > max) value = max;
|
|
|
|
setValue(value);
|
|
onChange(value);
|
|
}
|
|
|
|
return (
|
|
<input
|
|
type="number"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
onChange={handleChange}
|
|
className="px-3 py-2 rounded w-full outline-none"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default NumberInput;
|