Implement adding public and custom sources

src/components/sources/SourceTypeEditor.jsx

@@ -1,18 +1,22 @@
 import React from 'react'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import NumberInput from '../inputs/NumberInput'
 
 class TileJSONSourceEditor extends React.Component {
   static propTypes = {
-    url: React.PropTypes.string.isRequired,
+    source: React.PropTypes.object.isRequired,
     onChange: React.PropTypes.func,
   }
 
   render() {
     return <InputBlock label={"TileJSON URL"}>
       <StringInput
-        value={this.props.url}
-        onChange={this.props.onChange}
+        value={this.props.source.url}
+        onChange={url => this.props.onChange({
+          ...this.props.source,
+          url: url
+        })}
       />
     </InputBlock>
   }
@@ -20,15 +24,14 @@ class TileJSONSourceEditor extends React.Component {
 
 class TileURLSourceEditor extends React.Component {
   static propTypes = {
-    tiles: React.PropTypes.array.isRequired,
-    minZoom: React.PropTypes.number.isRequired,
-    maxZoom: React.PropTypes.number.isRequired,
+    source: React.PropTypes.object.isRequired,
     onChange: React.PropTypes.func,
   }
 
   renderTileUrls() {
     const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
-    return this.props.tiles.map((tileUrl, tileIndex) => {
+    const tiles = this.props.source.tiles || []
+    return tiles.map((tileUrl, tileIndex) => {
       return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"}>
         <StringInput
           value={tileUrl}
@@ -38,17 +41,24 @@ class TileURLSourceEditor extends React.Component {
   }
 
   render() {
-    console.log(this.props.tiles)
     return <div>
       {this.renderTileUrls()}
       <InputBlock label={"Min Zoom"}>
-        <StringInput
-          value={this.props.minZoom}
+        <NumberInput
+          value={this.props.source.minZoom}
+          onChange={minZoom => this.props.onChange({
+            ...this.props.source,
+            minZoom: minZoom
+          })}
         />
       </InputBlock>
       <InputBlock label={"Max Zoom"}>
-        <StringInput
-          value={this.props.maxZoom}
+        <NumberInput
+          value={this.props.source.maxZoom}
+          onChange={maxZoom => this.props.onChange({
+            ...this.props.source,
+            maxZoom: maxZoom
+          })}
         />
       </InputBlock>
   </div>
@@ -58,15 +68,18 @@ class TileURLSourceEditor extends React.Component {
 
 class GeoJSONSourceEditor extends React.Component {
   static propTypes = {
-    data: React.PropTypes.string.isRequired,
+    source: React.PropTypes.object.isRequired,
     onChange: React.PropTypes.func,
   }
 
   render() {
     return <InputBlock label={"GeoJSON Data"}>
       <StringInput
-        value={this.props.data}
-        onChange={this.props.onChange}
+        value={this.props.source.data}
+        onChange={data => this.props.onChange({
+          ...this.props.source,
+          data: data
+        })}
       />
     </InputBlock>
   }
@@ -80,11 +93,14 @@ class SourceTypeEditor extends React.Component {
   }
 
   render() {
-    const source = this.props.source
+    const commonProps = {
+      source: this.props.source,
+      onChange: this.props.onChange,
+    }
     switch(this.props.mode) {
-      case 'geojson': return <GeoJSONSourceEditor data={source.data || 'http://localhost:3000/mygeojson.json'} />
-      case 'tilejson': return <TileJSONSourceEditor url={source.url || 'http://localhost:3000/tiles.json'}/>
-      case 'tilexyz': return <TileURLSourceEditor tiles={source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf']} minZoom={source.minZoom || 0} maxZoom={source.maxZoom || 14}/>
+      case 'geojson': return <GeoJSONSourceEditor {...commonProps} />
+      case 'tilejson': return <TileJSONSourceEditor {...commonProps} />
+      case 'tilexyz': return <TileURLSourceEditor {...commonProps} />
       default: return null
     }
   }