66 lines
1.4 KiB
JavaScript
66 lines
1.4 KiB
JavaScript
import { Flex, InputNumber, Typography } from 'antd'
|
|
import PropTypes from 'prop-types'
|
|
|
|
const { Text } = Typography
|
|
|
|
const MinMaxInput = ({
|
|
value = {},
|
|
onChange,
|
|
prefix = '',
|
|
suffix = '',
|
|
min,
|
|
max,
|
|
step,
|
|
disabled = false
|
|
}) => {
|
|
const handleChange = (field, val) => {
|
|
if (!onChange) return
|
|
onChange({ ...value, [field]: val })
|
|
}
|
|
|
|
return (
|
|
<Flex gap={'middle'} align='center' style={{ width: '100%' }}>
|
|
<InputNumber
|
|
addonBefore={<Text type='secondary'>Min:</Text>}
|
|
value={value?.min}
|
|
onChange={(val) => handleChange('min', val)}
|
|
prefix={prefix}
|
|
suffix={suffix}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
disabled={disabled}
|
|
style={{ minWidth: 120, flex: 1 }}
|
|
/>
|
|
<InputNumber
|
|
addonBefore={<Text type='secondary'>Max:</Text>}
|
|
value={value?.max}
|
|
onChange={(val) => handleChange('max', val)}
|
|
prefix={prefix}
|
|
suffix={suffix}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
disabled={disabled}
|
|
style={{ minWidth: 120, flex: 1 }}
|
|
/>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
MinMaxInput.propTypes = {
|
|
value: PropTypes.shape({
|
|
min: PropTypes.number,
|
|
max: PropTypes.number
|
|
}),
|
|
onChange: PropTypes.func,
|
|
prefix: PropTypes.string,
|
|
suffix: PropTypes.string,
|
|
min: PropTypes.number,
|
|
max: PropTypes.number,
|
|
step: PropTypes.number,
|
|
disabled: PropTypes.bool
|
|
}
|
|
|
|
export default MinMaxInput
|