Merge pull request #667 from orangemug/fix/issue-656

Support multiple tiles URLs for source
This commit is contained in:
Orange Mug 2020-04-25 13:52:30 +01:00 committed by GitHub
commit a191c36f96
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 17 deletions

View file

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

View file

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