lookup footer refactoring

Author: ivansfdc

components/SLDSLookup/Menu/DefaultFooter/index.jsx

@@ -9,6 +9,8 @@
 
 import React, { Component } from 'react';
 import {Icon} from "../../../SLDSIcons";
+import { EventUtil } from '../../../utils';
+
 
 class DefaultFooter extends React.Component {
   constructor(props) {
@@ -19,16 +21,20 @@ class DefaultFooter extends React.Component {
     if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
   }
 
-  footerClick(){
+  handleClick(){
     console.log('=====> Lookup Footer Clicked');
   }
 
+  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.footerClick}>
+        <div className="slds-lookup__item" onClick={this.handleClick.bind(this)} onMouseDown={this.handleMouseDown.bind(this)}>
           <button id='newItem' tabIndex="-1" className={className}>
             <Icon name='add' category="utility" size="x-small" className="slds-icon-text-default" />
             {'New ' + this.props.type}

components/SLDSLookup/index.jsx

@@ -159,8 +159,9 @@ class SLDSLookup extends React.Component {
           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)){
-          document.getElementById('menuContainer').lastChild.children[0].click();
+        else if(this.refs.footer && this.state.focusIndex === (this.state.listLength + 1)){
+          React.findDOMNode(this.refs.footer).click();
+//          document.getElementById('menuContainer').lastChild.children[0].click();
         }
         //If not, then select menu item
         else{
@@ -202,6 +203,15 @@ class SLDSLookup extends React.Component {
     }
   }
 
+  getFooter () {
+    const Footer = this.props.footerRenderer;
+    return <Footer  ref='footer' {... this.props}
+      focusIndex={this.state.focusIndex}
+      listLength={this.state.listLength}
+      onClose={this.handleClose.bind(this)}
+    />;
+  }
+
   //=================================================
   // Rendering Things
   renderMenuContent(){
@@ -218,7 +228,7 @@ class SLDSLookup extends React.Component {
         setFocus={this.setFocus.bind(this)}
         onSelect={this.selectItem.bind(this)}
         header={this.getHeader()}
-        footer={this.props.footer}
+        footer={this.getFooter()}
       />;
     }
   }

demo/pages/HomePage/LookupBaseSection.jsx

@@ -70,7 +70,7 @@ module.exports = React.createClass( {
                   label="Account"
                   type="account"
                   headerRenderer={SLDSLookup.DefaultHeader}
-                  footer={this.getFooter()}
+                  footerRenderer={SLDSLookup.DefaultFooter}
                   onChange={this.onChange}
                   onItemSelect={this.selectItem}
                 />