1 import React, { Component } from 'react';

     2 import ReactDOM from 'react-dom';

     3 

     4 export default class NavbarGroup extends Component {

     5 

     6   state = {

     7     showDropdown: false

     8   }

     9 

    10   componentWillMount() {

    11     document.addEventListener('click', this.handleClickOutside, false);

    12   }

    13 

    14   componentWillUnmount() {

    15     document.removeEventListener('click', this.handleClickOutside, false);

    16   }

    17 

    18   handleClickOutside = (e) => {

    19     if(!ReactDOM.findDOMNode(this).contains(e.target)) {

    20       this.hideDropDown();

    21     }

    22   }

    23 

    24   toggleShowDropdown = () => {

    25     this.setState({showDropdown: !this.state.showDropdown});

    26   }

    27 

    28   hideDropDown = () => {

    29     this.setState({showDropdown: false});

    30   }

    31 

    32   render() {

    33 

    34     const {currentGroup, groups, onSelect} = this.props;

    35 

    36     const onClickGroup = (e) => {

    37       onSelect(e.target.dataset.groupname);

    38       this.hideDropDown();

    39     }

    40 

    41     if (currentGroup) {

    42       const currentGroupName = currentGroup.get('name');

    43       return (

    44         <li className={`nav-item dropdown navs ${this.state.showDropdown?'show':''}`}>

    45           <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>

    46           { currentGroupName }

    47           &nbsp;<span className="caret"></span>

    48           </a>

    49           <ul className={`dropdown-menu ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">

    50           { groups && groups.map((group, key) => {

    51             const groupName = group.get('name');

    52             const className = (groupName === currentGroupName)?'active':null;

    53               return <li key={key} className={className} onClick={onClickGroup}><a data-groupname={groupName}>{ groupName }</a></li>

    54             })

    55           }

    56           <li onClick={onClickGroup} key="-1"><a data-groupname="__create_group__">Créer un groupe...</a></li>

    57           </ul>

    58         </li>

    59       );

    60     } else {

    61       return null;

    62     }

    63   }

    64 }