imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3169 from matrix-org/jryans/reactions-tooltip-tweaks

Browse source 
Improve interactive tooltip hover behaviour
This commit is contained in:
J. Ryan Stinnett 2019-07-02 18:28:09 +01:00 • committed by GitHub
commit cf8eeedcc7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/elements/InteractiveTooltip.js
View file

@ -74,6 +74,10 @@ export default class InteractiveTooltip extends React.Component {
this.renderTooltip();
}
componentWillUnmount() {
document.removeEventListener("mousemove", this.onMouseMove);
}
collectContentRect = (element) => {
// We don't need to clean up when unmounting, so ignore
if (!element) return;
@ -87,11 +91,7 @@ export default class InteractiveTooltip extends React.Component {
this.target = element;
}
onBackgroundClick = (ev) => {
this.hideTooltip();
}
onBackgroundMouseMove = (ev) => {
onMouseMove = (ev) => {
const { clientX: x, clientY: y } = ev;
const { contentRect } = this.state;
const targetRect = this.target.getBoundingClientRect();
@ -113,6 +113,7 @@ export default class InteractiveTooltip extends React.Component {
if (this.props.onVisibilityChange) {
this.props.onVisibilityChange(true);
}
document.addEventListener("mousemove", this.onMouseMove);
}
hideTooltip() {
@ -122,6 +123,7 @@ export default class InteractiveTooltip extends React.Component {
if (this.props.onVisibilityChange) {
this.props.onVisibilityChange(false);
}
document.removeEventListener("mousemove", this.onMouseMove);
}
renderTooltip() {
@ -168,10 +170,6 @@ export default class InteractiveTooltip extends React.Component {
}
const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}>
<div className="mx_ContextualMenu_background"
onMouseMove={this.onBackgroundMouseMove}
onClick={this.onBackgroundClick}
/>
<div className={menuClasses}
style={menuStyle}
ref={this.collectContentRect}