Show editor for selected layer

src/app.jsx

@@ -41,6 +41,7 @@ export default class App extends React.Component {
     this.state = {
       accessToken: this.settingsStore.accessToken,
       mapStyle: style.emptyStyle,
+      selectedLayer: null,
     }
   }
 
@@ -102,9 +103,13 @@ export default class App extends React.Component {
     }
   }
 
+  onLayerSelected(layerId) {
+    this.setState({
+      selectedLayer: this.state.mapStyle.getIn(['layers', layerId],null)
+    })
+  }
+
   render() {
-    const layers = this.state.mapStyle.get('layers').keySeq()
-    console.log(layers.size)
     return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
       <Toolbar
         mapStyle={this.state.mapStyle}
@@ -124,6 +129,7 @@ export default class App extends React.Component {
       }}>
         <LayerList
           onLayersChanged={this.onLayersChanged.bind(this)}
+          onLayerSelected={this.onLayerSelected.bind(this)}
           layers={this.state.mapStyle.get('layers')}
         />
       </div>
@@ -136,7 +142,7 @@ export default class App extends React.Component {
         overflow: "hidden",
         backgroundColor: colors.gray}
       }>
-      {layers.size > 0 && <LayerEditor layer={this.state.mapStyle.get('layers').get(layers.get(0))} />}
+      {this.state.selectedLayer && <LayerEditor layer={this.state.selectedLayer} />}
       </div>
       {this.mapRenderer()}
     </div>

src/layers/editor.jsx

@@ -43,9 +43,6 @@ export class LayerEditor extends React.Component {
   constructor(props) {
     super(props);
     this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-    this.state = {
-      isOpened: false,
-    }
   }
 
   getChildContext () {
@@ -79,10 +76,6 @@ export class LayerEditor extends React.Component {
     this.props.onLayerChanged(changedLayer)
   }
 
-  toggleLayer() {
-    this.setState({isOpened: !this.state.isOpened})
-  }
-
   layerFromType(type) {
     if (type === "fill") {
       return <FillLayer
@@ -143,7 +136,7 @@ export class LayerEditor extends React.Component {
         borderColor: theme.borderColor,
         borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color'])
       }}>
-      <Toolbar onClick={this.toggleLayer.bind(this)}>
+      <Toolbar>
         <NavItem style={{fontWeight: 400}}>
           #{this.props.layer.get('id')}
         </NavItem>
@@ -155,11 +148,9 @@ export class LayerEditor extends React.Component {
           <MdDelete />
         </NavItem>
       </Toolbar>
-      <Collapse isOpened={this.state.isOpened}>
+      <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
-        <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
+      {this.layerFromType(this.props.layer.get('type'))}
-        {this.layerFromType(this.props.layer.get('type'))}
+      </div>
-        </div>
-      </Collapse>
     </div>
   }
 }

src/layers/list.jsx

@@ -9,12 +9,18 @@ import Space from 'rebass/dist/Space'
 import { LayerEditor } from './editor.jsx'
 import scrollbars from '../scrollbars.scss'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
+import theme from '../theme.js'
 
 // List of collapsible layer editors
 export class LayerList extends React.Component {
   static propTypes = {
     layers: React.PropTypes.instanceOf(Immutable.OrderedMap),
-    onLayersChanged: React.PropTypes.func.isRequired
+    onLayersChanged: React.PropTypes.func.isRequired,
+    onLayerSelected: React.PropTypes.func,
+  }
+
+  static defaultProps = {
+    onLayerSelected: () => {},
   }
 
   constructor(props) {
@@ -35,12 +41,23 @@ export class LayerList extends React.Component {
   render() {
     var layerPanels = []
     layerPanels = this.props.layers.map(layer => {
-      return <LayerEditor
+      const layerId = layer.get('id')
-        key={layer.get('id')}
+      return <div key={layerId} style={{
-        layer={layer}
+          padding: theme.scale[0],
-        onLayerDestroyed={this.onLayerDestroyed.bind(this)}
+          borderBottom: 1,
-        onLayerChanged={this.onLayerChanged.bind(this)}
+          borderTop: 1,
-      />
+          borderLeft: 2,
+          borderRight: 0,
+          borderStyle: "solid",
+          borderColor: theme.borderColor
+      }}>
+        <Toolbar onClick={() => this.props.onLayerSelected(layerId)}>
+          <NavItem style={{fontWeight: 400}}>
+            #{layerId}
+          </NavItem>
+          <Space auto x={1} />
+        </Toolbar>
+      </div>
     }).toIndexedSeq()
 
     return <div>