Merge pull request #39 from salesforce-ux/lookups-refacotr

Lookups refacotr

Author: donnieberg

components/SLDSLookup/Menu/index.js

@@ -118,8 +118,6 @@ Menu.propTypes = {
   filterWith: React.PropTypes.func,
   getListLength: React.PropTypes.func,
   setFocus: React.PropTypes.func,
-  header: React.PropTypes.element,
-  footer: React.PropTypes.element,
 };
 
 Menu.defaultProps = {

components/SLDSLookup/index.jsx

@@ -44,8 +44,9 @@ class SLDSLookup extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState){
+    let lookup = this.props.type + 'Lookup';
     if(prevState.selectedIndex && !this.state.selectIndex){
-      if(this.refs.lookup) React.findDOMNode(this.refs.lookup).focus();
+      if(this.refs[lookup]) React.findDOMNode(this.refs[lookup]).focus();
     }
     else if(!prevState.selectedIndex && this.state.selectedIndex){
       let selectedItem = 'pill-' + this.state.selectedIndex;
@@ -202,10 +203,11 @@ class SLDSLookup extends React.Component {
   }
 
   renderModalMenu () {
+    let targetElem = this.props.type + 'Lookup';
     if(this.state.isOpen){
       return <SLDSPopover
           className='slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu'
-          targetElement={this.refs.lookup}
+          targetElement={this.refs[targetElem]}
           closeOnTabKey={true}
           onClose={this.handleCancel.bind(this)}>
           {this.renderMenuContent()}
@@ -267,7 +269,7 @@ class SLDSLookup extends React.Component {
             <InputIcon name="search"/>
             <input
               id={this.props.type + "Lookup"}
-              ref="lookup"
+              ref={this.props.type + "Lookup"}
               className={inputClasses}
               type="text"
               aria-haspopup="true"

demo/pages/HomePage/LookupBaseSection.jsx

@@ -32,11 +32,12 @@ module.exports = React.createClass( {
   },
 
   getInitialState () {
-    return {};
+    return {searchVal:null};
   },
 
   onChange(newValue){
     console.log('New search term: ', newValue);
+    this.setState({searchVal: newValue});
   },
 
   selectItem(item){
@@ -54,7 +55,7 @@ module.exports = React.createClass( {
   getHeader(){
     return (
     <div className="slds-lookup__item" onClick={this.headerClick} onMouseDown={this.headerClick}>
-      <ActionItem item='search' type='account' />
+      <ActionItem item='search' type='account' searchTerm={this.state.searchVal} />
     </div>
     )
   },

tests/SLDSLookup/lookup.test.jsx

@@ -1,6 +1,7 @@
 const React = require('react/addons');
 const TestUtils = React.addons.TestUtils;
 import {SLDSLookup} from '../../components';
+import ActionItem from '../../components/SLDSLookup/Menu/ActionItem';
 
 describe('SLDSLookup: ',  function(){
 
@@ -67,13 +68,23 @@ describe('SLDSLookup: ',  function(){
 
   describe('selecting item works', function() {
 
-    it('focuses correct item', function() {
+    it('no fixed header: focuses correct item', function() {
       let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
       let input = lookup.getElementsByTagName("input")[0];
       TestUtils.Simulate.click(input);
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
       let ariaActiveDescendant = lookup.getElementsByTagName("input")[0].getAttribute("aria-activedescendant");
+      expect(ariaActiveDescendant).to.equal('item-1');
+    });
+
+    it('with fixed header: focuses correct item', function() {
+      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" header={<div>header</div>}/>);
+      let input = lookup.getElementsByTagName("input")[0];
+      TestUtils.Simulate.click(input);
+      TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
+      TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
+      let ariaActiveDescendant = lookup.getElementsByTagName("input")[0].getAttribute("aria-activedescendant");
       expect(ariaActiveDescendant).to.equal('item-0');
     });