Add middle click to close tab functionality (#286)

This commit is contained in:
William 2016-07-22 01:33:10 +01:00 committed by Guillermo Rauch
parent b06f28ae10
commit 2e9ac60b2b

View file

@ -6,6 +6,7 @@ export default class Tab extends Component {
super(); super();
this.hover = this.hover.bind(this); this.hover = this.hover.bind(this);
this.blur = this.blur.bind(this); this.blur = this.blur.bind(this);
this.handleClick = this.handleClick.bind(this);
this.state = { this.state = {
hovered: false hovered: false
}; };
@ -19,6 +20,17 @@ export default class Tab extends Component {
this.setState({ hovered: false }); this.setState({ hovered: false });
} }
handleClick (event) {
const isLeftClick = event.nativeEvent.which === 1;
const isMiddleClick = event.nativeEvent.which === 2;
if (isLeftClick) {
this.props.isActive ? null : this.props.onSelect();
} else if (isMiddleClick) {
this.props.onClose();
}
}
template (css) { template (css) {
const { isActive, isFirst, isLast, borderColor, hasActivity } = this.props; const { isActive, isFirst, isLast, borderColor, hasActivity } = this.props;
const { hovered } = this.state; const { hovered } = this.state;
@ -41,7 +53,7 @@ export default class Tab extends Component {
isLast && 'textLast', isLast && 'textLast',
isActive && 'textActive' isActive && 'textActive'
) } ) }
onClick={ this.props.isActive ? null : this.props.onSelect }> onClick={ this.handleClick }>
<span className={ css('textInner') }> <span className={ css('textInner') }>
{ this.props.text } { this.props.text }
</span> </span>