popover_list_members.jsx 5.66 KB
Newer Older
1
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
2 3
// See License.txt for license information.

4 5 6 7
import UserStore from 'stores/user_store.jsx';
import {Popover, Overlay} from 'react-bootstrap';
import * as Utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
8

9
import ChannelStore from 'stores/channel_store.jsx';
10

11 12 13
import {FormattedMessage} from 'react-intl';

import React from 'react';
14

15
export default class PopoverListMembers extends React.Component {
16 17 18 19 20 21 22
    constructor(props) {
        super(props);

        this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
        this.closePopover = this.closePopover.bind(this);
    }

23 24 25 26
    componentWillMount() {
        this.setState({showPopover: false});
    }

27 28 29
    handleShowDirectChannel(teammate, e) {
        e.preventDefault();

30 31 32 33 34
        Utils.openDirectChannelToUser(
            teammate,
            (channel, channelAlreadyExisted) => {
                Utils.switchChannel(channel);
                if (channelAlreadyExisted) {
35 36
                    this.closePopover();
                }
37 38 39 40 41
            },
            () => {
                this.closePopover();
            }
        );
42 43 44
    }

    closePopover() {
45
        this.setState({showPopover: false});
46 47
    }

48
    render() {
49
        const popoverHtml = [];
50
        const members = this.props.members;
51
        const teamMembers = UserStore.getProfilesUsernameMap();
52 53
        const currentUserId = UserStore.getCurrentId();
        const ch = ChannelStore.getCurrent();
54

55
        if (members && teamMembers) {
56
            members.sort((a, b) => {
57 58 59 60
                const aName = Utils.displayUsername(a.id);
                const bName = Utils.displayUsername(b.id);

                return aName.localeCompare(bName);
61 62
            });

63
            members.forEach((m, i) => {
64 65 66
                let button = '';
                if (currentUserId !== m.id && ch.type !== 'D') {
                    button = (
Asaad Mahmood's avatar
Asaad Mahmood committed
67 68 69
                        <a
                            href='#'
                            className='btn-message'
70 71
                            onClick={(e) => this.handleShowDirectChannel(m, e)}
                        >
72 73 74 75
                            <FormattedMessage
                                id='members_popover.msg'
                                defaultMessage='Message'
                            />
Asaad Mahmood's avatar
Asaad Mahmood committed
76
                        </a>
77 78 79
                    );
                }

80 81 82 83 84
                let name = '';
                if (teamMembers[m.username]) {
                    name = Utils.displayUsername(teamMembers[m.username].id);
                }

85
                if (name) {
86 87
                    popoverHtml.push(
                        <div
88
                            className='more-modal__row'
89 90
                            key={'popover-member-' + i}
                        >
91 92

                            <img
93
                                className='more-modal__image'
Asaad Mahmood's avatar
Asaad Mahmood committed
94 95
                                width='26px'
                                height='26px'
96
                                src={`/api/v1/users/${m.id}/image?time=${m.update_at}`}
97
                            />
98
                            <div className='more-modal__details'>
99
                                <div
100
                                    className='more-modal__name'
101
                                >
102
                                    {name}
103 104 105
                                </div>
                            </div>
                            <div
106
                                className='more-modal__actions'
107 108 109
                            >
                                {button}
                            </div>
110 111
                        </div>
                    );
112
                }
113
            });
114
        }
115

116 117 118 119 120 121 122 123
        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;
        }

124 125
        if (count > Constants.MAX_CHANNEL_POPOVER_COUNT) {
            countText = Constants.MAX_CHANNEL_POPOVER_COUNT + '+';
126 127
        } else if (count > 0) {
            countText = count.toString();
128 129
        }

130 131 132 133 134 135
        const title = (
            <FormattedMessage
                id='members_popover.title'
                defaultMessage='Members'
            />
        );
136
        return (
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157
            <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'
                >
158
                    <Popover
Asaad Mahmood's avatar
Asaad Mahmood committed
159
                        ref='memebersPopover'
160
                        title={title}
161
                        className='member-list__popover'
162 163
                        id='member-list-popover'
                    >
164
                        <div className='more-modal__list'>{popoverHtml}</div>
165
                    </Popover>
166
                </Overlay>
167 168 169 170 171 172 173
            </div>
        );
    }
}

PopoverListMembers.propTypes = {
    members: React.PropTypes.array.isRequired,
174
    memberCount: React.PropTypes.number,
175 176
    channelId: React.PropTypes.string.isRequired
};