@the-grid/ed - npm Package Compare versions

Comparing version 0.17.7 to 0.17.8

CHANGES.md

 ## dev
 
+## 0.17.8 - 2016-07-14
+
+* Dismiss meta dropdown by clicking out of menu or focusing editable (#229)
+
 ## 0.17.7 - 2016-07-13
@@ -4,0 +8,0 @@

dist/components/dropdown-group.js

@@ -33,2 +33,12 @@ 'use strict';
 
+function hasParentWithClassName(el, className) {
+  while (el && el.parentNode) {
+    if (el.className === 'DropdownGroup') {
+      return true;
+    }
+    el = el.parentNode;
+  }
+  return false;
+}
+
 var DropdownGroup = function (_React$Component) {
@@ -45,2 +55,3 @@ _inherits(DropdownGroup, _React$Component);
     };
+    _this.boundCloseMenu = _this.closeMenu.bind(_this);
     return _this;
@@ -50,2 +61,17 @@ }
   _createClass(DropdownGroup, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      // Click away to dismiss
+      var el = document.querySelector('.ProseMirror-content');
+      el.addEventListener('focus', this.boundCloseMenu);
+      document.body.addEventListener('click', this.boundCloseMenu);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      var el = document.querySelector('.ProseMirror-content');
+      el.removeEventListener('focus', this.boundCloseMenu);
+      document.body.removeEventListener('click', this.boundCloseMenu);
+    }
+  }, {
     key: 'componentWillReceiveProps',
@@ -160,2 +186,15 @@ value: function componentWillReceiveProps(nextProps) {
     }
+  }, {
+    key: 'closeMenu',
+    value: function closeMenu(event) {
+      // Hack since we can't stopPropagation to body
+      if (event.type === 'click' && hasParentWithClassName(event.srcElement, 'DropdownGroup')) {
+        return;
+      }
+      var openMenu = this.state.openMenu;
+
+      if (openMenu != null) {
+        this.setState({ openMenu: null });
+      }
+    }
   }]);
@@ -162,0 +201,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "0.17.7",
+  "version": "0.17.8",
   "description": "the grid api with prosemirror",
@@ -8,0 +8,0 @@ "main": "dist/ed.js",

src/components/dropdown-group.js

@@ -7,3 +7,13 @@ import React, {createElement as el} from 'react'
 
+function hasParentWithClassName (el, className) {
+  while (el && el.parentNode) {
+    if (el.className === 'DropdownGroup') {
+      return true
+    }
+    el = el.parentNode
+  }
+  return false
+}
 
+
 class DropdownGroup extends React.Component {
@@ -15,3 +25,15 @@ constructor (props) {
     }
+    this.boundCloseMenu = this.closeMenu.bind(this)
   }
+  componentDidMount () {
+    // Click away to dismiss
+    const el = document.querySelector('.ProseMirror-content')
+    el.addEventListener('focus', this.boundCloseMenu)
+    document.body.addEventListener('click', this.boundCloseMenu)
+  }
+  componentWillUnmount () {
+    const el = document.querySelector('.ProseMirror-content')
+    el.removeEventListener('focus', this.boundCloseMenu)
+    document.body.removeEventListener('click', this.boundCloseMenu)
+  }
   componentWillReceiveProps (nextProps) {
@@ -125,2 +147,12 @@ if (this.state.openMenu == null) {
   }
+  closeMenu (event) {
+    // Hack since we can't stopPropagation to body
+    if (event.type === 'click' && hasParentWithClassName(event.srcElement, 'DropdownGroup')) {
+      return
+    }
+    const {openMenu} = this.state
+    if (openMenu != null) {
+      this.setState({openMenu: null})
+    }
+  }
 }
@@ -127,0 +159,0 @@ DropdownGroup.propTypes =

No alert changes

Improved metrics

Total package byte prevSize

7181167

increased by0.09%

Lines of code

13745

increased by0.53%

No dependency changes