2016-11-01 07:46:13 -07:00
|
|
|
const React = require('react');
|
|
|
|
|
|
|
|
class TeamListItem extends React.Component {
|
2016-11-18 22:30:22 -08:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.handleTeamRemove = this.handleTeamRemove.bind(this);
|
|
|
|
this.handleTeamEditing = this.handleTeamEditing.bind(this);
|
|
|
|
}
|
|
|
|
|
2016-11-01 07:46:13 -07:00
|
|
|
handleTeamRemove() {
|
|
|
|
this.props.onTeamRemove();
|
|
|
|
}
|
|
|
|
handleTeamEditing() {
|
|
|
|
this.props.onTeamEditing();
|
|
|
|
}
|
|
|
|
render() {
|
|
|
|
var style = {
|
|
|
|
left: {
|
2017-01-29 04:40:20 -08:00
|
|
|
display: 'inline-block',
|
2017-02-03 04:38:28 -08:00
|
|
|
width: 'calc(100% - 100px)',
|
2017-01-29 04:40:20 -08:00
|
|
|
cursor: 'pointer'
|
2016-11-01 07:46:13 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
return (
|
|
|
|
<div className='teamListItem list-group-item'>
|
2017-01-29 04:40:20 -08:00
|
|
|
<div
|
|
|
|
style={style.left}
|
|
|
|
onClick={this.props.onTeamClick}
|
|
|
|
>
|
2016-11-01 07:46:13 -07:00
|
|
|
<h4 className='list-group-item-heading'>{ this.props.name }</h4>
|
|
|
|
<p className='list-group-item-text'>
|
|
|
|
{ this.props.url }
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className='pull-right'>
|
|
|
|
<a
|
|
|
|
href='#'
|
|
|
|
onClick={this.handleTeamEditing}
|
|
|
|
>{'Edit'}</a>
|
|
|
|
{' - '}
|
|
|
|
<a
|
|
|
|
href='#'
|
|
|
|
onClick={this.handleTeamRemove}
|
|
|
|
>{'Remove'}</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
TeamListItem.propTypes = {
|
|
|
|
name: React.PropTypes.string,
|
|
|
|
onTeamEditing: React.PropTypes.func,
|
|
|
|
onTeamRemove: React.PropTypes.func,
|
2017-01-29 04:40:20 -08:00
|
|
|
onTeamClick: React.PropTypes.func,
|
2016-11-01 07:46:13 -07:00
|
|
|
url: React.PropTypes.string
|
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = TeamListItem;
|