scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 00:58:14 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

removed lodash.debounce, use onmouseleave instead

Browse source
This commit is contained in:
Ben Wheeler 2020-04-13 22:25:07 -04:00
parent 5805d8a0fe
commit d1366360f1
3 changed files with 14 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -99,7 +99,6 @@
"keymirror": "0.1.1",
"lodash.bindall": "4.4.0",
"lodash.clone": "3.0.3",
"lodash.debounce": "4.0.8",
"lodash.defaultsdeep": "3.10.0",
"lodash.isarray": "3.0.4",
"lodash.merge": "3.3.2",

15
src/components/info-button/info-button.jsx
View file

@ -2,7 +2,6 @@ const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
const MediaQuery = require('react-responsive').default;
const debounce = require('lodash.debounce');
const frameless = require('../../lib/frameless');
@ -13,7 +12,7 @@ class InfoButton extends React.Component {
super(props);
bindAll(this, [
'handleClick',
'handleMouseOut',
'handleMouseLeave',
'handleShowMessage',
'setButtonRef'
]);
@ -21,7 +20,6 @@ class InfoButton extends React.Component {
requireClickToClose: false, // default to closing on mouseout
visible: false
};
this.setVisibleWithDebounce = debounce(this.setVisible, 100);
}
componentWillMount () {
window.addEventListener('mousedown', this.handleClick, false);
@ -41,20 +39,17 @@ class InfoButton extends React.Component {
});
}
}
handleMouseOut () {
handleMouseLeave () {
if (this.state.visible && !this.state.requireClickToClose) {
this.setVisibleWithDebounce(false);
this.setState({visible: false});
}
}
handleShowMessage () {
this.setVisibleWithDebounce(true);
this.setState({visible: true});
}
setButtonRef (element) {
this.buttonRef = element;
}
setVisible (newVisibleState) {
this.setState({visible: newVisibleState});
}
render () {
const messageJsx = this.state.visible && (
<div className="info-button-message">
@ -66,7 +61,7 @@ class InfoButton extends React.Component {
<div
className="info-button"
ref={this.setButtonRef}
onMouseOut={this.handleMouseOut}
onMouseLeave={this.handleMouseLeave}
onMouseOver={this.handleShowMessage}
>
<MediaQuery minWidth={frameless.desktop}>

24
test/unit/components/info-button.test.jsx
View file

@ -68,8 +68,8 @@ describe('InfoButton', () => {
expect(component.find('div.info-button').exists()).toEqual(true);
expect(component.find('div.info-button-message').exists()).toEqual(true);
// mouseOut from info button
component.find('div.info-button').simulate('mouseOut');
// mouseLeave from info button
component.find('div.info-button').simulate('mouseLeave');
setTimeout(function () { // necessary because mouseover uses debounce
component.update();
expect(component.find('div.info-button-message').exists()).toEqual(true);
@ -117,7 +117,7 @@ describe('InfoButton', () => {
expect(component.find('div.info-button-message').exists()).toEqual(false);
});
test('after message is visible, mouseOut makes it vanish', done => {
test('after message is visible, mouseLeave makes it vanish', () => {
const component = mountWithIntl(
<InfoButton
message="Here is some info about something!"
@ -126,18 +126,12 @@ describe('InfoButton', () => {
// mouseOver info button
component.find('div.info-button').simulate('mouseOver');
setTimeout(function () { // necessary because mouseover uses debounce
component.update();
expect(component.find('div.info-button-message').exists()).toEqual(true);
component.update();
expect(component.find('div.info-button-message').exists()).toEqual(true);
// mouseOut away from info button
component.find('div.info-button').simulate('mouseOut');
setTimeout(function () { // necessary because mouseover uses debounce
component.update();
expect(component.find('div.info-button-message').exists()).toEqual(false);
done();
}, 500);
}, 500);
// mouseLeave away from info button
component.find('div.info-button').simulate('mouseLeave');
component.update();
expect(component.find('div.info-button-message').exists()).toEqual(false);
});
});