Fix modal rendering and simplify

src/components/App.jsx

@@ -25,7 +25,7 @@ export default class App extends React.Component {
         console.log('Falling back to local storage for storing styles')
         this.styleStore = new StyleStore()
       }
-      this.styleStore.latestStyle(mapStyle => this.onStyleUpload(mapStyle))
+      this.styleStore.latestStyle(mapStyle => this.onStyleOpen(mapStyle))
     })
 
     this.settingsStore = new SettingsStore()
@@ -38,7 +38,7 @@ export default class App extends React.Component {
 
   onReset() {
     this.styleStore.purge()
-    loadDefaultStyle(mapStyle => this.onStyleUpload(mapStyle))
+    loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
   }
 
   onStyleDownload() {
@@ -48,7 +48,7 @@ export default class App extends React.Component {
     this.onStyleSave()
   }
 
-  onStyleUpload(newStyle) {
+  onStyleOpen(newStyle) {
     console.log('upload', newStyle)
     const savedStyle = this.styleStore.save(newStyle)
     this.setState({ mapStyle: savedStyle })
@@ -130,7 +130,7 @@ export default class App extends React.Component {
       mapStyle={this.state.mapStyle}
       onStyleChanged={this.onStyleChanged.bind(this)}
       onStyleSave={this.onStyleSave.bind(this)}
-      onStyleUpload={this.onStyleUpload.bind(this)}
+      onStyleOpen={this.onStyleOpen.bind(this)}
       onStyleDownload={this.onStyleDownload.bind(this)}
     />
 

src/components/Toolbar.jsx

@@ -76,7 +76,7 @@ export default class Toolbar extends React.Component {
     mapStyle: React.PropTypes.object.isRequired,
     onStyleChanged: React.PropTypes.func.isRequired,
     // A new style has been uploaded
-    onStyleUpload: React.PropTypes.func.isRequired,
+    onStyleOpen: React.PropTypes.func.isRequired,
     // Current style is requested for download
     onStyleDownload: React.PropTypes.func.isRequired,
     // Style is explicitely saved to local cache
@@ -86,9 +86,11 @@ export default class Toolbar extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      openSettingsModal: false,
+      isOpen: {
-      openSourcesModal: false,
+        settings: false,
-      openOpenModal: false,
+        sources: false,
+        open: false,
+      }
     }
   }
 
@@ -99,16 +101,35 @@ export default class Toolbar extends React.Component {
     </ToolbarAction>
   }
 
-  toggleSettings() {
+  toggleModal(modalName) {
-    this.setState({openSettingsModal: !this.state.openSettingsModal})
+    this.setState({
+      isOpen: {
+        ...this.state.isOpen,
+        [modalName]: !this.state.isOpen[modalName]
+      }
+    })
   }
 
-  toggleSources() {
+  renderModals() {
-    this.setState({openSourcesModal: !this.state.openSourcesModal})
+    return [
-  }
+      <SettingsModal
-
+        mapStyle={this.props.mapStyle}
-  toggleOpen() {
+        onStyleChanged={this.props.onStyleChanged}
-    this.setState({openOpenModal: !this.state.openOpenModal})
+        isOpen={this.state.isOpen.settings}
+        onOpenToggle={this.toggleModal.bind(this, 'settings')}
+      />,
+      <OpenModal
+        isOpen={this.state.isOpen.open}
+        onStyleOpen={this.props.onStyleOpen}
+        onOpenToggle={this.toggleModal.bind(this, 'open')}
+      />,
+      <SourcesModal
+          mapStyle={this.props.mapStyle}
+          onStyleChanged={this.props.onStyleChanged}
+          isOpen={this.state.isOpen.sources}
+          onOpenToggle={this.toggleModal.bind(this, 'sources')}
+      />,
+    ]
   }
 
   render() {
@@ -121,26 +142,7 @@ export default class Toolbar extends React.Component {
       top: 0,
       backgroundColor: colors.black
     }}>
-      {this.state.openSettingsModal && <SettingsModal
+      {this.renderModals()}
-          mapStyle={this.props.mapStyle}
-          onStyleChanged={this.props.onStyleChanged}
-          isOpen={this.state.openSettingsModal}
-          onToggleOpen={this.toggleSettings.bind(this)}
-        />
-      }
-      {this.state.openOpenModal &&<OpenModal
-          isOpen={this.state.openOpenModal}
-          onStyleOpen={this.props.onStyleUpload}
-          onToggleOpen={this.toggleOpen.bind(this)}
-        />
-      }
-      {this.state.openSourcesModal && <SourcesModal
-          mapStyle={this.props.mapStyle}
-          onStyleChanged={this.props.onStyleChanged}
-          isOpen={this.state.openSourcesModal}
-          onToggleOpen={this.toggleSources.bind(this)}
-        />
-      }
       <ToolbarLink
         href={"https://github.com/maputnik/editor"}
         style={{
@@ -153,20 +155,20 @@ export default class Toolbar extends React.Component {
         <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
         <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
       </ToolbarLink>
-      <ToolbarAction onClick={this.toggleOpen.bind(this)}>
+      <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
         <MdOpenInBrowser />
         <IconText>Open</IconText>
       </ToolbarAction>
       {this.downloadButton()}
-      <ToolbarAction onClick={this.toggleSources.bind(this)}>
+      <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
         <MdLayers />
         <IconText>Sources</IconText>
       </ToolbarAction>
-      <ToolbarAction onClick={this.toggleSettings.bind(this)}>
+      <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
         <MdSettings />
         <IconText>Style Settings</IconText>
       </ToolbarAction>
-      <ToolbarAction onClick={this.toggleSettings.bind(this)}>
+      <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
         <MdFindInPage />
         <IconText>Inspect</IconText>
       </ToolbarAction>

src/components/modals/Modal.jsx

@@ -31,7 +31,7 @@ class Modal extends React.Component {
           {this.props.title}
           <span style={{flexGrow: 1}} />
           <a
-            onClick={this.props.toggleOpen(false)}
+            onClick={() => this.props.onOpenToggle(false)}
             style={{ cursor: 'pointer' }} >
             <CloseIcon />
           </a>