commit: 8b16f8188203c4761970997a83f4de784cbc1b76
parent: 0cbf3a146f5ac22a2187d8daa271e20b4e2d9b13
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 17 Feb 2017 01:44:06 +0100
Close dropdown when clicking items
Diffstat:
1 file changed, 42 insertions(+), 28 deletions(-)
diff --git a/app/assets/javascripts/components/components/dropdown_menu.jsx b/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 directionClass = (direction == "left") ? "dropdown__left" : "dropdown__right";
-
- return (
- <Dropdown>
- <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}>
- <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} />
- </DropdownTrigger>
-
- <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}>
- <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();
- }
- }}>{text}</a></li>)}
- </ul>
- </DropdownContent>
- </Dropdown>
- );
-};
-
-DropdownMenu.propTypes = {
- icon: React.PropTypes.string.isRequired,
- items: React.PropTypes.array.isRequired,
- size: React.PropTypes.number.isRequired
-};
+const DropdownMenu = React.createClass({
+
+ propTypes: {
+ icon: React.PropTypes.string.isRequired,
+ items: React.PropTypes.array.isRequired,
+ size: React.PropTypes.number.isRequired,
+ direction: React.PropTypes.string
+ },
+
+ mixins: [PureRenderMixin],
+
+ setRef (c) {
+ this.dropdown = c;
+ },
+
+ render () {
+ const { icon, items, size, direction } = this.props;
+ const directionClass = (direction === "left") ? "dropdown__left" : "dropdown__right";
+
+ 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' }} />
+ </DropdownTrigger>
+
+ <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}>
+ <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;