Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 1x 1x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | import { ChangeEvent, FC } from 'react'
import { InputProps, NumericInput } from '@/shared/ui'
export interface NumberRangeInputProps extends Omit<InputProps, 'onChange' | 'value' | 'placeholder' | 'label'> {
name: string
value: (string | number)[]
onChange: (value: (string | number)[]) => void
placeholder?: string[]
label?: string[]
decimalScale?: number
allowNegative?: boolean
}
export const NumberRangeInput: FC<NumberRangeInputProps> = ({
value = [],
onChange,
name,
placeholder,
decimalScale,
label,
...rest
}) => {
const changeHandler = (e: ChangeEvent<HTMLInputElement>, index: number) => {
const newValue = [...value]
newValue[index] = e.target.value
onChange(newValue)
}
return (
<div className='flex items-center gap-x-2.5 w-full'>
<NumericInput
name={name + '_first'}
value={value[0]}
data-testid='range-input'
label={placeholder?.[0]}
decimalScale={decimalScale}
{...rest}
onChange={e => changeHandler(e, 0)}
/>
<NumericInput
decimalScale={decimalScale}
name={name + '_second'}
value={value[1]}
data-testid='range-input'
onChange={e => changeHandler(e, 1)}
{...rest}
label={placeholder?.[1]}
/>
</div>
)
}
|