2016-10-30 08:40:34 -07:00
|
|
|
const React = require('react');
|
2016-12-25 07:44:44 -08:00
|
|
|
const {Nav, NavItem, Button} = require('react-bootstrap');
|
2016-10-30 08:40:34 -07:00
|
|
|
|
|
|
|
class TabBar extends React.Component {
|
|
|
|
render() {
|
|
|
|
var self = this;
|
|
|
|
var tabs = this.props.teams.map((team, index) => {
|
|
|
|
var unreadCount = 0;
|
|
|
|
var badgeStyle = {
|
|
|
|
background: '#FF1744',
|
|
|
|
float: 'right',
|
|
|
|
color: 'white',
|
|
|
|
minWidth: '19px',
|
|
|
|
fontSize: '12px',
|
|
|
|
textAlign: 'center',
|
|
|
|
lineHeight: '20px',
|
|
|
|
height: '19px',
|
|
|
|
marginLeft: '5px',
|
|
|
|
borderRadius: '50%'
|
|
|
|
};
|
|
|
|
|
|
|
|
if (self.props.unreadCounts[index] > 0) {
|
|
|
|
unreadCount = self.props.unreadCounts[index];
|
|
|
|
}
|
|
|
|
if (self.props.unreadAtActive[index]) {
|
|
|
|
unreadCount += 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
var mentionCount = 0;
|
|
|
|
if (self.props.mentionCounts[index] > 0) {
|
|
|
|
mentionCount = self.props.mentionCounts[index];
|
|
|
|
}
|
|
|
|
if (self.props.mentionAtActiveCounts[index] > 0) {
|
|
|
|
mentionCount += self.props.mentionAtActiveCounts[index];
|
|
|
|
}
|
|
|
|
|
|
|
|
var badgeDiv;
|
|
|
|
if (mentionCount !== 0) {
|
|
|
|
badgeDiv = (
|
|
|
|
<div style={badgeStyle}>
|
|
|
|
{mentionCount}
|
|
|
|
</div>);
|
|
|
|
}
|
|
|
|
var id = 'teamTabItem' + index;
|
|
|
|
if (unreadCount === 0) {
|
|
|
|
return (
|
|
|
|
<NavItem
|
|
|
|
className='teamTabItem'
|
|
|
|
key={id}
|
|
|
|
id={id}
|
|
|
|
eventKey={index}
|
|
|
|
>
|
|
|
|
{ team.name }
|
|
|
|
{ ' ' }
|
|
|
|
{ badgeDiv }
|
|
|
|
</NavItem>);
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<NavItem
|
|
|
|
className='teamTabItem'
|
|
|
|
key={id}
|
|
|
|
id={id}
|
|
|
|
eventKey={index}
|
|
|
|
>
|
|
|
|
<b>{ team.name }</b>
|
|
|
|
{ ' ' }
|
|
|
|
{ badgeDiv }
|
|
|
|
</NavItem>);
|
|
|
|
});
|
|
|
|
return (
|
|
|
|
<Nav
|
|
|
|
id={this.props.id}
|
|
|
|
bsStyle='tabs'
|
|
|
|
activeKey={this.props.activeKey}
|
|
|
|
onSelect={this.props.onSelect}
|
|
|
|
>
|
|
|
|
{ tabs }
|
2016-12-25 07:44:44 -08:00
|
|
|
{ this.renderAddTeamButton() }
|
2016-10-30 08:40:34 -07:00
|
|
|
</Nav>
|
|
|
|
);
|
|
|
|
}
|
2016-12-25 07:44:44 -08:00
|
|
|
|
|
|
|
renderAddTeamButton() {
|
|
|
|
return (
|
|
|
|
<Button
|
2017-01-16 14:51:36 -08:00
|
|
|
id='tabBarAddNewTeam'
|
2017-01-30 13:16:16 -08:00
|
|
|
onClick={this.props.onAddServer}
|
2016-12-25 07:44:44 -08:00
|
|
|
bsStyle='tabButton'
|
|
|
|
>
|
|
|
|
{'+'}
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
2016-10-30 08:40:34 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
TabBar.propTypes = {
|
|
|
|
activeKey: React.PropTypes.number,
|
|
|
|
id: React.PropTypes.string,
|
|
|
|
onSelect: React.PropTypes.func,
|
2016-12-25 07:44:44 -08:00
|
|
|
teams: React.PropTypes.array,
|
2017-01-30 13:16:16 -08:00
|
|
|
onAddServer: React.PropTypes.func
|
2016-10-30 08:40:34 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = TabBar;
|