nrd.li/mastodon
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Close dropdown when clicking items

Browse source
This commit is contained in:
Eugen Rochko 2017-02-17 01:44:06 +01:00
parent 0cbf3a146f
commit 8b16f81882
1 changed files with 39 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
app/assets/javascripts/components/components/dropdown_menu.jsx
View file

@ -1,32 +1,46 @@
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; 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";
return ( propTypes: {
<Dropdown> icon: React.PropTypes.string.isRequired,
<DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}> items: React.PropTypes.array.isRequired,
<i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} /> size: React.PropTypes.number.isRequired,
</DropdownTrigger> direction: React.PropTypes.string
},
<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 => {
if (typeof action === 'function') {
e.preventDefault();
action();
}
}}>{text}</a></li>)}
</ul>
</DropdownContent>
</Dropdown>
);
};
DropdownMenu.propTypes = { setRef (c) {
icon: React.PropTypes.string.isRequired, this.dropdown = c;
items: React.PropTypes.array.isRequired, },
size: React.PropTypes.number.isRequired
}; 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; export default DropdownMenu;