Make lookup fixed items optional.

donnieberg · donnieberg · commit 641db9dc785d · 2015-10-22T16:47:51.000-07:00
diff --git a/components/SLDSLookup/Menu/ActionItem/index.jsx b/components/SLDSLookup/Menu/ActionItem/index.jsx
@@ -19,14 +19,20 @@ 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 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}>
-      <Icon name={this.props.icon} category="utility" size="x-small" className="slds-icon-text-default" />
-      {this.props.children}
+        {this.renderIcon()}
+        {this.props.children}
       </button>
     )
   }
diff --git a/components/SLDSLookup/Menu/index.js b/components/SLDSLookup/Menu/index.js
@@ -35,6 +35,58 @@ 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;
+
+      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>
+      )
+    }
+  }
+
+  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;
+
+      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>
+      )
+    }
+  }
+
   renderItems(){
     return this.props.items.filter(this.filter, this).map((c, i) => {
       //isActive means it is aria-activedescendant
@@ -65,35 +117,13 @@ class Menu extends React.Component {
 
     return (
       <section>
-        <div className="slds-lookup__item">
-          <ActionItem
-            id='searchRecords'
-            icon='search'
-            type={this.props.type}
-            isActive={isSearchRecordsActive}
-            setFocus={this.props.setFocus}
-            onSelect={this.props.onSearchRecords}
-            >
-            {this.props.searchTerm ? '"' + this.props.searchTerm + '"' : ""} in {this.props.type + 's'}
-          </ActionItem>
-        </div>
+        {this.getHeader()}
 
         <ul id="list" className="slds-lookup__list" role="presentation" ref="list">
           {this.renderItems()}
         </ul>
 
-        <div className="slds-lookup__item">
-          <ActionItem
-            id='addNewItem'
-            icon='add'
-            type={this.props.type}
-            isActive={isNewItemBtnActive}
-            setFocus={this.props.setFocus}
-            onSelect={this.props.onNewItem}
-            >
-            New {this.props.type}
-          </ActionItem>
-        </div>
+        {this.getFooter()}
       </section>
     )
   }
@@ -109,8 +139,6 @@ Menu.propTypes = {
   filterWith: React.PropTypes.func,
   getListLength: React.PropTypes.func,
   setFocus: React.PropTypes.func,
-  onSelect: React.PropTypes.func,
-  addItem: React.PropTypes.func,
 };
 
 Menu.defaultProps = {
diff --git a/components/SLDSLookup/index.jsx b/components/SLDSLookup/index.jsx
@@ -87,14 +87,14 @@ class SLDSLookup extends React.Component {
     });
   }
 
-  newItem(){
+  footerClick(){
     this.handleClose();
-    if(this.props.onNewItem) this.props.onNewItem();
+    if(this.props.onFooterClick) this.props.onFooterClick();
   }
 
-  searchRecords(){
+  headerClick(){
     this.handleClose();
-    if(this.props.onSearchRecords) this.props.onSearchRecords();
+    if(this.props.onHeaderClick) this.props.onHeaderClick();
   }
 
   //=================================================
@@ -153,11 +153,11 @@ class SLDSLookup extends React.Component {
         EventUtil.trapImmediate(event);
         //If the focus is on the first fixed Action Item in Menu
         if(this.state.focusIndex === 0){
-          this.searchRecords();
+          this.headerClick();
         }
         //If the focus is on the last fixed Action Item in Menu
         else if(this.state.focusIndex === (this.state.listLength + 1)){
-          this.newItem();
+          this.footerClick();
         }
         //If not, then select menu item
         else{
@@ -191,8 +191,10 @@ class SLDSLookup extends React.Component {
         getListLength={this.getListLength.bind(this)}
         setFocus={this.setFocus.bind(this)}
         onSelect={this.selectItem.bind(this)}
-        onSearchRecords={this.searchRecords.bind(this)}
-        onNewItem={this.newItem.bind(this)}
+        header={this.props.header}
+        headerClick={this.headerClick.bind(this)}
+        footer={this.props.footer}
+        footerClick={this.footerClick.bind(this)}
       />;
     }
   }
@@ -296,16 +298,16 @@ SLDSLookup.propTypes = {
   filterWith: React.PropTypes.func,
   onItemSelect: React.PropTypes.func,
   onChange: React.PropTypes.func,
-  onNewItem: React.PropTypes.func,
-  onSearchRecords: React.PropTypes.func,
-  modal: React.PropTypes["bool"],
-  disabled: React.PropTypes["bool"],
+  onFooterClick: React.PropTypes.func,
+  onHeaderClick: React.PropTypes.func,
+  modal: React.PropTypes.bool,
+  disabled: React.PropTypes.bool,
 };
 
 SLDSLookup.defaultProps = {
   filterWith: defaultFilter,
   modal: false,
-  disabled: false
+  disabled: false,
 };
 
 module.exports = SLDSLookup;
diff --git a/demo/code-snippets/SLDSLookupPage.txt b/demo/code-snippets/SLDSLookupPage.txt
@@ -1,3 +1,10 @@
+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'},
@@ -12,9 +19,11 @@ const items = [
   items={items}
   label="Accounts"
   type="account"
+  header={this.getHeader()}
+  footer={true}
   onChange={this.onChange}
   onItemSelect={this.onItemSelect}
-  onNewItem={this.newItem}
-  onSearchRecords={this.searchRecords} />
+  onHeaderClick={this.searchRecords}
+  onFooterClick={this.newItem} />
 
 
diff --git a/demo/pages/HomePage/LookupBaseDynamicSection.jsx b/demo/pages/HomePage/LookupBaseDynamicSection.jsx
@@ -65,9 +65,7 @@ module.exports = React.createClass( {
                   type="account"
                   onChange={this.onChange}
                   onItemSelect={this.selectItem}
-                  onNewItem={this.newItem}
                   onItemSelect={this.handleItemSelect}
-                  onSearchRecords={this.searchRecords}
                 />
               </div>
 
diff --git a/demo/pages/HomePage/LookupBaseSection.jsx b/demo/pages/HomePage/LookupBaseSection.jsx
@@ -40,8 +40,8 @@ module.exports = React.createClass( {
     alert('New Item Clicked');
   },
 
-  searchRecords(){
-    alert('Search Records Clicked');
+  customHeaderClick(){
+    alert('custom header clicked');
   },
 
   onChange(newValue){
@@ -52,6 +52,12 @@ module.exports = React.createClass( {
     console.log(item + ' Selected');
   },
 
+  getHeader(){
+    return(
+      <div>MY CUSTOM HEADER</div>
+    )
+  },
+
   render() {
     return (
 
@@ -72,10 +78,12 @@ module.exports = React.createClass( {
                   items={items}
                   label="Accounts"
                   type="account"
+                  header={this.getHeader()}
+                  onHeaderClick={this.customHeaderClick}
+                  footer={true}
+                  onFooterClick={this.newItem}
                   onChange={this.onChange}
                   onItemSelect={this.selectItem}
-                  onNewItem={this.newItem}
-                  onSearchRecords={this.searchRecords}
                 />
               </div>
 
