A bit of cleanup in DefaultHeader and DefaultFooter

Author: donnieberg

components/SLDSLookup/Menu/DefaultFooter/index.jsx

@@ -19,15 +19,21 @@ class DefaultFooter extends React.Component {
     if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
   }
 
+  footerClick(){
+    console.log('=====> Lookup Footer Clicked');
+  }
+
   render(){
     let className = 'slds-button';
     if(this.props.isActive) className += ' slds-theme--shade'
 
       return (
-        <button id='newItem' tabIndex="-1" className={className}>
-          <Icon name='add' category="utility" size="x-small" className="slds-icon-text-default" />
-          {'New ' + this.props.type}
-        </button>
+        <div className="slds-lookup__item" onClick={this.footerClick}>
+          <button id='newItem' tabIndex="-1" className={className}>
+            <Icon name='add' category="utility" size="x-small" className="slds-icon-text-default" />
+            {'New ' + this.props.type}
+          </button>
+        </div>
       )
   }
 }

components/SLDSLookup/Menu/DefaultHeader/index.jsx

@@ -19,15 +19,21 @@ class DefaultHeader extends React.Component {
     if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
   }
 
+  headerClick(){
+    console.log('=====> Lookup Header Clicked');
+  }
+
   render(){
     let className = 'slds-button';
     if(this.props.isActive) className += ' slds-theme--shade'
 
       return (
-        <button id='searchRecords' tabIndex="-1" className={className}>
-          <Icon name='search' category="utility" size="x-small" className="slds-icon-text-default" />
-          {this.props.searchTerm ? '"' + this.props.searchTerm + '"' + ' in ' + this.props.type + 's': ' in ' + this.props.type + 's'}
-        </button>
+        <div className="slds-lookup__item" onClick={this.headerClick}>
+          <button id='searchRecords' tabIndex="-1" className={className}>
+            <Icon name='search' category="utility" size="x-small" className="slds-icon-text-default" />
+            {this.props.searchTerm ? '"' + this.props.searchTerm + '"' + ' in ' + this.props.type + 's': ' in ' + this.props.type + 's'}
+          </button>
+        </div>
       )
   }
 }

demo/pages/HomePage/LookupBaseSection.jsx

@@ -45,28 +45,13 @@ module.exports = React.createClass( {
     console.log(item , ' Selected');
   },
 
-  headerClick(){
-    console.log('=====> Lookup Header Clicked');
-  },
-
-  footerClick(){
-    console.log('=====> Lookup Footer Clicked');
-  },
 
   getHeader(){
-    return (
-    <div className="slds-lookup__item" onClick={this.headerClick} onMouseDown={this.headerClick}>
-      <DefaultHeader searchTerm={this.state.searchVal} type='account' />
-    </div>
-    )
+    return <DefaultHeader searchTerm={this.state.searchVal} type='account' />;
   },
 
   getFooter(){
-    return (
-    <div className="slds-lookup__item" onClick={this.footerClick} onMouseDown={this.footerClick}>
-      <DefaultFooter type='account' />
-    </div>
-    )
+    return <DefaultFooter type='account' />;
   },
 
   render() {