From 2cd70b5f9a57ced0efb22aabf9e8e875cbba6960 Mon Sep 17 00:00:00 2001
From: StevenIseki <stevenisekimartin@gmail.com>
Date: Sun, 11 Dec 2016 23:02:52 +1100
Subject: [PATCH] Toggle side toolbar on click

---
 .../src/utils/createBlockAlignmentButton.js   |  1 +
 .../src/utils/createBlockStyleButton.js       |  1 +
 .../src/utils/createInlineStyleButton.js      |  1 +
 .../src/components/BlockTypeSelect/index.js   | 33 ++++++++-----------
 .../DefaultBlockTypeSelect/index.js           |  2 +-
 .../src/components/Toolbar/index.js           | 12 ++-----
 6 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/draft-js-buttons/src/utils/createBlockAlignmentButton.js b/draft-js-buttons/src/utils/createBlockAlignmentButton.js
index e5065e36ed..88e5ef3bb0 100644
--- a/draft-js-buttons/src/utils/createBlockAlignmentButton.js
+++ b/draft-js-buttons/src/utils/createBlockAlignmentButton.js
@@ -6,6 +6,7 @@ export default ({ alignment, children }) => (
 
     activate = (event) => {
       event.preventDefault();
+      event.stopPropagation();
       this.props.setAlignment({ alignment });
     }
 
diff --git a/draft-js-buttons/src/utils/createBlockStyleButton.js b/draft-js-buttons/src/utils/createBlockStyleButton.js
index 76145444ad..da88cbef2b 100644
--- a/draft-js-buttons/src/utils/createBlockStyleButton.js
+++ b/draft-js-buttons/src/utils/createBlockStyleButton.js
@@ -7,6 +7,7 @@ export default ({ blockType, children }) => (
 
     toggleStyle = (event) => {
       event.preventDefault();
+      event.stopPropagation();
       this.props.setEditorState(
         RichUtils.toggleBlockType(
           this.props.getEditorState(),
diff --git a/draft-js-buttons/src/utils/createInlineStyleButton.js b/draft-js-buttons/src/utils/createInlineStyleButton.js
index c30c1db41b..9349d131a0 100644
--- a/draft-js-buttons/src/utils/createInlineStyleButton.js
+++ b/draft-js-buttons/src/utils/createInlineStyleButton.js
@@ -7,6 +7,7 @@ export default ({ style, children }) => (
 
     toggleStyle = (event) => {
       event.preventDefault();
+      event.stopPropagation();
       this.props.setEditorState(
         RichUtils.toggleInlineStyle(
           this.props.getEditorState(),
diff --git a/draft-js-side-toolbar-plugin/src/components/BlockTypeSelect/index.js b/draft-js-side-toolbar-plugin/src/components/BlockTypeSelect/index.js
index 827310ebb7..104daf530f 100644
--- a/draft-js-side-toolbar-plugin/src/components/BlockTypeSelect/index.js
+++ b/draft-js-side-toolbar-plugin/src/components/BlockTypeSelect/index.js
@@ -3,41 +3,36 @@ import React from 'react';
 export default class BlockTypeSelect extends React.Component {
 
   state = {
+    visible: false,
     style: {
       transform: 'translate(-50%) scale(0)',
+      transition: 'transform 0.15s cubic-bezier(.3,1.2,.2,1)',
     }
   }
 
-  onMouseEnter = () => {
-    this.setState({
-      style: {
-        transform: 'translate(-50%) scale(1)',
-        transition: 'transform 0.15s cubic-bezier(.3,1.2,.2,1)',
-      },
-    });
+  onClick = (e) => {
+    e.stopPropagation();
+    return this.state.visible ? this.hide() : this.show();
   }
 
-  onMouseLeave = () => {
+  show = () => {
     this.setState({
-      style: {
-        transform: 'translate(-50%) scale(0)',
-      },
+      visible: true,
+      style: { transform: 'translate(-50%) scale(1)' }
     });
   }
 
-  onMouseDown = (clickEvent) => {
-    clickEvent.preventDefault();
-    clickEvent.stopPropagation();
+  hide = () => {
+    this.setState({
+      visible: false,
+      style: { transform: 'translate(-50%) scale(0)' }
+    });
   }
 
   render() {
     const { theme, getEditorState, setEditorState } = this.props;
     return (
-      <div
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-        onMouseDown={this.onClick}
-      >
+      <div onClick={this.onClick}>
         <div className={theme.blockTypeSelectStyles.blockType}>
           <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
             <path d="M0 0h24v24H0z" fill="none" />
diff --git a/draft-js-side-toolbar-plugin/src/components/DefaultBlockTypeSelect/index.js b/draft-js-side-toolbar-plugin/src/components/DefaultBlockTypeSelect/index.js
index 79576271b1..e8c1c2d498 100644
--- a/draft-js-side-toolbar-plugin/src/components/DefaultBlockTypeSelect/index.js
+++ b/draft-js-side-toolbar-plugin/src/components/DefaultBlockTypeSelect/index.js
@@ -7,7 +7,7 @@ import {
   CodeBlockButton,
   UnorderedListButton,
   OrderedListButton,
-} from 'draft-js-buttons'; // eslint-disable-line import/no-unresolved
+} from '../../../../draft-js-buttons/src/'; // eslint-disable-line import/no-unresolved
 
 import BlockTypeSelect from '../BlockTypeSelect';
 
diff --git a/draft-js-side-toolbar-plugin/src/components/Toolbar/index.js b/draft-js-side-toolbar-plugin/src/components/Toolbar/index.js
index 0e540a033e..576372bcc0 100644
--- a/draft-js-side-toolbar-plugin/src/components/Toolbar/index.js
+++ b/draft-js-side-toolbar-plugin/src/components/Toolbar/index.js
@@ -19,15 +19,6 @@ export default class Toolbar extends React.Component {
 
   onEditorStateChange = (editorState) => {
     const selection = editorState.getSelection();
-    if (!selection.getHasFocus()) {
-      this.setState({
-        position: {
-          transform: 'scale(0)',
-        },
-      });
-      return;
-    }
-
     const currentContent = editorState.getCurrentContent();
     const currentBlock = currentContent.getBlockForKey(selection.getStartKey());
     // TODO verify that always a key-0-0 exists
@@ -37,13 +28,14 @@ export default class Toolbar extends React.Component {
       const node = document.querySelectorAll(`[data-offset-key="${offsetKey}"]`)[0];
       const top = node.getBoundingClientRect().top;
       const editor = this.props.store.getItem('getEditorRef')().refs.editor;
+
       this.setState({
         position: {
           top: (top + window.scrollY),
           left: editor.getBoundingClientRect().left - 80,
           transform: 'scale(1)',
           transition: 'transform 0.15s cubic-bezier(.3,1.2,.2,1)',
-        },
+        }
       });
     }, 0);
   }