PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix sticky hover state by listening for hover on the document

Browse source
This commit is contained in:
Travis Ralston 2019-03-06 16:27:29 -07:00
parent bd887e177f
commit 5b49584d79
1 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/views/rooms/EntityTile.js
View file

@ -92,17 +92,31 @@ const EntityTile = React.createClass({
};
},
componentWillMount: function() {
// We use a listener on the document so we can find out when the cursor leaves the element more
// safely. This is a workaround for https://github.com/facebook/react/issues/4492 and
// https://github.com/vector-im/riot-web/issues/1997
document.addEventListener("mouseover", this.mouseEnter);
},
componentWillUnmount: function() {
document.removeEventListener("mouseover", this.mouseEnter);
},
shouldComponentUpdate: function(nextProps, nextState) {
if (this.state.hover !== nextState.hover) return true;
return this.props.shouldComponentUpdate(nextProps, nextState);
},
mouseEnter: function(e) {
this.setState({ 'hover': true });
},
mouseEnter: function(ev) {
let targetHover = false;
if (this.container && (this.container === ev.target || this.container.contains(ev.target))) {
targetHover = true;
}
mouseLeave: function(e) {
this.setState({ 'hover': false });
if (targetHover !== this.state.hover) {
this.setState({hover: targetHover});
}
},
render: function() {
@ -183,10 +197,10 @@ const EntityTile = React.createClass({
const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
// The wrapping div is required to make the magic mouse listener work, for some reason.
return (
<AccessibleButton className={mainClassName} title={this.props.title}
onClick={this.props.onClick} onMouseEnter={this.mouseEnter}
onMouseLeave={this.mouseLeave}>
<div ref={(c) => this.container = c} >
<AccessibleButton className={mainClassName} title={this.props.title} onClick={this.props.onClick}>
<div className="mx_EntityTile_avatar">
{ av }
{ power }
@ -194,6 +208,7 @@ const EntityTile = React.createClass({
{ nameEl }
{ inviteButton }
</AccessibleButton>
</div>
);
},
});