diff options
Diffstat (limited to 'webapp/components/popover_list_members/popover_list_members.jsx')
| -rw-r--r-- | webapp/components/popover_list_members/popover_list_members.jsx | 294 |
1 files changed, 0 insertions, 294 deletions
diff --git a/webapp/components/popover_list_members/popover_list_members.jsx b/webapp/components/popover_list_members/popover_list_members.jsx deleted file mode 100644 index 1b790e923..000000000 --- a/webapp/components/popover_list_members/popover_list_members.jsx +++ /dev/null @@ -1,294 +0,0 @@ -// Copyright (c) 2015-present 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 ChannelStore from 'stores/channel_store.jsx'; - -import TeamMembersModal from 'components/team_members_modal.jsx'; -import ChannelMembersModal from 'components/channel_members_modal.jsx'; -import ChannelInviteModal from 'components/channel_invite_modal'; - -import {openDirectChannelToUser} from 'actions/channel_actions.jsx'; - -import {Client4} from 'mattermost-redux/client'; -import * as Utils from 'utils/utils.jsx'; -import Constants from 'utils/constants.jsx'; -import {canManageMembers} from 'utils/channel_utils.jsx'; - -import $ from 'jquery'; -import PropTypes from 'prop-types'; -import React from 'react'; -import {Tooltip, OverlayTrigger, Popover, Overlay} from 'react-bootstrap'; -import {FormattedMessage} from 'react-intl'; -import {browserHistory} from 'react-router/es6'; - -export default class PopoverListMembers extends React.Component { - static propTypes = { - channel: PropTypes.object.isRequired, - members: PropTypes.array.isRequired, - memberCount: PropTypes.number, - actions: PropTypes.shape({ - getProfilesInChannel: PropTypes.func.isRequired - }).isRequired - } - - constructor(props) { - super(props); - - this.showMembersModal = this.showMembersModal.bind(this); - - this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this); - this.closePopover = this.closePopover.bind(this); - - this.state = { - showPopover: false, - showTeamMembersModal: false, - showChannelMembersModal: false, - showChannelInviteModal: false - }; - } - - componentDidUpdate() { - $('.member-list__popover .popover-content .more-modal__body').perfectScrollbar(); - } - - handleShowDirectChannel(teammate, e) { - e.preventDefault(); - - openDirectChannelToUser( - teammate.id, - (channel, channelAlreadyExisted) => { - browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name); - if (channelAlreadyExisted) { - this.closePopover(); - } - }, - () => { - this.closePopover(); - } - ); - } - - closePopover() { - this.setState({showPopover: false}); - } - - showMembersModal(e) { - e.preventDefault(); - - this.setState({ - showPopover: false, - showChannelMembersModal: true - }); - } - - render() { - let popoverButton; - const popoverHtml = []; - const members = this.props.members; - const teamMembers = UserStore.getProfilesUsernameMap(); - const currentUserId = UserStore.getCurrentId(); - - const isSystemAdmin = UserStore.isSystemAdminForCurrentUser(); - const isTeamAdmin = TeamStore.isTeamAdminForCurrentTeam(); - const isChannelAdmin = ChannelStore.isChannelAdminForCurrentChannel(); - const membersIcon = Constants.MEMBERS_ICON_SVG; - - if (members && teamMembers) { - members.sort((a, b) => { - const aName = Utils.displayEntireName(a.id); - const bName = Utils.displayEntireName(b.id); - - return aName.localeCompare(bName); - }); - - members.forEach((m, i) => { - let messageIcon = ''; - if (currentUserId !== m.id && this.props.channel.type !== Constants.DM_CHANNEl) { - messageIcon = Constants.MESSAGE_ICON_SVG; - } - - let name = ''; - if (teamMembers[m.username]) { - name = Utils.displayUsernameForUser(teamMembers[m.username]); - } - - if (name) { - popoverHtml.push( - <div - className='more-modal__row' - onClick={(e) => this.handleShowDirectChannel(m, e)} - key={'popover-member-' + i} - > - <ProfilePicture - src={Client4.getProfilePictureUrl(m.id, m.last_picture_update)} - width='40' - height='40' - /> - <div className='more-modal__details'> - <div - className='more-modal__name' - > - {name} - </div> - </div> - <div - className='more-modal__actions' - > - <span - className='icon icon__message' - dangerouslySetInnerHTML={{__html: messageIcon}} - aria-hidden='true' - /> - </div> - </div> - ); - } - }); - - if (this.props.channel.type !== Constants.GM_CHANNEL) { - let membersName = ( - <FormattedMessage - id='members_popover.manageMembers' - defaultMessage='Manage Members' - /> - ); - - const manageMembers = canManageMembers(this.props.channel, isChannelAdmin, isTeamAdmin, isSystemAdmin); - const isDefaultChannel = ChannelStore.isDefault(this.props.channel); - - if ((manageMembers === false && isDefaultChannel === false) || isDefaultChannel) { - membersName = ( - <FormattedMessage - id='members_popover.viewMembers' - defaultMessage='View Members' - /> - ); - } - - popoverButton = ( - <div - className='more-modal__button' - key={'popover-member-more'} - > - <button - className='btn btn-link' - onClick={this.showMembersModal} - > - {membersName} - </button> - </div> - ); - } - } - - const count = this.props.memberCount; - let countText = '-'; - if (count > 0) { - countText = count.toString(); - } - - const title = ( - <FormattedMessage - id='members_popover.title' - defaultMessage='Channel Members' - /> - ); - - let channelMembersModal; - if (this.state.showChannelMembersModal) { - channelMembersModal = ( - <ChannelMembersModal - onModalDismissed={() => this.setState({showChannelMembersModal: false})} - showInviteModal={() => this.setState({showChannelInviteModal: true})} - channel={this.props.channel} - /> - ); - } - - let teamMembersModal; - if (this.state.showTeamMembersModal) { - teamMembersModal = ( - <TeamMembersModal - onHide={() => this.setState({showTeamMembersModal: false})} - isAdmin={isTeamAdmin || isSystemAdmin} - /> - ); - } - - let channelInviteModal; - if (this.state.showChannelInviteModal) { - channelInviteModal = ( - <ChannelInviteModal - onHide={() => this.setState({showChannelInviteModal: false})} - channel={this.props.channel} - /> - ); - } - - const channelMembersTooltip = ( - <Tooltip id='channelMembersTooltip'> - <FormattedMessage - id='channel_header.channelMembers' - defaultMessage='Members' - /> - </Tooltip> - ); - - return ( - <div className={'channel-header__icon wide ' + (this.state.showPopover ? 'active' : '')}> - <OverlayTrigger - trigger={['hover', 'focus']} - delayShow={Constants.OVERLAY_TIME_DELAY} - placement='bottom' - overlay={channelMembersTooltip} - > - <div - id='member_popover' - className='member-popover__trigger' - ref='member_popover_target' - onClick={(e) => { - this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover}); - this.props.actions.getProfilesInChannel(this.props.channel.id, 0); - }} - > - <span className='icon__text'>{countText}</span> - <span - className='icon icon__members' - dangerouslySetInnerHTML={{__html: membersIcon}} - aria-hidden='true' - /> - </div> - </OverlayTrigger> - <Overlay - rootClose={true} - onHide={this.closePopover} - show={this.state.showPopover} - target={() => this.state.popoverTarget} - placement='bottom' - > - <Popover - ref='memebersPopover' - className='member-list__popover' - id='member-list-popover' - > - <div className='more-modal__header'> - {title} - </div> - <div className='more-modal__body'> - <div className='more-modal__list'>{popoverHtml}</div> - </div> - {popoverButton} - </Popover> - </Overlay> - {channelMembersModal} - {teamMembersModal} - {channelInviteModal} - </div> - ); - } -} - |