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

Lookups refactor

Author: donnieberg

components/SLDSLookup/Menu/ActionItem/index.jsx

@@ -19,20 +19,26 @@ class ActionItem extends React.Component {
     if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
   }
 
-  renderIcon(){
-    if(this.props.icon){
-      return <Icon name={this.props.icon} category="utility" size="x-small" className="slds-icon-text-default" />
+  render(){
+    let content, id, icon;
+    if(this.props.item === 'search'){
+      content = (this.props.searchTerm ? '"' + this.props.searchTerm + '"' : "") + ' in ' + this.props.type + 's';
+      id = 'searchRecords';
+      icon = 'search';
+    }
+    else if(this.props.item === 'newItem'){
+      content = 'New ' + this.props.type;
+      id = 'addNewItem';
+      icon = 'add';
     }
-  }
 
-  render(){
     let className = 'slds-button';
     if(this.props.isActive) className += ' slds-theme--shade'
 
     return (
-      <button id={this.props.id} tabIndex="-1" className={className} onClick={this.props.onSelect} onMouseDown={this.props.onSelect}>
-        {this.renderIcon()}
-        {this.props.children}
+      <button id={id} tabIndex="-1" className={className}>
+        <Icon name={icon} category="utility" size="x-small" className="slds-icon-text-default" />
+        {content}
       </button>
     )
   }

components/SLDSLookup/Menu/index.js

@@ -9,7 +9,6 @@
 
 import React, { Component } from 'react';
 import Item from './Item';
-import ActionItem from './ActionItem';
 import {Icon} from "../../SLDSIcons";
 
 class Menu extends React.Component {
@@ -35,63 +34,48 @@ class Menu extends React.Component {
     }
   }
 
-  getHeader(){
-    if(this.props.header !== false && this.props.header !== undefined){
-
-      let content = (this.props.searchTerm ? '"' + this.props.searchTerm + '"' : "") + ' in ' + this.props.type + 's';
-      if(this.props.header !== true) content = this.props.header;
-
+  renderHeader(){
+    if(this.props.header){
       let headerActive = false;
-      this.props.focusIndex === 0 ? headerActive = true: headerActive = false;
-
-      return (
-        <div className="slds-lookup__item">
-        <ActionItem
-        id='searchRecords'
-        icon={this.props.header === true ? 'search' : false}
-        type={this.props.type}
-        isActive={headerActive}
-        setFocus={this.props.setFocus}
-        onSelect={this.props.headerClick}
-        >
-        {content}
-        </ActionItem>
-        </div>
-      )
+      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>;
     }
   }
 
-  getFooter(){
-    if(this.props.footer != false && this.props.footer !== undefined){
-
-      let content = 'New ' + this.props.type;
-      if(this.props.footer !== true) content = this.props.footer;
-
+  renderFooter(){
+    if(this.props.footer){
       let footerActive = false;
-      this.props.focusIndex === this.props.listLength+1 ? footerActive = true: footerActive = false;
-
-      return (
-        <div className="slds-lookup__item">
-        <ActionItem
-        id='addNewItem'
-        icon={this.props.footer === true ? 'add' : false}
-        type={this.props.type}
-        isActive={footerActive}
-        setFocus={this.props.setFocus}
-        onSelect={this.props.footerClick}
-        >
-        {content}
-        </ActionItem>
-        </div>
-      )
+      let isActiveClass = null;
+      if(this.props.focusIndex === this.props.listLength+1){
+        footerActive = true;
+        isActiveClass = 'slds-theme--shade';
+      }else{
+        footerActive = false;
+        isActiveClass = '';
+      }
+
+      return <div className={isActiveClass}>{this.props.footer}</div>;
     }
   }
 
   renderItems(){
     return this.props.items.filter(this.filter, this).map((c, i) => {
       //isActive means it is aria-activedescendant
-      const isActive = this.props.focusIndex === i + 1 ? true : false;
       const id = c.id;
+      let isActive = false;
+      if(this.props.header){
+        isActive = this.props.focusIndex === i + 1? true : false;
+      }else{
+        isActive = this.props.focusIndex === i  ? true : false;
+      }
       return <Item
       key={id}
       id={id}
@@ -110,20 +94,15 @@ class Menu extends React.Component {
   }
 
   render(){
-    let isNewItemBtnActive = false;
-    let isSearchRecordsActive = false;
-    this.props.focusIndex === this.props.listLength + 1 ? isNewItemBtnActive = true : isNewItemBtnActive = false;
-    this.props.focusIndex === 0 ? isSearchRecordsActive = true: isSearchRecordsActive = false;
-
     return (
-      <section>
-        {this.getHeader()}
+      <section id="menuContainer">
+        {this.renderHeader()}
 
         <ul id="list" className="slds-lookup__list" role="presentation" ref="list">
           {this.renderItems()}
         </ul>
 
-        {this.getFooter()}
+        {this.renderFooter()}
       </section>
     )
   }
@@ -139,6 +118,8 @@ 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

@@ -93,16 +93,6 @@ class SLDSLookup extends React.Component {
     });
   }
 
-  footerClick(){
-    this.handleClose();
-    if(this.props.onFooterClick) this.props.onFooterClick();
-  }
-
-  headerClick(){
-    this.handleClose();
-    if(this.props.onHeaderClick) this.props.onHeaderClick();
-  }
-
   //=================================================
   // Event Listeners on Input
   handleClose() {
@@ -157,13 +147,13 @@ 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 fixed Action Item in Menu
-        if(this.state.focusIndex === 0){
-          this.headerClick();
+        //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();
         }
-        //If the focus is on the last fixed Action Item in Menu
-        else if(this.state.focusIndex === (this.state.listLength + 1)){
-          this.footerClick();
+        //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();
         }
         //If not, then select menu item
         else{
@@ -198,16 +188,13 @@ class SLDSLookup extends React.Component {
         setFocus={this.setFocus.bind(this)}
         onSelect={this.selectItem.bind(this)}
         header={this.props.header}
-        headerClick={this.headerClick.bind(this)}
         footer={this.props.footer}
-        footerClick={this.footerClick.bind(this)}
       />;
     }
   }
 
   renderSimpleMenu(){
     if(this.state.isOpen){
-
       return <div className="ignore-react-onclickoutside slds-lookup__menu" role="listbox" ref="scroll">
         { this.renderMenuContent() }
       </div>;
@@ -248,7 +235,7 @@ class SLDSLookup extends React.Component {
   }
 
   modifyItems () {
-    const items = this.props.items.map((item, index) => { 
+    const items = this.props.items.map((item, index) => {
       return {
         id : 'item-' + index,
         label: item.label,
@@ -312,8 +299,6 @@ SLDSLookup.propTypes = {
   filterWith: React.PropTypes.func,
   onItemSelect: React.PropTypes.func,
   onChange: React.PropTypes.func,
-  onFooterClick: React.PropTypes.func,
-  onHeaderClick: React.PropTypes.func,
   modal: React.PropTypes.bool,
   disabled: React.PropTypes.bool,
 };

demo/code-snippets/SLDSLookupPage.txt

@@ -1,11 +1,3 @@
-Default Props             Prop Values
-* header={false}          [true, false, custom DOM node]
-* footer={false}          [true, false, custom DOM node]
-
-true renders default header or footer
-false does not render header or footer
-pass in custom DOM node to render in header or footer
-
 const items = [
   {label:'Paddy\'s Pub'},
   {label:'Tyrell Corp'},
@@ -20,10 +12,8 @@ const items = [
   label="Accounts"
   type="account"
   header={this.getHeader()}
-  footer={true}
+  footer={this.getFooter()}
   onChange={this.onChange}
-  onItemSelect={this.onItemSelect}
-  onHeaderClick={this.searchRecords}
-  onFooterClick={this.newItem} />
+  onItemSelect={this.onItemSelect} />
 
 

demo/pages/HomePage/LookupBaseSection.jsx

@@ -11,9 +11,8 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 import React from 'react';
 import SLDSLookup from '../../../components/SLDSLookup';
-
 import {default as PrismCode} from 'react-prism/lib/PrismCode';
-
+import ActionItem from '../../../components/SLDSLookup/Menu/ActionItem';
 
 const items = [
   {label:'Paddy\'s Pub'},
@@ -36,14 +35,6 @@ module.exports = React.createClass( {
     return {};
   },
 
-  newItem(){
-    alert('New Item Clicked');
-  },
-
-  customHeaderClick(){
-    alert('custom header clicked');
-  },
-
   onChange(newValue){
     console.log('New search term: ', newValue);
   },
@@ -52,9 +43,27 @@ module.exports = React.createClass( {
     console.log(item , ' Selected');
   },
 
+  headerClick(){
+    console.log('=====> Lookup Header Clicked');
+  },
+
+  footerClick(){
+    console.log('=====> Lookup Footer Clicked');
+  },
+
   getHeader(){
-    return(
-      <div>MY CUSTOM HEADER</div>
+    return (
+    <div className="slds-lookup__item" onClick={this.headerClick} onMouseDown={this.headerClick}>
+      <ActionItem item='search' type='account' searchTerm={searchTerm} />
+    </div>
+    )
+  },
+
+  getFooter(){
+    return (
+    <div className="slds-lookup__item" onClick={this.footerClick} onMouseDown={this.footerClick}>
+      <ActionItem item='newItem' type='account' />
+    </div>
     )
   },
 
@@ -76,12 +85,10 @@ module.exports = React.createClass( {
               <div className="slds-p-vertical--large">
                 <SLDSLookup
                   items={items}
-                  label="Accounts"
+                  label="Account"
                   type="account"
                   header={this.getHeader()}
-                  onHeaderClick={this.customHeaderClick}
-                  footer={true}
-                  onFooterClick={this.newItem}
+                  footer={this.getFooter()}
                   onChange={this.onChange}
                   onItemSelect={this.selectItem}
                 />