blob: 8e14fa5fab91ce392ee1f1ba815b36e648a57b64 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import * as Utils from 'utils/utils.jsx';
import UserStore from 'stores/user_store.jsx';
import React from 'react';
import {Popover, OverlayTrigger} from 'react-bootstrap';
export default class ProfilePicture extends React.Component {
shouldComponentUpdate(nextProps) {
if (nextProps.src !== this.props.src) {
return true;
}
if (nextProps.status !== this.props.status) {
return true;
}
if (nextProps.width !== this.props.width) {
return true;
}
if (nextProps.height !== this.props.height) {
return true;
}
return false;
}
render() {
let email = '';
let statusClass = '';
if (this.props.status) {
statusClass = 'status-' + this.props.status;
}
if (this.props.user) {
email = this.props.user.email;
var dataContent = [];
dataContent.push(
<img
className='user-popover__image'
src={this.props.src}
height='128'
width='128'
key='user-popover-image'
/>
);
const fullname = Utils.getFullName(this.props.user);
if (fullname) {
dataContent.push(
<div
data-toggle='tooltip'
title={fullname}
key='user-popover-fullname'
>
<p
className='text-nowrap'
>
{fullname}
</p>
</div>
);
}
if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user.id === UserStore.getCurrentId()) {
dataContent.push(
<div
data-toggle='tooltip'
title={email}
key='user-popover-email'
>
<a
href={'mailto:' + email}
className='text-nowrap text-lowercase user-popover__email'
>
{email}
</a>
</div>
);
}
return (
<OverlayTrigger
trigger='click'
placement='right'
rootClose={true}
overlay={
<Popover
title={'@' + this.props.user.username}
id='user-profile-popover'
>
{dataContent}
</Popover>
}
>
<span className={`status-wrapper ${statusClass}`}>
<img
className='more-modal__image'
width={this.props.width}
height={this.props.width}
src={this.props.src}
/>
</span>
</OverlayTrigger>
);
}
return (
<span className={`status-wrapper ${statusClass}`}>
<img
className='more-modal__image'
width={this.props.width}
height={this.props.width}
src={this.props.src}
/>
</span>
);
}
}
ProfilePicture.defaultProps = {
width: '36',
height: '36'
};
ProfilePicture.propTypes = {
src: React.PropTypes.string.isRequired,
status: React.PropTypes.string,
width: React.PropTypes.string,
height: React.PropTypes.string,
user: React.PropTypes.object
};
|
