Close dropdown when clicking items

app/assets/javascripts/components/components/dropdown_menu.jsx

@@ -1,32 +1,46 @@
 import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-const DropdownMenu = ({ icon, items, size, direction }) => {
+const DropdownMenu = React.createClass({
-  const directionClass = (direction == "left") ? "dropdown__left" : "dropdown__right";
+
-
+  propTypes: {
-  return (
+    icon: React.PropTypes.string.isRequired,
-    <Dropdown>
+    items: React.PropTypes.array.isRequired,
-      <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}>
+    size: React.PropTypes.number.isRequired,
-        <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} />
+    direction: React.PropTypes.string
-      </DropdownTrigger>
+  },
-
+
-      <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}>
+  mixins: [PureRenderMixin],
-        <ul>
+
-          {items.map(({ text, action, href = '#' }, i) => <li key={i}><a href={href} target='_blank' rel='noopener' onClick={e => {
+  setRef (c) {
-            if (typeof action === 'function') {
+    this.dropdown = c;
-              e.preventDefault();
+  },
-              action();
+
-            }
+  render () {
-          }}>{text}</a></li>)}
+    const { icon, items, size, direction } = this.props;
-        </ul>
+    const directionClass = (direction === "left") ? "dropdown__left" : "dropdown__right";
-      </DropdownContent>
+
-    </Dropdown>
+    return (
-  );
+      <Dropdown ref={this.setRef}>
-};
+        <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}>
-
+          <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} />
-DropdownMenu.propTypes = {
+        </DropdownTrigger>
-  icon: React.PropTypes.string.isRequired,
+
-  items: React.PropTypes.array.isRequired,
+        <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}>
-  size: React.PropTypes.number.isRequired
+          <ul>
-};
+            {items.map(({ text, action, href = '#' }, i) => <li key={i}><a href={href} target='_blank' rel='noopener' onClick={e => {
+              if (typeof action === 'function') {
+                e.preventDefault();
+                action();
+                this.dropdown.hide();
+              }
+            }}>{text}</a></li>)}
+          </ul>
+        </DropdownContent>
+      </Dropdown>
+    );
+  }
+
+});
 
 export default DropdownMenu;