From 8e6c54564b783a47ad16dc031441fd5b884658ec Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 25 Apr 2020 11:38:13 +0100
Subject: [PATCH] Add <DynamicArrayInput/> to source tile urls to support
 multiple values.

---
 src/components/inputs/DynamicArrayInput.jsx | 12 ++++++++++-
 src/components/sources/SourceTypeEditor.jsx | 24 +++++++++------------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/inputs/DynamicArrayInput.jsx b/src/components/inputs/DynamicArrayInput.jsx
index 84d6bb9..9fa05c6 100644
--- a/src/components/inputs/DynamicArrayInput.jsx
+++ b/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)}
diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx
index 2f8c154..363dace 100644
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/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() {