scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-29 18:46:20 -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", "keymirror": "0.1.1",
"lodash.bindall": "4.4.0", "lodash.bindall": "4.4.0",
"lodash.clone": "3.0.3", "lodash.clone": "3.0.3",
"lodash.debounce": "4.0.8",
"lodash.defaultsdeep": "3.10.0", "lodash.defaultsdeep": "3.10.0",
"lodash.isarray": "3.0.4", "lodash.isarray": "3.0.4",
"lodash.merge": "3.3.2", "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 PropTypes = require('prop-types');
const React = require('react'); const React = require('react');
const MediaQuery = require('react-responsive').default; const MediaQuery = require('react-responsive').default;
const debounce = require('lodash.debounce');
const frameless = require('../../lib/frameless'); const frameless = require('../../lib/frameless');
@ -13,7 +12,7 @@ class InfoButton extends React.Component {
super(props); super(props);
bindAll(this, [ bindAll(this, [
'handleClick', 'handleClick',
'handleMouseOut', 'handleMouseLeave',
'handleShowMessage', 'handleShowMessage',
'setButtonRef' 'setButtonRef'
]); ]);
@ -21,7 +20,6 @@ class InfoButton extends React.Component {
requireClickToClose: false, // default to closing on mouseout requireClickToClose: false, // default to closing on mouseout
visible: false visible: false
}; };
this.setVisibleWithDebounce = debounce(this.setVisible, 100);
} }
componentWillMount () { componentWillMount () {
window.addEventListener('mousedown', this.handleClick, false); window.addEventListener('mousedown', this.handleClick, false);
@ -41,20 +39,17 @@ class InfoButton extends React.Component {
}); });
} }
} }
handleMouseOut () { handleMouseLeave () {
if (this.state.visible && !this.state.requireClickToClose) { if (this.state.visible && !this.state.requireClickToClose) {
this.setVisibleWithDebounce(false); this.setState({visible: false});
} }
} }
handleShowMessage () { handleShowMessage () {
this.setVisibleWithDebounce(true); this.setState({visible: true});
} }
setButtonRef (element) { setButtonRef (element) {
this.buttonRef = element; this.buttonRef = element;
} }
setVisible (newVisibleState) {
this.setState({visible: newVisibleState});
}
render () { render () {
const messageJsx = this.state.visible && ( const messageJsx = this.state.visible && (
<div className="info-button-message"> <div className="info-button-message">
@ -66,7 +61,7 @@ class InfoButton extends React.Component {
<div <div
className="info-button" className="info-button"
ref={this.setButtonRef} ref={this.setButtonRef}
onMouseOut={this.handleMouseOut} onMouseLeave={this.handleMouseLeave}
onMouseOver={this.handleShowMessage} onMouseOver={this.handleShowMessage}
> >
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.desktop}>

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