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
|
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import Constants from 'utils/constants.jsx';
import {trackEvent} from 'actions/diagnostics_actions.jsx';
import {switchTeams} from 'actions/team_actions.jsx';
import React from 'react';
import {Link} from 'react-router/es6';
import {Tooltip, OverlayTrigger} from 'react-bootstrap';
export default class TeamButton extends React.Component {
constructor(props) {
super(props);
this.handleSwitch = this.handleSwitch.bind(this);
this.handleDisabled = this.handleDisabled.bind(this);
}
handleSwitch(e) {
e.preventDefault();
trackEvent('ui', 'ui_team_sidebar_switch_team');
switchTeams(this.props.url);
}
handleDisabled(e) {
e.preventDefault();
}
render() {
let teamClass = this.props.active ? 'active' : '';
const btnClass = this.props.btnClass;
const disabled = this.props.disabled ? 'team-disabled' : '';
const handleClick = (this.props.active || this.props.disabled) ? this.handleDisabled : this.handleSwitch;
let badge;
if (!teamClass) {
teamClass = this.props.unread ? 'unread' : '';
if (this.props.mentions) {
badge = (
<span className='badge pull-right small'>{this.props.mentions}</span>
);
}
}
let btn;
let content = this.props.content;
if (!content) {
content = (
<div className='team-btn__initials'>
{this.props.displayName.substring(0, 2)}
<div className='team-btn__content'>
{this.props.displayName}
</div>
</div>
);
}
if (this.props.isMobile) {
btn = (
<div className={'team-btn ' + btnClass}>
{badge}
{content}
</div>
);
} else {
btn = (
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement={this.props.placement}
overlay={
<Tooltip id={`tooltip-${this.props.url}`}>
{this.props.tip}
</Tooltip>
}
>
<div className={'team-btn ' + btnClass}>
{badge}
{content}
</div>
</OverlayTrigger>
);
}
return (
<div
className={`team-container ${teamClass}`}
>
<Link
className={disabled}
to={this.props.url}
onClick={handleClick}
>
{btn}
</Link>
</div>
);
}
}
TeamButton.defaultProps = {
btnClass: '',
tip: '',
placement: 'right',
active: false,
disabled: false,
unread: false,
mentions: 0
};
TeamButton.propTypes = {
btnClass: React.PropTypes.string,
url: React.PropTypes.string.isRequired,
displayName: React.PropTypes.string,
content: React.PropTypes.node,
tip: React.PropTypes.node.isRequired,
active: React.PropTypes.bool,
disabled: React.PropTypes.bool,
isMobile: React.PropTypes.bool,
unread: React.PropTypes.bool,
mentions: React.PropTypes.number,
placement: React.PropTypes.oneOf(['left', 'right', 'top', 'bottom'])
};
|
