From 9ff4e25736ec75b573b3a5c186a60ca182a9b5b0 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@shawn.works>
Date: Wed, 19 Apr 2017 16:47:08 -0400
Subject: [PATCH] move editor components to dropdown menu

---
 example/index.html                            |  1 -
 .../Toolbar/Toolbar.js                        | 20 +++----
 .../Toolbar/ToolbarComponentsMenu.css         | 14 +++++
 .../Toolbar/ToolbarComponentsMenu.js          | 52 +++++++++++++++++++
 src/index.js                                  |  1 -
 5 files changed, 73 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.css
 create mode 100644 src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.js

diff --git a/example/index.html b/example/index.html
index 240266cc..e7a96279 100644
--- a/example/index.html
+++ b/example/index.html
@@ -141,7 +141,6 @@
     CMS.registerEditorComponent({
       id: "youtube",
       label: "Youtube",
-      icon: 'video',
       fields: [{name: 'id', label: 'Youtube Video ID'}],
       pattern: /^{{<\s?youtube (\S+)\s?>}}/,
       fromBlock: function(match) {
diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js b/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js
index 37b54810..59eb227e 100644
--- a/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js
+++ b/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js
@@ -3,6 +3,7 @@ import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Switch from 'react-toolbox/lib/switch';
 import ToolbarButton from './ToolbarButton';
+import ToolbarComponentsMenu from './ToolbarComponentsMenu';
 import ToolbarPluginForm from './ToolbarPluginForm';
 import { Icon } from '../../../UI';
 import styles from './Toolbar.css';
@@ -31,11 +32,8 @@ export default class Toolbar extends React.Component {
     };
   }
 
-  handlePluginFormDisplay(plugin) {
-    return (e) => {
-      e.preventDefault();
-      this.setState({ activePlugin: plugin });
-    };
+  handlePluginFormDisplay = (plugin) => {
+    this.setState({ activePlugin: plugin });
   }
 
   handlePluginFormSubmit = (plugin, pluginData) => {
@@ -71,14 +69,10 @@ export default class Toolbar extends React.Component {
         <ToolbarButton label="Bold" icon="bold" action={onBold}/>
         <ToolbarButton label="Italic" icon="italic" action={onItalic}/>
         <ToolbarButton label="Link" icon="link" action={onLink}/>
-        {plugins.map(plugin => (
-          <ToolbarButton
-            key={`plugin-${plugin.get('id')}`}
-            label={plugin.get('label')}
-            icon={plugin.get('icon')}
-            action={this.handlePluginFormDisplay(plugin)}
-          />
-        ))}
+        <ToolbarComponentsMenu
+          plugins={plugins}
+          onComponentMenuItemClick={this.handlePluginFormDisplay}
+        />
         {activePlugin &&
           <ToolbarPluginForm
             plugin={activePlugin}
diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.css b/src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.css
new file mode 100644
index 00000000..14605874
--- /dev/null
+++ b/src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.css
@@ -0,0 +1,14 @@
+.root {
+  display: inline-block;
+  position: relative;
+}
+
+.menuItem {
+  height: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  & span {
+    font-size: 14px;
+  }
+}
diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.js b/src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.js
new file mode 100644
index 00000000..c1d2c167
--- /dev/null
+++ b/src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.js
@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Menu, MenuItem } from 'react-toolbox/lib/menu';
+import ToolbarButton from './ToolbarButton';
+import styles from './ToolbarComponentsMenu.css';
+
+export default class ToolbarComponentsMenu extends React.Component {
+  static PropTypes = {
+    plugins: ImmutablePropTypes.list.isRequired,
+    onComponentMenuItemClick: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      componentsMenuActive: false,
+    };
+  }
+
+  handleComponentsMenuToggle = () => {
+    this.setState({ componentsMenuActive: !this.state.componentsMenuActive });
+  };
+
+  handleComponentsMenuHide = () => {
+    this.setState({ componentsMenuActive: false });
+  };
+
+  render() {
+    const { plugins, onComponentMenuItemClick } = this.props;
+    return (
+      <div className={styles.root}>
+        <ToolbarButton label="Add Component" icon="plus" action={this.handleComponentsMenuToggle}/>
+        <Menu
+          active={this.state.componentsMenuActive}
+          position="auto"
+          onHide={this.handleComponentsMenuHide}
+          ripple={false}
+        >
+          {plugins.map(plugin => (
+            <MenuItem
+              key={plugin.get('id')}
+              value={plugin.get('id')}
+              caption={plugin.get('label')}
+              onClick={() => onComponentMenuItemClick(plugin)}
+              className={styles.menuItem}
+            />
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}
diff --git a/src/index.js b/src/index.js
index cfb62841..47de32d4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -39,7 +39,6 @@ if (process.env.NODE_ENV !== 'production' && module.hot) {
 const buildtInPlugins = [{
   label: 'Image',
   id: 'image',
-  icon: 'picture',
   fromBlock: match => match && {
     image: match[2],
     alt: match[1],