From c484ee5962d616d00f0512926278c890be7a05e5 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 17 Dec 2018 16:59:13 -0500
Subject: [PATCH] removed two more event handlers from library-item component,
moved them to container
---
src/components/library-item/library-item.jsx | 34 ++++----------------
src/components/library/library.jsx | 4 +--
src/containers/library-item.jsx | 17 +++++++++-
test/integration/costumes.test.js | 2 ++
4 files changed, 27 insertions(+), 30 deletions(-)
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index c9ba6ea55..110496529 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -1,4 +1,3 @@
-import bindAll from 'lodash.bindall';
import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
@@ -11,25 +10,6 @@ import bluetoothIconURL from './bluetooth.svg';
import internetConnectionIconURL from './internet-connection.svg';
class LibraryItemComponent extends React.PureComponent {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleClick',
- 'handleKeyPress'
- ]);
- }
- handleClick (e) {
- if (!this.props.disabled) {
- this.props.onSelect(this.props.id);
- }
- e.preventDefault();
- }
- handleKeyPress (e) {
- if (e.key === ' ' || e.key === 'Enter') {
- e.preventDefault();
- this.props.onSelect(this.props.id);
- }
- }
render () {
return this.props.featured ? (
<div
@@ -131,9 +111,9 @@ class LibraryItemComponent extends React.PureComponent {
role="button"
tabIndex="0"
onBlur={this.props.onBlur}
- onClick={this.handleClick}
+ onClick={this.props.onClick}
onFocus={this.props.onFocus}
- onKeyPress={this.handleKeyPress}
+ onKeyPress={this.props.onKeyPress}
onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
>
@@ -164,18 +144,18 @@ LibraryItemComponent.propTypes = {
featured: PropTypes.bool,
hidden: PropTypes.bool,
iconURL: PropTypes.string,
- id: PropTypes.number.isRequired,
insetIconURL: PropTypes.string,
internetConnectionRequired: PropTypes.bool,
name: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node
]),
- onBlur: PropTypes.func,
- onFocus: PropTypes.func,
+ onBlur: PropTypes.func.isRequired,
+ onClick: PropTypes.func.isRequired,
+ onFocus: PropTypes.func.isRequired,
+ onKeyPress: PropTypes.func.isRequired,
onMouseEnter: PropTypes.func.isRequired,
- onMouseLeave: PropTypes.func.isRequired,
- onSelect: PropTypes.func.isRequired
+ onMouseLeave: PropTypes.func.isRequired
};
LibraryItemComponent.defaultProps = {
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 9e43ddd6a..8073b0f49 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -68,10 +68,10 @@ class LibraryComponent extends React.Component {
selectedTag: tag.toLowerCase()
});
}
- handleMouseEnter (id) { // no longer used for sprite costume switching, only for other libraries
+ handleMouseEnter (id) {
if (this.props.onItemMouseEnter) this.props.onItemMouseEnter(this.getFilteredData()[id]);
}
- handleMouseLeave (id) { // no longer used for sprite costume switching, only for other libraries
+ handleMouseLeave (id) {
if (this.props.onItemMouseLeave) this.props.onItemMouseLeave(this.getFilteredData()[id]);
}
handleFilterChange (event) {
diff --git a/src/containers/library-item.jsx b/src/containers/library-item.jsx
index 7f81b4389..6177b916f 100644
--- a/src/containers/library-item.jsx
+++ b/src/containers/library-item.jsx
@@ -10,7 +10,9 @@ class LibraryItem extends React.PureComponent {
super(props);
bindAll(this, [
'handleBlur',
+ 'handleClick',
'handleFocus',
+ 'handleKeyPress',
'handleMouseEnter',
'handleMouseLeave',
'rotateIcon',
@@ -28,9 +30,21 @@ class LibraryItem extends React.PureComponent {
handleBlur (id) {
this.handleMouseLeave(id);
}
+ handleClick (e) {
+ if (!this.props.disabled) {
+ this.props.onSelect(this.props.id);
+ }
+ e.preventDefault();
+ }
handleFocus (id) {
this.handleMouseEnter(id);
}
+ handleKeyPress (e) {
+ if (e.key === ' ' || e.key === 'Enter') {
+ e.preventDefault();
+ this.props.onSelect(this.props.id);
+ }
+ }
handleMouseEnter () {
this.props.onMouseEnter(this.props.id);
if (this.props.icons && this.props.icons.length) {
@@ -92,10 +106,11 @@ class LibraryItem extends React.PureComponent {
internetConnectionRequired={this.props.internetConnectionRequired}
name={this.props.name}
onBlur={this.handleBlur}
+ onClick={this.handleClick}
onFocus={this.handleFocus}
+ onKeyPress={this.handleKeyPress}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
- onSelect={this.props.onSelect}
/>
);
}
diff --git a/test/integration/costumes.test.js b/test/integration/costumes.test.js
index 5181c429a..ad55ce472 100644
--- a/test/integration/costumes.test.js
+++ b/test/integration/costumes.test.js
@@ -33,7 +33,9 @@ describe('Working with costumes', () => {
const el = await findByXpath("//input[@placeholder='Search']");
await el.sendKeys('abb');
await clickText('Abby-a'); // Should close the modal, then click the costumes in the selector
+ await new Promise(resolve => setTimeout(resolve, 5000));
await findByXpath("//input[@value='Abby-a']"); // Should show editor for new costume
+ await new Promise(resolve => setTimeout(resolve, 5000));
const logs = await getLogs();
await expect(logs).toEqual([]);
});
--
GitLab