// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import ProfilePicture from 'components/profile_picture.jsx'; import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; import Client from 'client/web_client.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; import $ from 'jquery'; import React from 'react'; import {Popover, Overlay} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; export default class PopoverListMembers extends React.Component { constructor(props) { super(props); this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this); this.closePopover = this.closePopover.bind(this); } componentDidUpdate() { $('.member-list__popover .popover-content').perfectScrollbar(); } componentWillMount() { this.setState({showPopover: false}); } handleShowDirectChannel(teammate, e) { e.preventDefault(); Utils.openDirectChannelToUser( teammate, (channel, channelAlreadyExisted) => { browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name); if (channelAlreadyExisted) { this.closePopover(); } }, () => { this.closePopover(); } ); } closePopover() { this.setState({showPopover: false}); } render() { const popoverHtml = []; const members = this.props.members; const teamMembers = UserStore.getProfilesUsernameMap(); const currentUserId = UserStore.getCurrentId(); if (members && teamMembers) { members.sort((a, b) => { const aName = Utils.displayUsername(a.id); const bName = Utils.displayUsername(b.id); return aName.localeCompare(bName); }); members.forEach((m, i) => { let button = ''; if (currentUserId !== m.id && this.props.channel.type !== 'D') { button = ( this.handleShowDirectChannel(m, e)} > ); } let name = ''; if (teamMembers[m.username]) { name = Utils.displayUsername(teamMembers[m.username].id); } if (name) { let status; if (m.status) { status = m.status; } else { status = UserStore.getStatus(m.id); } popoverHtml.push(
{name}
{button}
); } }); } let count = this.props.memberCount; let countText = '-'; // fall back to checking the length of the member list if the count isn't set if (!count && members) { count = members.length; } if (count > Constants.MAX_CHANNEL_POPOVER_COUNT) { countText = Constants.MAX_CHANNEL_POPOVER_COUNT + '+'; } else if (count > 0) { countText = count.toString(); } const title = ( ); return (
this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover})} >
{countText}
this.state.popoverTarget} placement='bottom' >
{popoverHtml}
); } } PopoverListMembers.propTypes = { channel: React.PropTypes.object.isRequired, members: React.PropTypes.array.isRequired, memberCount: React.PropTypes.number };