Add alert function to Fixed Action Items

components/SLDSLookup/Menu/index.js

@@ -57,20 +57,20 @@ class Menu extends React.Component {
 
   render(){
     let isNewItemBtnActive = false;
-    let isSearchDetailsActive = false;
+    let isSearchRecordsActive = false;
     this.props.focusIndex === this.props.listLength + 1 ? isNewItemBtnActive = true : isNewItemBtnActive = false;
-    this.props.focusIndex === 0 ? isSearchDetailsActive = true: isSearchDetailsActive = false;
+    this.props.focusIndex === 0 ? isSearchRecordsActive = true: isSearchRecordsActive = false;
 
     return (
       <div className="ignore-react-onclickoutside slds-lookup__menu" role="listbox" ref="scroll">
         <div className="slds-lookup__item">
           <ActionItem
-            id='searchDetails'
+            id='searchRecords'
             icon='search'
             type={this.props.type}
-            isActive={isSearchDetailsActive}
+            isActive={isSearchRecordsActive}
             setFocus={this.props.setFocus}
-            onSelect={this.props.addItem}
+            onSelect={this.props.onSearchRecords}
             >
             {this.props.searchTerm ? '"' + this.props.searchTerm + '"' : ""} in {this.props.type + 's'}
           </ActionItem>
@@ -87,7 +87,7 @@ class Menu extends React.Component {
             type={this.props.type}
             isActive={isNewItemBtnActive}
             setFocus={this.props.setFocus}
-            onSelect={this.props.addItem}
+            onSelect={this.props.onNewItem}
             >
             New {this.props.type}
           </ActionItem>

components/SLDSLookup/index.jsx

@@ -49,7 +49,7 @@ class SLDSLookup extends React.Component {
   //=================================================
   // 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.
-  // Adding/subtracting 1 from focusIndex to account for fixed action items (searchDetails and addNewItem buttons)
+  // Adding/subtracting 1 from focusIndex to account for fixed action items (searchRecords and addNewItem buttons)
   increaseIndex(){
     let items = this.state.listLength;
     this.setState({ focusIndex: this.state.focusIndex <= items ? this.state.focusIndex + 1 : 0 })
@@ -86,8 +86,14 @@ class SLDSLookup extends React.Component {
     });
   }
 
-  addItem(){
-    if(this.props.onAddItem) this.props.onAddItem();
+  newItem(){
+    this.handleClose();
+    if(this.props.onNewItem) this.props.onNewItem();
+  }
+
+  searchRecords(){
+    this.handleClose();
+    if(this.props.onSearchRecords) this.props.onSearchRecords();
   }
 
   //=================================================
@@ -135,9 +141,18 @@ class SLDSLookup extends React.Component {
       //If user hits enter/space key, select current activedescendant item
       else if((event.keyCode === KEYS.ENTER || event.keyCode === KEYS.SPACE) && this.state.focusIndex !== null){
         EventUtil.trapImmediate(event);
-        //If the focus is on the first or last item in the menu (search details or add item buttons), then close.
+        //If the focus is on the first fixed Action Item in Menu
+        if(this.state.focusIndex === 0){
+          this.searchRecords();
+        }
+        //If the focus is on the last fixed Action Item in Menu
+        else if(this.state.focusIndex === (this.state.listLength + 1)){
+          this.newItem();
+        }
         //If not, then select menu item
-        (this.state.focusIndex === 0 || this.state.focusIndex === (this.state.listLength + 1)) ? this.handleClose() : this.selectItem(this.state.currentFocus);
+        else{
+          this.selectItem(this.state.currentFocus);
+        }
       }
     }
   }
@@ -166,15 +181,16 @@ class SLDSLookup extends React.Component {
         getListLength={this.getListLength.bind(this)}
         setFocus={this.setFocus.bind(this)}
         onSelect={this.selectItem.bind(this)}
-        addItem={this.addItem}
+        onSearchRecords={this.searchRecords.bind(this)}
+        onNewItem={this.newItem.bind(this)}
       />;
     }
   }
 
   renderSelectedItem(){
     let selectedItem = this.props.items[this.state.selectedIndex].label;
     return (
-      <a href="#" className="slds-pill" ref={'pill-' + this.state.selectedIndex} onKeyDown={this.handlePillKeyDown.bind(this)}>
+      <span tabIndex="0" className="slds-pill" ref={'pill-' + this.state.selectedIndex} onKeyDown={this.handlePillKeyDown.bind(this)}>
         <span className="slds-pill__label">
           <Icon name={this.props.type} />
           {selectedItem}
@@ -184,11 +200,10 @@ class SLDSLookup extends React.Component {
           variant='icon'
           iconName='close'
           iconSize='medium'
-          disabled={true}
           onClick={this.handleDeleteSelected.bind(this)}
           ref="clearSelectedItemButton"
         />
-      </a>
+      </span>
     );
   }
 
@@ -240,17 +255,15 @@ SLDSLookup.propTypes = {
   type: React.PropTypes.string,
   filterWith: React.PropTypes.func,
   onItemSelect: React.PropTypes.func,
-  onAddItem: React.PropTypes.func,
+  onNewItem: React.PropTypes.func,
+  onSearchRecords: React.PropTypes.func,
 };
 
 SLDSLookup.defaultProps = {
   filterWith: defaultFilter,
   onItemSelect: function(item){
     //console.log('onItemSelect should be defined');
-  },
-  onAddItem: function(event){
-    //console.log('onItemSelect should be defined');
-  },
+  }
 };
 
 module.exports = SLDSLookup;

demo/code-snippets/SLDSLookupPage.txt

@@ -8,5 +8,5 @@ const items = [
   {label:'Acme Construction'}
 ];
 
-<SLDSLookup items={items} label="Accounts" type="account" />
+<SLDSLookup items={items} label="Accounts" type="account" onNewItem={this.newItem} onSearchRecords={this.searchRecords} />
 

demo/pages/HomePage/LookupBaseSection.jsx

@@ -36,6 +36,14 @@ module.exports = React.createClass( {
     return {};
   },
 
+  newItem(){
+    alert('New Item Clicked');
+  },
+
+  searchRecords(){
+    alert('Search Records Clicked');
+  },
+
   render() {
     return (
 
@@ -52,7 +60,7 @@ module.exports = React.createClass( {
               </PrismCode>
 
               <div className="slds-p-vertical--large">
-                <SLDSLookup items={items} label="Accounts" type="account" />
+                <SLDSLookup items={items} label="Accounts" type="account" onNewItem={this.newItem} onSearchRecords={this.searchRecords} />
               </div>
 
             </div>