From d1b8f8d63e4623b1e142880e6ee312ca4150bded Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 29 Dec 2016 15:35:07 +0100
Subject: [PATCH] Change map style to add layer

---
 src/components/Toolbar.jsx         |  2 +-
 src/components/modals/AddModal.jsx | 26 +++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 3425f86..e9d6c26 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -159,9 +159,9 @@ export default class Toolbar extends React.Component {
       <AddModal
           mapStyle={this.props.mapStyle}
           sources={this.props.sources}
-          onStyleChanged={this.props.onStyleChanged}
           isOpen={this.state.isOpen.add}
           onOpenToggle={this.toggleModal.bind(this, 'add')}
+          onStyleChange={this.props.onStyleChanged}
       />
       <ToolbarLink
         href={"https://github.com/maputnik/editor"}
diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx
index b709fbe..1092972 100644
--- a/src/components/modals/AddModal.jsx
+++ b/src/components/modals/AddModal.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import Button from '../Button'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -14,7 +15,7 @@ import LayerSourceLayerBlock from '../layers/LayerSourceLayerBlock'
 class AddModal extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
+    onStyleChange: React.PropTypes.func.isRequired,
     isOpen: React.PropTypes.bool.isRequired,
     onOpenToggle: React.PropTypes.func.isRequired,
 
@@ -22,6 +23,24 @@ class AddModal extends React.Component {
     sources: React.PropTypes.object.isRequired,
   }
 
+  addLayer() {
+    const changedLayers = this.props.mapStyle.layers.slice(0)
+    changedLayers.push({
+      id: this.state.id,
+      type: this.state.type,
+      source: this.state.source,
+      'source-layer': this.state['source-layer'],
+    })
+
+    const changedStyle = {
+      ...this.props.mapStyle,
+      layers: changedLayers,
+    }
+
+    this.props.onStyleChange(changedStyle)
+    this.props.onOpenToggle(false)
+  }
+
   constructor(props) {
     super(props)
     this.state = {
@@ -31,6 +50,7 @@ class AddModal extends React.Component {
 
     if(props.sources.length > 0) {
       this.state.source = Object.keys(this.props.sources)[0]
+      this.state['source-layer'] = this.props.sources[this.state.source][0]
     }
   }
 
@@ -39,6 +59,7 @@ class AddModal extends React.Component {
     if(!this.state.source && sourceIds.length > 0) {
       this.setState({
         source: sourceIds[0],
+        'source-layer': this.state['source-layer'] || nextProps.sources[sourceIds[0]][0]
       })
     }
   }
@@ -68,6 +89,9 @@ class AddModal extends React.Component {
         value={this.state['source-layer']}
         onChange={v => this.setState({ 'source-layer': v })}
       />
+      <Button onClick={this.addLayer.bind(this)}>
+        Add Layer
+      </Button>
     </Modal>
   }
 }