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

Support multiple tiles URLs for source

src/components/inputs/DynamicArrayInput.jsx

@@ -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)}

src/components/sources/SourceTypeEditor.jsx

@@ -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)}
-        />
-      </InputBlock>
-    })
+    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() {
@@ -108,7 +104,7 @@ class ImageSourceEditor extends React.Component {
     }
 
     return <div>
-      <InputBlock label={"Image URL"} doc={latest.source_image.url.doc}>
+      <InputBlock label={"Image URL"} fieldSpec={latest.source_image.url}>
         <UrlInput
           value={this.props.source.url}
           onChange={url => this.props.onChange({
@@ -159,7 +155,7 @@ class VideoSourceEditor extends React.Component {
     }
 
     return <div>
-      <InputBlock label={"Video URL"} doc={latest.source_video.urls.doc}>
+      <InputBlock label={"Video URL"} fieldSpec={latest.source_video.urls}>
         <DynamicArrayInput
           type="string"
           value={this.props.source.urls}