import { type FC, useCallback } from 'react' import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react' import Input, { type InputProps } from '../input' import classNames from '@/utils/classnames' export type InputNumberProps = { unit?: string value?: number onChange: (value?: number) => void amount?: number size?: 'regular' | 'large' max?: number min?: number defaultValue?: number disabled?: boolean wrapClassName?: string controlWrapClassName?: string controlClassName?: string } & Omit export const InputNumber: FC = (props) => { const { unit, className, onChange, amount = 1, value, size = 'regular', max, min, defaultValue, wrapClassName, controlWrapClassName, controlClassName, disabled, ...rest } = props const isValidValue = useCallback((v: number) => { if (typeof max === 'number' && v > max) return false return !(typeof min === 'number' && v < min) }, [max, min]) const inc = () => { if (disabled) return if (value === undefined) { onChange(defaultValue) return } const newValue = value + amount if (!isValidValue(newValue)) return onChange(newValue) } const dec = () => { if (disabled) return if (value === undefined) { onChange(defaultValue) return } const newValue = value - amount if (!isValidValue(newValue)) return onChange(newValue) } const handleInputChange = useCallback((e: React.ChangeEvent) => { if (e.target.value === '') { onChange(undefined) return } const parsed = Number(e.target.value) if (Number.isNaN(parsed)) return if (!isValidValue(parsed)) return onChange(parsed) }, [isValidValue, onChange]) return
}