LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Make menus close after you click an option

Browse source
This commit is contained in:
Alex Liebowitz 2017-02-24 04:13:52 -05:00
parent e8da1d09f5
commit b041d66ee4
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
js/component/menu.js
View file

@ -42,7 +42,7 @@ export let DropDownMenu = React.createClass({
window.removeEventListener('click', this.handleWindowClick, false); window.removeEventListener('click', this.handleWindowClick, false);
} }
}, },
onMenuIconClick: function(e) { handleMenuIconClick: function(e) {
this.setState({ this.setState({
menuOpen: !this.state.menuOpen, menuOpen: !this.state.menuOpen,
}); });
@ -53,6 +53,12 @@ export let DropDownMenu = React.createClass({
} }
return false; return false;
}, },
handleMenuClick: function(e) {
// Event bubbles up to the menu after a link is clicked
this.setState({
menuOpen: false,
});
},
handleWindowClick: function(e) { handleWindowClick: function(e) {
if (this.state.menuOpen && if (this.state.menuOpen &&
(!this._menuDiv || !this._menuDiv.contains(e.target))) { (!this._menuDiv || !this._menuDiv.contains(e.target))) {
@ -68,9 +74,9 @@ export let DropDownMenu = React.createClass({
} }
return ( return (
<div className="menu-container"> <div className="menu-container">
<Link ref={(span) => this._menuButton = span} button="text" icon="icon-ellipsis-v" onClick={this.onMenuIconClick} /> <Link ref={(span) => this._menuButton = span} button="text" icon="icon-ellipsis-v" onClick={this.handleMenuIconClick} />
{this.state.menuOpen {this.state.menuOpen
? <div ref={(div) => this._menuDiv = div} className="menu"> ? <div ref={(div) => this._menuDiv = div} className="menu" onClick={this.handleMenuClick}>
{this.props.children} {this.props.children}
</div> </div>
: null} : null}