Allow editing source of layer

src/app.jsx

@@ -156,7 +156,7 @@ export default class App extends React.Component {
         width: 300,
         backgroundColor: colors.gray}
       }>
-      {selectedLayer && <LayerEditor layer={selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} />}
+      {selectedLayer && <LayerEditor layer={selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} sources={this.state.mapStyle.get('sources')}/>}
       </div>
       {this.mapRenderer()}
     </div>

src/layers/editor.jsx

@@ -11,6 +11,7 @@ import FillLayer from './fill.jsx'
 import LineLayer from './line.jsx'
 import SymbolLayer from './symbol.jsx'
 import BackgroundLayer from './background.jsx'
+import SourceEditor from './source.jsx'
 
 import MdVisibility from 'react-icons/lib/md/visibility'
 import MdVisibilityOff from 'react-icons/lib/md/visibility-off'
@@ -29,6 +30,7 @@ class UnsupportedLayer extends React.Component {
 export class LayerEditor extends React.Component {
   static propTypes = {
     layer: React.PropTypes.object.isRequired,
+    sources: React.PropTypes.instanceOf(Immutable.Map),
     onLayerChanged: React.PropTypes.func,
     onLayerDestroyed: React.PropTypes.func,
   }
@@ -129,6 +131,7 @@ export class LayerEditor extends React.Component {
       visibleIcon = <MdVisibility />
     }
 
+    console.log(this.props.layer.toJSON())
     return <div style={{
         padding: theme.scale[0],
       }}>
@@ -144,6 +147,13 @@ export class LayerEditor extends React.Component {
           <MdDelete />
         </NavItem>
       </Toolbar>
+       {this.props.layer.get('type') !== 'background' && <SourceEditor
+          source={this.props.layer.get('source')}
+          sourceLayer={this.props.layer.get('source-layer')}
+          sources={this.props.sources}
+          onSourceChange={console.log}
+          onSourceLayerChange={console.log}
+        />}
         <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
         {this.layerFromType(this.props.layer.get('type'))}
         </div>

src/layers/source.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Immutable from 'immutable'
+import { PropertyGroup } from '../fields/spec'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import inputStyle from '../fields/input.js'
+
+/** Choose tileset (source) and the source layer */
+export default class SourceEditor extends React.Component {
+	static propTypes = {
+		source: React.PropTypes.string.isRequired,
+		sourceLayer: React.PropTypes.string.isRequired,
+
+    onSourceChange: React.PropTypes.func.isRequired,
+    onSourceLayerChange: React.PropTypes.func.isRequired,
+
+    /** List of available sources in the style
+     * https://www.mapbox.com/mapbox-gl-style-spec/#root-sources */
+    sources: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+  }
+
+	constructor(props) {
+		super(props);
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+	}
+
+  render() {
+		const options = this.props.sources.map((source, sourceId)=> {
+			return <option key={sourceId} value={sourceId}>{sourceId}</option>
+		}).toIndexedSeq()
+    console.log(this.props.sources)
+	  return <div>
+      <div style={inputStyle.property}>
+        <label style={inputStyle.label}>Source</label>
+        <select
+          style={inputStyle.select}
+          value={this.props.source}
+          onChange={(e) => this.onSourceChange(e.target.value)}
+        >
+          {options}
+        </select>
+      </div>
+	    <div style={inputStyle.property}>
+        <label style={inputStyle.label}>Source Layer</label>
+        <input
+          style={inputStyle.input}
+          name={"sourceLayer"}
+          value={this.props.sourceLayer}
+          onChange={(e) => this.onSourceLayerChange(e.target.value)}
+        />
+		  </div>
+		</div>
+
+	}
+}