Merge pull request #21 from salesforce-ux/lookups-refactor

Lookups refactor

Author: ivansfdc

components/SLDSLookup/Menu/index.js

@@ -8,17 +8,16 @@
    */
 
 import React, { Component } from 'react';
-import {Icon} from "../../SLDSIcons";
-import {KEYS} from '../../utils';
 import Item from './Item';
+import {Icon} from "../../SLDSIcons";
 
 class Menu extends React.Component {
   constructor(props){
     super(props);
     this.state = {};
   }
 
-  componentDidUpdate(){
+  componentDidUpdate(prevProps, prevState){
     let list = React.findDOMNode(this.refs.list).children.length;
     this.props.getListLength(list);
   }
@@ -49,6 +48,26 @@ class Menu extends React.Component {
     });
   }
 
+  renderEmptyState(){
+    let className = 'slds-lookup__item';
+    return (
+      <li
+        className={className}
+        role="presentaion">
+        <a
+          href='#'
+          id='add-item'
+          tabIndex="-1"
+          role="option"
+          onClick={this.props.addItem}
+          onMouseDown={this.props.addItem}>
+        <Icon name="add" category="utility" size="x-small" className="slds-icon-text-default" />
+        New {this.props.type}
+        </a>
+      </li>
+    );
+  }
+
   render(){
     return (
       <div
@@ -59,6 +78,7 @@ class Menu extends React.Component {
       role="presentation"
       ref="list">
       {this.renderItems()}
+      {this.renderEmptyState()}
       </ul>
       </div>
     )

components/SLDSLookup/index.jsx

@@ -9,8 +9,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 import React, { Component } from 'react';
 import Menu from './Menu';
-import {InputIcon, ButtonIcon} from "./../SLDSIcons";
-import {Icon} from "../SLDSIcons";
+import {Icon, InputIcon, ButtonIcon} from "./../SLDSIcons";
 import {KEYS,EventUtil} from '../utils';
 import escapeRegExp from 'lodash.escaperegexp';
 
@@ -36,6 +35,12 @@ class SLDSLookup extends React.Component {
     };
   }
 
+  componentDidUpdate(prevProps, prevState){
+    if(prevState.selectedIndex && !this.state.selectIndex){
+      if(this.refs.lookup) React.findDOMNode(this.refs.lookup).focus();
+    }
+  }
+
   //=================================================
   // Using down/up keys, set Focus on list item and assign it to aria-activedescendant attribute in input.
   // Need to keep track of filtered list length to be able to increment/decrement the focus index so it's contained to the number of available list items.
@@ -72,7 +77,7 @@ class SLDSLookup extends React.Component {
   handleDeleteSelected() {
     this.setState({
       selectedIndex: null,
-      isOpen: false
+      isOpen: true,
     });
   }
 
@@ -144,7 +149,10 @@ class SLDSLookup extends React.Component {
         setFocus={this.setFocus.bind(this)}
         getListLength={this.getListLength.bind(this)}
         listLength={this.state.listLength}
-        focusIndex={this.state.focusIndex}/>;
+        focusIndex={this.state.focusIndex}
+        addItem={this.props.addItem}
+        type={this.props.type}
+        />;
     }else{
       return null;
     }
@@ -181,6 +189,7 @@ class SLDSLookup extends React.Component {
             <InputIcon name="search"/>
             <input
               id="lookup"
+              ref="lookup"
               className={inputClasses}
               type="text"
               aria-label="lookup"

demo/pages/HomePage/LookupBaseSection.jsx

@@ -36,6 +36,10 @@ module.exports = React.createClass( {
     return {};
   },
 
+  addItem(){
+    alert('Add item clicked');
+  },
+
 
   render() {
     return (
@@ -53,7 +57,7 @@ module.exports = React.createClass( {
               </PrismCode>
 
               <div className="slds-p-vertical--large">
-                <SLDSLookup items={items} label="Contacts" />
+                <SLDSLookup items={items} label="Accounts" type="account" addItem={this.addItem} />
               </div>
 
             </div>

demo/pages/HomePage/ModalSection.jsx

@@ -97,8 +97,8 @@ Utilize our detailed guidelines to confidently design excellent apps that fit ri
                   isOpen={this.state.modalIsOpen}
                   title={<span>Lightning Design System: Style with Ease</span>}
                   footer={[
-                    <SLDSButton label='Cancel' variant='neutral' onClick={this.closeModal} />,
-                    <SLDSButton label='Save' variant='brand' onClick={this.handleSubmitModal} />
+                    <SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
+                    <SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
                   ]}
                   onRequestClose={this.closeModal}>
                   {this.getModalContent()}

demo/pages/HomePage/index.jsx

@@ -59,14 +59,14 @@ module.exports = React.createClass( {
         </div>
         <main className='stage-main slds-grid slds-wrap slds-grow' role='main'>
           <div className='region region--main slds-grow slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--8-of-12 slds-col-rule--right slds-p-around--large'>
+            <LookupBaseSection />
 
             <ButtonSection />
 
             <PicklistBaseSection />
 
             <ModalSection />
 
-            <LookupBaseSection />
 
             <DatePickerSingleSelectSection />
 

tests/SLDSButton/button.test.jsx

@@ -34,9 +34,7 @@ describe('SLDSButton: ',  function(){
       let brand = TestUtils.findRenderedDOMComponentWithClass(button, 'slds-button--brand');
       expect(brand).to.not.equal(undefined);
     });
-
-  })
-
+  });
 
   describe('component icon props render', function() {
     it('renders icon svg', function() {