From a356bfd6011d0f2f74af7c6aeab08cb8c98e2d68 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 6 Oct 2018 13:54:02 +0100
Subject: [PATCH] Switch from react-aria-menubutton to <select/>

---
 src/components/Toolbar.jsx           | 58 ++++++++++++++--------------
 src/styles/_toolbar.scss             | 10 +++++
 test/functional/modals/index.js      |  2 +-
 test/functional/screenshots/index.js |  2 +-
 4 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 3e41d79..f371378 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import OpenIcon from 'react-icons/lib/md/open-in-browser'
@@ -72,6 +71,22 @@ class ToolbarLinkHighlighted extends React.Component {
   }
 }
 
+class ToolbarSelect extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    wdKey: PropTypes.string
+  }
+
+  render() {
+    return <div
+      className='maputnik-toolbar-select'
+      data-wd-key={this.props.wdKey}
+    >
+      {this.props.children}
+    </div>
+  }
+}
+
 class ToolbarAction extends React.Component {
   static propTypes = {
     children: PropTypes.node,
@@ -195,34 +210,19 @@ export default class Toolbar extends React.Component {
             <IconText>Style Settings</IconText>
           </ToolbarAction>
 
-          <Wrapper
-            className='map-state-menu'
-            onSelection={(val) => this.handleSelection(val)}
-          >
-            <Button wdKey="nav:settings" className="maputnik-toolbar-action">
-              <ViewIcon/>
-              <IconText>View: {currentView.title}</IconText>
-            </Button>
-            <Menu>
-              <ul className="map-state-menu__menu">
-                {views.map((item) => {
-                  return (
-                    <li key={item.id}>
-                      <MenuItem value={item.id}>
-                        <button
-                          className="maputnik-toolbar-action"
-                        >
-                          {item.icon}
-                          <IconText>{item.title}</IconText>
-                        </button>
-                      </MenuItem>
-                    </li>
-                  );
-                })}
-              </ul>
-            </Menu>
-          </Wrapper>
-
+          <ToolbarSelect wdKey="nav:inspect">
+            <ViewIcon/>
+            <IconText>View </IconText>
+            <select onChange={(e) => this.handleSelection(e.target.value)}>
+              {views.map((item) => {
+                return (
+                  <option value={item.id}>
+                    {item.title}
+                  </option>
+                );
+              })}
+            </select>
+          </ToolbarSelect>
 
           <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
             <HelpIcon />
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index 70ae986..9cdc51e 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -92,6 +92,16 @@
   @extend .maputnik-toolbar-link;
 }
 
+.maputnik-toolbar-select {
+  background: inherit;
+  border-width: 0;
+  @extend .maputnik-toolbar-link;
+}
+
+.maputnik-toolbar-select select {
+  margin-left: 4px;
+}
+
 .maputnik-icon-text {
   padding-left: $margin-1;
 }
diff --git a/test/functional/modals/index.js b/test/functional/modals/index.js
index d0996aa..2822434 100644
--- a/test/functional/modals/index.js
+++ b/test/functional/modals/index.js
@@ -100,7 +100,7 @@ describe("modals", function() {
         "geojson:example"
       ]));
 
-      browser.click(wd.$("nav:inspect"));
+      browser.setValue(wd.$("nav:inspect", "select"), "inspect");
     })
   })
 
diff --git a/test/functional/screenshots/index.js b/test/functional/screenshots/index.js
index a6d6d2a..5152a95 100644
--- a/test/functional/screenshots/index.js
+++ b/test/functional/screenshots/index.js
@@ -83,7 +83,7 @@ describe('screenshots', function() {
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:inspect"))
+    browser.setValue(wd.$("nav:inspect", "select"), "inspect");
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/inspect.png")