From 3701a4fb44079d0f3a3d3828d4402afa328ce836 Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Wed, 31 Jul 2019 16:14:42 -0400
Subject: [PATCH] Refactor to separate container/component
Also noticed that Delete aria label was not localized.
---
.../delete-button/delete-button.jsx | 93 +++++++++----------
.../sprite-selector-item.jsx | 2 +-
src/containers/delete-button.jsx | 52 +++++++++++
.../components/sprite-selector-item.test.jsx | 2 +-
4 files changed, 97 insertions(+), 52 deletions(-)
create mode 100644 src/containers/delete-button.jsx
diff --git a/src/components/delete-button/delete-button.jsx b/src/components/delete-button/delete-button.jsx
index 62dfcc08a..c4618d43f 100644
--- a/src/components/delete-button/delete-button.jsx
+++ b/src/components/delete-button/delete-button.jsx
@@ -1,67 +1,60 @@
import PropTypes from 'prop-types';
import React from 'react';
-import bindAll from 'lodash.bindall';
import classNames from 'classnames';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
import styles from './delete-button.css';
import deleteIcon from './icon--delete.svg';
-class DeleteButton extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleKeyPress',
- 'setRef'
- ]);
+const messages = defineMessages({
+ delete: {
+ id: 'gui.deleteButton.delete',
+ description: 'Title of the button to delete a sprite, costume or sound',
+ defaultMessage: 'Delete'
}
- componentDidMount () {
- document.addEventListener('keydown', this.handleKeyPress);
- }
- componentWillUnmount () {
- document.removeEventListener('keydown', this.handleKeyPress);
- }
- setRef (ref) {
- this.ref = ref;
- }
- handleKeyPress (event) {
- if (this.ref === event.currentTarget.activeElement && (event.key === 'Enter' || event.key === ' ')) {
- this.props.onClick(event);
- event.preventDefault();
- }
- }
- render () {
- return (
- <div
- aria-label="Delete"
- className={classNames(
- styles.deleteButton,
- this.props.className
- )}
- ref={this.setRef}
- role="button"
- tabIndex={this.props.tabIndex}
- onClick={this.props.onClick}
- >
- <div className={styles.deleteButtonVisible}>
- <img
- className={styles.deleteIcon}
- draggable={false}
- src={deleteIcon}
- />
- </div>
- </div>
- );
- }
-}
+});
+
+const DeleteButtonComponent = ({
+ className,
+ intl,
+ onClick,
+ setRef,
+ tabIndex,
+ ...props
+}) => (
+ <div
+ aria-label={intl.formatMessage(messages.delete)}
+ className={classNames(
+ styles.deleteButton,
+ className
+ )}
+ ref={setRef}
+ role="button"
+ tabIndex={tabIndex}
+ onClick={onClick}
+ {...props}
+ >
+ <div className={styles.deleteButtonVisible}>
+ <img
+ className={styles.deleteIcon}
+ draggable={false}
+ src={deleteIcon}
+ />
+ </div>
+ </div>
+);
+
-DeleteButton.propTypes = {
+DeleteButtonComponent.propTypes = {
className: PropTypes.string,
+ intl: intlShape,
onClick: PropTypes.func.isRequired,
+ setRef: PropTypes.func.isRequired,
tabIndex: PropTypes.number
};
-DeleteButton.defaultProps = {
+DeleteButtonComponent.defaultProps = {
tabIndex: 0
};
-export default DeleteButton;
+export default injectIntl(DeleteButtonComponent);
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index 458df186f..e3ed71735 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
-import DeleteButton from '../delete-button/delete-button.jsx';
+import DeleteButton from '../../containers/delete-button.jsx';
import styles from './sprite-selector-item.css';
import {ContextMenuTrigger} from 'react-contextmenu';
import {DangerousMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
diff --git a/src/containers/delete-button.jsx b/src/containers/delete-button.jsx
new file mode 100644
index 000000000..600fbcdee
--- /dev/null
+++ b/src/containers/delete-button.jsx
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+
+import DeleteButtonComponent from '../components/delete-button/delete-button.jsx';
+
+class DeleteButton extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleKeyPress',
+ 'setRef'
+ ]);
+ }
+ componentDidMount () {
+ document.addEventListener('keydown', this.handleKeyPress);
+ }
+ componentWillUnmount () {
+ document.removeEventListener('keydown', this.handleKeyPress);
+ }
+ setRef (ref) {
+ this.ref = ref;
+ }
+ handleKeyPress (event) {
+ if (this.ref === event.currentTarget.activeElement && (event.key === 'Enter' || event.key === ' ')) {
+ this.props.onClick(event);
+ event.preventDefault();
+ }
+ }
+ render () {
+ return (
+ <DeleteButtonComponent
+ className={this.props.className}
+ setRef={this.setRef}
+ tabIndex={this.props.tabIndex}
+ onClick={this.props.onClick}
+ />
+ );
+ }
+}
+
+DeleteButton.propTypes = {
+ className: PropTypes.string,
+ onClick: PropTypes.func.isRequired,
+ tabIndex: PropTypes.number
+};
+
+DeleteButton.defaultProps = {
+ tabIndex: 0
+};
+
+export default DeleteButton;
diff --git a/test/unit/components/sprite-selector-item.test.jsx b/test/unit/components/sprite-selector-item.test.jsx
index fb103b4ef..b274d967b 100644
--- a/test/unit/components/sprite-selector-item.test.jsx
+++ b/test/unit/components/sprite-selector-item.test.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import {mountWithIntl, shallowWithIntl, componentWithIntl} from '../../helpers/intl-helpers.jsx';
import SpriteSelectorItemComponent from '../../../src/components/sprite-selector-item/sprite-selector-item';
-import DeleteButton from '../../../src/components/delete-button/delete-button';
+import DeleteButton from '../../../src/containers/delete-button.jsx';
describe('SpriteSelectorItemComponent', () => {
let className;
--
GitLab