maputnik/src/components/inputs/ArrayInput.jsx

50 lines
1.1 KiB
React
Raw Normal View History

2016-12-29 22:37:54 +01:00
import React from 'react'
import PropTypes from 'prop-types'
2016-12-29 22:37:54 +01:00
import StringInput from './StringInput'
2016-12-31 14:56:26 +01:00
import NumberInput from './NumberInput'
2016-12-29 22:37:54 +01:00
class ArrayInput extends React.Component {
static propTypes = {
value: PropTypes.array,
type: PropTypes.string,
length: PropTypes.number,
default: PropTypes.array,
onChange: PropTypes.func,
2016-12-29 22:37:54 +01:00
}
2016-12-31 14:56:26 +01:00
changeValue(idx, newValue) {
console.log(idx, newValue)
const values = this.values.slice(0)
values[idx] = newValue
this.props.onChange(values)
}
get values() {
return this.props.value || this.props.default || []
}
2016-12-29 22:37:54 +01:00
render() {
2016-12-31 14:56:26 +01:00
const inputs = this.values.map((v, i) => {
2016-12-29 22:37:54 +01:00
if(this.props.type === 'number') {
2016-12-31 14:56:26 +01:00
return <NumberInput
key={i}
value={v}
onChange={this.changeValue.bind(this, i)}
/>
} else {
return <StringInput
key={i}
value={v}
onChange={this.changeValue.bind(this, i)}
/>
2016-12-29 22:37:54 +01:00
}
})
2017-01-11 13:34:38 +01:00
return <div className="maputnik-array">
2016-12-29 22:37:54 +01:00
{inputs}
</div>
}
}
export default ArrayInput