33 render() { |
33 render() { |
34 |
34 |
35 const {currentGroup, groups, onSelect} = this.props; |
35 const {currentGroup, groups, onSelect} = this.props; |
36 |
36 |
37 const onClickGroup = (e) => { |
37 const onClickGroup = (e) => { |
|
38 e.preventDefault(); |
38 onSelect(e.target.dataset.groupname); |
39 onSelect(e.target.dataset.groupname); |
39 this.hideDropDown(); |
40 this.hideDropDown(); |
40 } |
41 } |
41 |
42 |
42 if (currentGroup) { |
43 if (currentGroup) { |
43 const currentGroupName = currentGroup.get('name'); |
44 const currentGroupName = currentGroup.get('name'); |
44 return ( |
45 return ( |
45 <li className={`nav-item dropdown navs ${this.state.showDropdown?'show':''}`}> |
46 <li className={`nav-item dropdown ${this.state.showDropdown?'show':''}`}> |
46 <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}> |
47 <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}> |
47 { currentGroupName } |
48 { currentGroupName } |
48 <span className="caret"></span> |
49 <span className="caret"></span> |
49 </a> |
50 </a> |
50 <ul className={`dropdown-menu ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown"> |
51 <div id="group-menu-scroll-down" className={`dropdown-menu dropdown-menu-right bg-primary border-0 ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown"> |
51 { groups && groups.map((group, key) => { |
52 { groups && groups.map((group, key) => { |
52 const groupName = group.get('name'); |
53 const groupName = group.get('name'); |
53 const className = (groupName === currentGroupName)?'active':null; |
54 const className = (groupName === currentGroupName)?'active':null; |
54 return <li key={key} className={className} onClick={onClickGroup}><a data-groupname={groupName}>{ groupName }</a></li> |
55 return <a key={key} onClick={onClickGroup} className={`dropdown-item bg-primary text-secondary ${className}`} data-groupname={groupName}>{ groupName }</a> |
55 }) |
56 }) |
56 } |
57 } |
57 <li onClick={onClickGroup} key="-1"><a data-groupname="__create_group__">Créer un groupe...</a></li> |
58 <button type="button "onClick={onClickGroup} key="-1" className="dropdown-item btn btn-secondary bg-secondary text-center text-primary create-group" data-groupname="__create_group__">Créer un groupe</button> |
58 </ul> |
59 </div> |
59 </li> |
60 </li> |
60 ); |
61 ); |
61 } else { |
62 } else { |
62 return null; |
63 return null; |
63 } |
64 } |