Refactor to separate container/component

Also noticed that Delete aria label was not localized.

Author: chrisgarrity

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);

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';

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;

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;