Add <DynamicArrayInput/> to source tile urls to support multiple values.

This commit is contained in:
orangemug 2020-04-25 11:38:13 +01:00
parent 1d48ab7ecf
commit 8e6c54564b
2 changed files with 21 additions and 15 deletions

View file

@ -7,6 +7,7 @@ import {MdDelete} from 'react-icons/md'
import DocLabel from '../fields/DocLabel'
import EnumInput from '../inputs/SelectInput'
import capitalize from 'lodash.capitalize'
import UrlInput from '../inputs/UrlInput'
class DynamicArrayInput extends React.Component {
@ -35,6 +36,9 @@ class DynamicArrayInput extends React.Component {
if (this.props.type === 'number') {
values.push(0)
}
else if (this.props.type === 'url') {
values.push("");
}
else if (this.props.type === 'enum') {
const {fieldSpec} = this.props;
const defaultValue = Object.keys(fieldSpec.values)[0];
@ -57,7 +61,13 @@ class DynamicArrayInput extends React.Component {
const inputs = this.values.map((v, i) => {
const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
let input;
if (this.props.type === 'number') {
if(this.props.type === 'url') {
input = <UrlInput
value={v}
onChange={this.changeValue.bind(this, i)}
/>
}
else if (this.props.type === 'number') {
input = <NumberInput
value={v}
onChange={this.changeValue.bind(this, i)}

View file

@ -41,26 +41,22 @@ class TileURLSourceEditor extends React.Component {
children: PropTypes.node,
}
changeTileUrl(idx, value) {
const tiles = this.props.source.tiles.slice(0)
tiles[idx] = value
changeTileUrls(tiles) {
this.props.onChange({
...this.props.source,
tiles: tiles
tiles,
})
}
renderTileUrls() {
const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
const tiles = this.props.source.tiles || []
return tiles.map((tileUrl, tileIndex) => {
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} fieldSpec={latest.source_vector.tiles}>
<UrlInput
value={tileUrl}
onChange={this.changeTileUrl.bind(this, tileIndex)}
const tiles = this.props.source.tiles || [];
return <InputBlock label={"Tile URL"} fieldSpec={latest.source_vector.tiles}>
<DynamicArrayInput
type="url"
value={tiles}
onChange={this.changeTileUrls.bind(this)}
/>
</InputBlock>
})
}
render() {