Add styling for single select lookup based on SLDS

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -21,7 +21,7 @@ class Item extends React.Component {
     if(!children || !term) return children;
     const regex = new RegExp('(' + term + ')', 'gi');
     return React.Children.map(children, c => {
-      return (typeof c === 'string') ? <span dangerouslySetInnerHTML={{ __html: c.replace(regex, '<mark>$1</mark>')}}></span> : c;
+      return (typeof c.label === 'string') ? <span dangerouslySetInnerHTML={{ __html: c.replace(regex, '<mark>$1</mark>')}}></span> : c;
     });
   }
 
@@ -53,7 +53,8 @@ class Item extends React.Component {
           tabIndex="-1"
           aria-disabled={this.props.disabled}
           role="option"
-          onClick={this.handleClick.bind(this)}>
+          onClick={this.handleClick.bind(this)}
+          onMouseDown={this.handleClick.bind(this)}>
           <Icon name="account" />
           { this.boldSearchText(this.props.children) }
         </a>

components/SLDSLookup/index.jsx

@@ -45,20 +45,25 @@ class SLDSLookup extends React.Component {
   }
 
   getActiveDescendant(){
-    console.log("aria-activedescendant is ", 'item-' +  this.state.activeIndex);
     return this.state.activeIndex !== null ? 'item-' + this.state.activeIndex: "";
   }
 
   //=================================================
   // Select menu item (onClick or on key enter/space)
   selectItem(index){
+    //console.log('selectItem fired');
     this.setState({
       selectedIndex: index,
       searchTerm: null
     });
-    console.log("Selected Item is ", this.props.items[index]);
   }
 
+  handleDeleteSelected() {
+    this.setState({
+      selectedIndex: null,
+      isOpen: false
+    });
+  }
 
   //=================================================
   // Basic Event Listeners on Input
@@ -126,18 +131,38 @@ class SLDSLookup extends React.Component {
     }
   }
 
+  renderSelectedItem(){
+    return (
+      <div className="slds-pill">
+        <a href="#" className="slds-pill__label">
+          <span>
+            <Icon name="account" />
+            {this.props.items[this.state.selectedIndex].label}
+          </span>
+        </a>
+        <button className="slds-button slds-button--icon-bare" onClick={this.handleDeleteSelected.bind(this)} ref="clearSelectedItemButton">
+          <ButtonIcon name="close" />
+          <span className="slds-assistive-text">Remove</span>
+        </button>
+      </div>
+    );
+  }
+
   render(){
+    let inputClasses = this.state.selectedIndex === null ? 'slds-input':'slds-input slds-hide';
+    let compClasses = this.state.selectedIndex === null ? "slds-lookup ignore-react-onclickoutside":"slds-lookup ignore-react-onclickoutside slds-has-selection";
+
     return (
-      <div className="slds-lookup ignore-react-onclickoutside" data-select="multi" data-scope="single" data-typeahead="true">
+      <div className={compClasses} data-select="single" data-scope="single" data-typeahead="true">
         <section className="slds-form-element">
           <label className="slds-form-element__label" forHTML="lookup">{this.props.label}</label>
 
           <div className="slds-lookup__control slds-input-has-icon slds-input-has-icon--right">
-            { this.state.currentSelectedItem ? this.state.currentSelectedItem : null }
+            { this.state.selectedIndex ? this.renderSelectedItem() : null }
             <InputIcon name="search"/>
             <input
               id="lookup"
-              className={'slds-input'}
+              className={inputClasses}
               type="text"
               aria-label="lookup"
               aria-haspopup="true"
@@ -147,6 +172,7 @@ class SLDSLookup extends React.Component {
               role="combobox"
               onChange={this.handleChange.bind(this)}
               onFocus={this.handleFocus.bind(this)}
+              onBlur={this.handleBlur.bind(this)}
               onClick={this.handleClick.bind(this)}
               onKeyDown={this.handleKeyDown.bind(this)}
               value={this.state.searchTerm} />

demo/pages/HomePage/LookupBaseSection.jsx

@@ -15,7 +15,14 @@ import SLDSLookup from '../../../components/SLDSLookup';
 import {default as PrismCode} from 'react-prism/lib/PrismCode';
 
 
-const items = ['Paddy\'s Pub', 'Tyrell Corp', 'Paper St. Soap Company', 'Nakatomi Investments', 'Acme Landscaping', 'Acme Construction'];
+const items = [
+  {label:'Paddy\'s Pub'},
+  {label:'Tyrell Corp'},
+  {label:'Paper St. Soap Company'},
+  {label:'Nakatomi Investments'},
+  {label:'Acme Landscaping'},
+  {label:'Acme Construction'}
+];