-
Notifications
You must be signed in to change notification settings - Fork 181
/
disable-hover-hoc.tsx
52 lines (43 loc) · 1.46 KB
/
disable-hover-hoc.tsx
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
import React, {PureComponent, ComponentType} from 'react';
export interface DisableHoverAddProps {
disabledHover: boolean
}
export type DisableHoverProps<P extends DisableHoverAddProps> = Omit<P, keyof DisableHoverAddProps>
export default function disableHoverHOC<P extends DisableHoverAddProps>(
ComposedComponent: ComponentType<P>
) {
return class DisableHover extends PureComponent<DisableHoverProps<P>> {
static propTypes = ComposedComponent.propTypes;
static defaultProps = ComposedComponent.defaultProps;
state = {
disabledHover: false
};
componentDidMount() {
document.addEventListener('mousemove', this.onMouseMove);
document.addEventListener('keydown', this.onKeyDown, true);
}
componentWillUnmount() {
document.removeEventListener('mousemove', this.onMouseMove);
document.removeEventListener('keydown', this.onKeyDown, true);
}
onMouseMove = () => {
if (this.state.disabledHover) {
this.setState({disabledHover: false});
}
};
onKeyDown = (e: KeyboardEvent) => {
const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
this.setState({disabledHover: true});
}
};
render() {
return (
<ComposedComponent
{...this.props as P}
disabledHover={this.state.disabledHover}
/>
);
}
};
}