47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { useState } from "react";
|
|
import classes from "./classes.module.scss";
|
|
import { MinusIcon, PlusIcon } from "@heroicons/react/24/outline";
|
|
|
|
type IProps = {
|
|
defaultValue: number;
|
|
onChange: (value: number) => void;
|
|
min?: number;
|
|
max?: number;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export default function NumberPicker(props: IProps) {
|
|
const { defaultValue, onChange, min, max, disabled } = props;
|
|
const [value, setValue] = useState(defaultValue);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
let value = parseInt(e.target.value);
|
|
if (isNaN(value)) value = 1;
|
|
if (min && value < min) value = min;
|
|
if (max && value > max) value = max;
|
|
|
|
setValue(value);
|
|
onChange(value);
|
|
};
|
|
|
|
const handleMinus = () => {
|
|
handleChange({ target: { value: value - 1 } } as any);
|
|
};
|
|
|
|
const handlePlus = () => {
|
|
handleChange({ target: { value: value + 1 } } as any);
|
|
};
|
|
|
|
return (
|
|
<div className={classes["root"]}>
|
|
<button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}>
|
|
<MinusIcon width="20" height="20" />
|
|
</button>
|
|
<input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} />
|
|
<button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}>
|
|
<PlusIcon width="20" height="20" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|