more lookup refactoring

Author: ivansfdc

components/SLDSLookup/Menu/DefaultHeader/index.jsx

@@ -9,6 +9,7 @@
 
 import React, { Component } from 'react';
 import {Icon} from "../../../SLDSIcons";
+import { EventUtil } from '../../../utils';
 
 class DefaultHeader extends React.Component {
   constructor(props) {
@@ -19,22 +20,29 @@ class DefaultHeader extends React.Component {
     if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
   }
 
-  headerClick(){
+  handleClick(){
     console.log('=====> Lookup Header Clicked');
+    if(this.props.onClose){
+      this.props.onClose();
+    }
+  }
+
+  handleMouseDown(event) {
+    EventUtil.trapImmediate(event);
   }
 
   render(){
     let className = 'slds-button';
-    if(this.props.isActive) className += ' slds-theme--shade'
-
-      return (
-        <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>
-      )
+    if(this.props.isActive) className += ' slds-theme--shade aaa'
+
+    return (
+      <div className="slds-lookup__item" onMouseDown={this.handleMouseDown} onClick={this.handleClick.bind(this)}>
+        <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>
+    )
   }
 }
 

components/SLDSLookup/Menu/index.js

@@ -35,19 +35,7 @@ class Menu extends React.Component {
   }
 
   renderHeader(){
-    if(this.props.header){
-      let headerActive = false;
-      let isActiveClass = null;
-      if(this.props.focusIndex === 0){
-        headerActive = true;
-        isActiveClass = 'slds-theme--shade';
-      }else{
-        headerActive = false;
-        isActiveClass = '';
-      }
-
-      return <div className={isActiveClass}>{this.props.header}</div>;
-    }
+    return this.props.header;
   }
 
   renderFooter(){

components/SLDSLookup/index.jsx

@@ -155,7 +155,10 @@ class SLDSLookup extends React.Component {
         EventUtil.trapImmediate(event);
         //If the focus is on the first fixed Action Item in Menu, click it
         if(this.props.header && this.state.focusIndex === 0){
-          document.getElementById('menuContainer').firstChild.children[0].click();
+//          document.getElementById('menuContainer').firstChild.children[0].click();
+          if(this.refs.header){
+            React.findDOMNode(this.refs.header).click();
+          }
         }
         //If the focus is on the last fixed Action Item in Menu, click it
         else if(this.props.footer && this.state.focusIndex === (this.state.listLength + 1)){
@@ -178,6 +181,29 @@ class SLDSLookup extends React.Component {
     }
   }
 
+  getHeader(){
+    if(this.props.header){
+      let headerActive = false;
+      let isActiveClass = null;
+      if(this.state.focusIndex === 0){
+        headerActive = true;
+        isActiveClass = 'slds-theme--shade';
+      }else{
+        headerActive = false;
+        isActiveClass = '';
+      }
+      const Header = this.props.header;
+      return <div className={isActiveClass}>
+        <Header ref='header' {... this.props} 
+          searchTerm={this.state.searchTerm}
+          focusIndex={this.state.focusIndex}
+          listLength={this.state.listLength}
+          onClose={this.handleClose.bind(this)}
+        />
+      </div>;
+    }
+  }
+
   //=================================================
   // Rendering Things
   renderMenuContent(){
@@ -193,7 +219,8 @@ class SLDSLookup extends React.Component {
         getListLength={this.getListLength.bind(this)}
         setFocus={this.setFocus.bind(this)}
         onSelect={this.selectItem.bind(this)}
-        header={this.props.header}
+        header={this.getHeader()}
+        headerProps={this.props.headerProps}
         footer={this.props.footer}
       />;
     }

demo/pages/HomePage/LookupBaseSection.jsx

@@ -47,7 +47,7 @@ module.exports = React.createClass( {
 
 
   getHeader(){
-    return <SLDSLookup.DefaultHeader searchTerm={this.state.searchVal} type='account' />;
+    return SLDSLookup.DefaultHeader;
   },
 
   getFooter(){