84 lines
2.0 KiB
JavaScript
84 lines
2.0 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Button, Flex, Input, InputNumber } from 'antd'
|
|
|
|
const ArrayInput = ({
|
|
value = [],
|
|
onChange,
|
|
disabled = false,
|
|
numeric = false,
|
|
min,
|
|
max,
|
|
step,
|
|
placeholder
|
|
}) => {
|
|
const values = Array.isArray(value) ? value : []
|
|
|
|
const updateValue = (index, nextValue) => {
|
|
const nextValues = [...values]
|
|
nextValues[index] = nextValue
|
|
onChange?.(nextValues)
|
|
}
|
|
|
|
const removeValue = (index) => {
|
|
onChange?.(values.filter((_, valueIndex) => valueIndex !== index))
|
|
}
|
|
|
|
return (
|
|
<Flex vertical gap='small' style={{ width: '100%' }}>
|
|
{values.map((item, index) => (
|
|
<Flex key={index} gap='small' style={{ width: '100%' }}>
|
|
{numeric ? (
|
|
<InputNumber
|
|
value={item}
|
|
onChange={(nextValue) => updateValue(index, nextValue)}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
style={{ flex: 1 }}
|
|
/>
|
|
) : (
|
|
<Input
|
|
value={item}
|
|
onChange={(event) => updateValue(index, event.target.value)}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
style={{ flex: 1 }}
|
|
/>
|
|
)}
|
|
<Button
|
|
onClick={() => removeValue(index)}
|
|
disabled={disabled}
|
|
danger
|
|
aria-label={`Remove ${placeholder || 'item'}`}
|
|
>
|
|
Remove
|
|
</Button>
|
|
</Flex>
|
|
))}
|
|
<Button
|
|
onClick={() => onChange?.([...values, numeric ? null : ''])}
|
|
disabled={disabled}
|
|
type='dashed'
|
|
block
|
|
>
|
|
Add {placeholder || 'item'}
|
|
</Button>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
ArrayInput.propTypes = {
|
|
value: PropTypes.array,
|
|
onChange: PropTypes.func,
|
|
disabled: PropTypes.bool,
|
|
numeric: PropTypes.bool,
|
|
min: PropTypes.number,
|
|
max: PropTypes.number,
|
|
step: PropTypes.number,
|
|
placeholder: PropTypes.string
|
|
}
|
|
|
|
export default ArrayInput
|