quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-13 04:28:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

remove js tab hover tracking and do it from css

Browse source
This commit is contained in:
Simon Ábris 2020-03-14 08:55:16 +01:00 committed by Benjamin Staneck
parent 6801460912
commit f0aabad2c4
1 changed files with 8 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
lib/components/tab.tsx
View file

@ -1,27 +1,11 @@
import React from 'react'; import React from 'react';
import {TabProps} from '../hyper'; import {TabProps} from '../hyper';
export default class Tab extends React.PureComponent<TabProps, {hovered: boolean}> { export default class Tab extends React.PureComponent<TabProps> {
constructor(props: TabProps) { constructor(props: TabProps) {
super(props); super(props);
this.state = {
hovered: false
};
} }
handleHover = () => {
this.setState({
hovered: true
});
};
handleBlur = () => {
this.setState({
hovered: false
});
};
handleClick = (event: React.MouseEvent) => { handleClick = (event: React.MouseEvent) => {
const isLeftClick = event.nativeEvent.which === 1; const isLeftClick = event.nativeEvent.which === 1;
@ -40,13 +24,10 @@ export default class Tab extends React.PureComponent<TabProps, {hovered: boolean
render() { render() {
const {isActive, isFirst, isLast, borderColor, hasActivity} = this.props; const {isActive, isFirst, isLast, borderColor, hasActivity} = this.props;
const {hovered} = this.state;
return ( return (
<React.Fragment> <React.Fragment>
<li <li
onMouseEnter={this.handleHover}
onMouseLeave={this.handleBlur}
onClick={this.props.onClick} onClick={this.props.onClick}
style={{borderColor}} style={{borderColor}}
className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${ className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
@ -63,7 +44,7 @@ export default class Tab extends React.PureComponent<TabProps, {hovered: boolean
{this.props.text} {this.props.text}
</span> </span>
</span> </span>
<i className={`tab_icon ${hovered ? 'tab_iconHovered' : ''}`} onClick={this.props.onClose}> <i className="tab_icon" onClick={this.props.onClose}>
<svg className="tab_shape"> <svg className="tab_shape">
<use xlinkHref="./renderer/assets/icons.svg#close-tab" /> <use xlinkHref="./renderer/assets/icons.svg#close-tab" />
</svg> </svg>
@ -88,6 +69,12 @@ export default class Tab extends React.PureComponent<TabProps, {hovered: boolean
color: #ccc; color: #ccc;
} }
.tab_tab:hover .tab_icon {
opacity: 1;
transform: none;
pointer-events: all;
}
.tab_first { .tab_first {
border-left-width: 0; border-left-width: 0;
padding-left: 1px; padding-left: 1px;
@ -160,12 +147,6 @@ export default class Tab extends React.PureComponent<TabProps, {hovered: boolean
color: #909090; color: #909090;
} }
.tab_iconHovered {
opacity: 1;
transform: none;
pointer-events: all;
}
.tab_shape { .tab_shape {
position: absolute; position: absolute;
left: 4px; left: 4px;