Move event processing out of LibraryItemComponent

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,41 +10,6 @@ import bluetoothIconURL from './bluetooth.svg';
 import internetConnectionIconURL from './internet-connection.svg';
 
 class LibraryItemComponent extends React.PureComponent {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleBlur',
-            'handleClick',
-            'handleFocus',
-            'handleKeyPress',
-            'handleMouseEnter',
-            'handleMouseLeave'
-        ]);
-    }
-    handleBlur () {
-        this.props.onBlur(this.props.id);
-    }
-    handleFocus () {
-        this.props.onFocus(this.props.id);
-    }
-    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);
-        }
-    }
-    handleMouseEnter () {
-        this.props.onMouseEnter(this.props.id);
-    }
-    handleMouseLeave () {
-        this.props.onMouseLeave(this.props.id);
-    }
     render () {
         return this.props.featured ? (
             <div
@@ -58,7 +22,7 @@ class LibraryItemComponent extends React.PureComponent {
                     this.props.extensionId ? styles.libraryItemExtension : null,
                     this.props.hidden ? styles.hidden : null
                 )}
-                onClick={this.handleClick}
+                onClick={this.props.onClick}
             >
                 <div className={styles.featuredImageContainer}>
                     {this.props.disabled ? (
@@ -146,12 +110,12 @@ class LibraryItemComponent extends React.PureComponent {
                 )}
                 role="button"
                 tabIndex="0"
-                onBlur={this.handleBlur}
-                onClick={this.handleClick}
-                onFocus={this.handleFocus}
-                onKeyPress={this.handleKeyPress}
-                onMouseEnter={this.handleMouseEnter}
-                onMouseLeave={this.handleMouseLeave}
+                onBlur={this.props.onBlur}
+                onClick={this.props.onClick}
+                onFocus={this.props.onFocus}
+                onKeyPress={this.props.onKeyPress}
+                onMouseEnter={this.props.onMouseEnter}
+                onMouseLeave={this.props.onMouseLeave}
             >
                 {/* Layers of wrapping is to prevent layout thrashing on animation */}
                 <Box className={styles.libraryItemImageContainerWrapper}>
@@ -180,7 +144,6 @@ LibraryItemComponent.propTypes = {
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
     iconURI: PropTypes.string,
-    id: PropTypes.number.isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     name: PropTypes.oneOfType([
@@ -188,10 +151,11 @@ LibraryItemComponent.propTypes = {
         PropTypes.node
     ]),
     onBlur: PropTypes.func,
+    onClick: PropTypes.func,
     onFocus: PropTypes.func,
-    onMouseEnter: PropTypes.func.isRequired,
-    onMouseLeave: PropTypes.func.isRequired,
-    onSelect: PropTypes.func.isRequired
+    onKeyPress: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func
 };
 
 LibraryItemComponent.defaultProps = {

src/containers/library-item.jsx

@@ -1,3 +1,5 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import LibraryItemComponent from '../components/library-item/library-item.jsx';
@@ -23,6 +25,14 @@ const getAssetTypeForExtension = function (extension) {
 class LibraryItem extends React.PureComponent {
     constructor (props) {
         super(props);
+        bindAll(this, [
+            'handleBlur',
+            'handleClick',
+            'handleFocus',
+            'handleKeyPress',
+            'handleMouseEnter',
+            'handleMouseLeave'
+        ]);
         this.state = Object.assign(this.state || {}, {
             iconURI: props.iconURL // may be undefined if we're using iconMD5 instead
         });
@@ -40,10 +50,50 @@ class LibraryItem extends React.PureComponent {
                 });
         }
     }
+    handleBlur () {
+        this.props.onBlur(this.props.id);
+    }
+    handleFocus () {
+        this.props.onFocus(this.props.id);
+    }
+    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);
+        }
+    }
+    handleMouseEnter () {
+        this.props.onMouseEnter(this.props.id);
+    }
+    handleMouseLeave () {
+        this.props.onMouseLeave(this.props.id);
+    }
     render () {
-        const {iconMD5: _iconMD5, iconURL: _iconURL, ...childProps} = this.props;
+        const {
+            iconMD5: _iconMD5,
+            iconURL: _iconURL,
+            id: _id,
+            onBlur: _onBlur,
+            onFocus: _onFocus,
+            onMouseEnter: _onMouseEnter,
+            onMouseLeave: _onMouseLeave,
+            onSelect: _onSelect,
+            ...childProps
+        } = this.props;
         return (<LibraryItemComponent
             iconURI={this.state.iconURI}
+            onBlur={this.props.onBlur && this.handleBlur}
+            onClick={this.handleClick}
+            onFocus={this.props.onFocus && this.handleFocus}
+            onKeyPress={this.handleKeyPress}
+            onMouseEnter={this.props.onMouseEnter && this.handleMouseEnter}
+            onMouseLeave={this.props.onMouseLeave && this.handleMouseLeave}
             {...childProps}
         />);
     }
@@ -61,13 +111,20 @@ LibraryItem.requireUrlOrMD5 = function (props) {
 
 LibraryItem.propTypes = Object.assign({},
     (() => {
-        // copy all props EXCEPT iconURI from LibraryItemComponent
-        const {iconURI: _iconURI, ...otherProps} = LibraryItemComponent.propTypes;
-        return otherProps;
+        // copy all prop types EXCEPT these from LibraryItemComponent
+        const {
+            iconURI: _iconURI,
+            onClick: _onClick,
+            onKeyPress: _onKeyPress,
+            ...otherPropTypes
+        } = LibraryItemComponent.propTypes;
+        return otherPropTypes;
     })(),
     {
+        id: PropTypes.number.isRequired,
         iconMD5: LibraryItem.requireUrlOrMD5,
-        iconURL: LibraryItem.requireUrlOrMD5
+        iconURL: LibraryItem.requireUrlOrMD5,
+        onSelect: PropTypes.func.isRequired
     }
 );