diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/popover_list_members.jsx | 50 |
1 files changed, 28 insertions, 22 deletions
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index b7d4fd9a9..4f30adc43 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -3,7 +3,7 @@ var UserStore = require('../stores/user_store.jsx'); var Popover = ReactBootstrap.Popover; -var OverlayTrigger = ReactBootstrap.OverlayTrigger; +var Overlay = ReactBootstrap.Overlay; const Utils = require('../utils/utils.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); @@ -22,6 +22,10 @@ export default class PopoverListMembers extends React.Component { this.closePopover = this.closePopover.bind(this); } + componentWillMount() { + this.setState({showPopover: false}); + } + componentDidMount() { const originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function onLeave(obj) { @@ -85,10 +89,7 @@ export default class PopoverListMembers extends React.Component { } closePopover() { - var overlay = this.refs.overlay; - if (overlay.state.isOverlayShown) { - overlay.setState({isOverlayShown: false}); - } + this.setState({showPopover: false}); } render() { @@ -188,12 +189,27 @@ export default class PopoverListMembers extends React.Component { } return ( - <OverlayTrigger - ref='overlay' - trigger='click' - placement='bottom' - rootClose={true} - overlay={ + <div> + <div + id='member_popover' + ref='member_popover_target' + onClick={(e) => this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover})} + > + <div> + {countText} + <span + className='fa fa-user' + aria-hidden='true' + /> + </div> + </div> + <Overlay + rootClose={true} + onHide={this.closePopover} + show={this.state.showPopover} + target={() => this.state.popoverTarget} + placement='bottom' + > <Popover title='Members' id='member-list-popover' @@ -202,18 +218,8 @@ export default class PopoverListMembers extends React.Component { {popoverHtml} </div> </Popover> - } - > - <div id='member_popover'> - <div> - {countText} - <span - className='fa fa-user' - aria-hidden='true' - /> - </div> + </Overlay> </div> - </OverlayTrigger> ); } } |