f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-03 12:42:41 +00:00
Code Wiki Activity

Initial functionality pass

Browse Source
This commit is contained in:
G.Ambatte
2023-06-29 21:59:42 +12:00
parent 9e2b8477a8
commit 3cb5e8ed42
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
shared/naturalcrit/nav/nav.jsx
View File

@@ -80,23 +80,29 @@ const Nav = {
}, },
getInitialState : function() { getInitialState : function() {
return { return {
showDropdown : false showFromClick : false,
showDropdown : false
}; };
}, },
componentDidMount : function() { componentDidMount : function() {
if(this.props.trigger == 'click') document.addEventListener('click', this.handleClickOutside);
document.addEventListener('click', this.handleClickOutside);
}, },
componentWillUnmount : function() { componentWillUnmount : function() {
if(this.props.trigger == 'click') document.removeEventListener('click', this.handleClickOutside);
document.removeEventListener('click', this.handleClickOutside);
}, },
handleClickOutside : function(e){ handleClickOutside : function(e){
// Close dropdown when clicked outside // Close dropdown when clicked outside
if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) { if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
this.handleDropdown(false); this.handleClickInside(false);
} }
}, },
handleClickInside : function(state){
const newState = state != undefined ? state : !this.state.showFromClick;
this.setState({
showFromClick : newState
});
this.handleDropdown(newState);
},
handleDropdown : function(show){ handleDropdown : function(show){
this.setState({ this.setState({
showDropdown : show showDropdown : show
@@ -121,8 +127,9 @@ const Nav = {
<div className={`navDropdownContainer ${this.props.className}`} <div className={`navDropdownContainer ${this.props.className}`}
ref='dropdown' ref='dropdown'
onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined} onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
onClick= {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined} onClick= {()=>this.handleClickInside()}
onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}> onMouseLeave={this.props.trigger == 'hover' && !this.state.showFromClick ? ()=>{this.handleDropdown(false);} : undefined}
>
{this.props.children[0] || this.props.children /*children is not an array when only one child*/} {this.props.children[0] || this.props.children /*children is not an array when only one child*/}
{this.renderDropdown(dropdownChildren)} {this.renderDropdown(dropdownChildren)}
</div> </div>