Refactor Lookup so that it can accept menu items WITHOUT icons

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -62,18 +62,23 @@ class Item extends React.Component {
   }
 
   getLabel(){
+    let icon;
     if(this.props.listItemLabelRenderer){
       const ListItemLabel = this.props.listItemLabelRenderer;
       return <ListItemLabel {... this.props} />;
     }
+    if(this.props.iconName){
+      icon = <SLDSIcon category={this.props.iconCategory} inverse={this.props.iconInverse} key={this.props.iconName} name={this.props.iconName} size="small" />;
+    }
     return [
-      <SLDSIcon category={this.props.iconCategory} inverse={this.props.iconInverse} key={this.props.iconName} name={this.props.iconName} size="small" />,
+      icon,
       this.boldSearchText(this.props.children.label)
     ]
   }
 
   render(){
     let className = 'slds-lookup__item';
+    let labelClassName = this.props.iconName ? '' : 'slds-m-left--x-small';
     let id = this.props.id;
     if(this.props.isActive) className += ' slds-theme--shade';
 
@@ -89,7 +94,9 @@ class Item extends React.Component {
           ref={id}
           role="option"
           tabIndex="-1">
+            <span className={labelClassName}>
             { this.getLabel() }
+            </span>
         </a>
       </li>
     )

components/SLDSLookup/index.jsx

@@ -408,13 +408,13 @@ class SLDSLookup extends React.Component {
 
   renderSelectedItem() {
     let selectedItem = this.props.options[this.state.selectedIndex].label;
+    const renderIcon = this.props.iconName ? <SLDSIcon category={this.props.iconCategory} className="slds-icon slds-pill__icon" inverse={this.props.iconInverse} name={this.props.iconName} /> : null;
+    let labelClassName = this.props.iconName ? 'slds-pill__label' : 'slds-pill__label slds-m-left--x-small';
     return (
       <a href="javascript:void(0)" className="slds-pill" ref={"pill-" + this.state.selectedIndex} onKeyDown={this.handlePillKeyDown.bind(this)}>
-        <span className="slds-pill__label">
-          <SLDSIcon category={this.props.iconCategory} className="slds-icon slds-pill__icon" inverse={this.props.iconInverse} name={this.props.iconName} />
-          <span className="slds-pill__label">
-            {selectedItem}
-          </span>
+        {renderIcon}
+        <span className={labelClassName}>
+          {selectedItem}
         </span>
         <SLDSButton
           assistiveText="Press delete to remove"

demo/Samples.js

@@ -10,6 +10,7 @@ const Samples =  {
   IconButtons: require('fs').readFileSync('demo/code-snippets/ButtonIconExamples.js', 'utf8'),
   Lookups1: require('fs').readFileSync('demo/code-snippets/LookupExamples1.js', 'utf8'),
   Lookups2: require('fs').readFileSync('demo/code-snippets/LookupExamples2.js', 'utf8'),
+  Lookups3: require('fs').readFileSync('demo/code-snippets/LookupExamples3.js', 'utf8'),
   Modals1: require('fs').readFileSync('demo/code-snippets/ModalExamples1.js', 'utf8'),
   Modals2: require('fs').readFileSync('demo/code-snippets/ModalExamples2.js', 'utf8'),
   Modals3: require('fs').readFileSync('demo/code-snippets/ModalExamples3.js', 'utf8'),

demo/code-snippets/LookupExamples3.js

@@ -0,0 +1,15 @@
+<SLDSLookup
+  emptyMessage="No items found"
+  hasError={false}
+  label="Account"
+  onChange={function(newValue){console.log("New search term: ", newValue)}}
+  onSelect={function(item){console.log(item , " Selected")}}
+  options={[
+    {label: "Paddy\"s Pub"},
+    {label: "Tyrell Corp"},
+    {label: "Paper St. Soap Company"},
+    {label: "Nakatomi Investments"},
+    {label: "Acme Landscaping"},
+    {label: "Acme Construction"}
+  ]}
+/>

demo/pages/LookupSection.jsx

@@ -39,6 +39,9 @@ class LookupSection extends React.Component {
           {docs ? <p dangerouslySetInnerHTML={this.getDescription()} className="slds-p-vertical--small" style={{ "maxWidth": "800px"}}  /> : null}
         </div>
 
+        <section className="slds-p-vertical--large">
+          <CodeMirror codeText={Samples.Lookups3} />
+        </section>
         <section className="slds-p-vertical--large">
           <CodeMirror codeText={Samples.Lookups1} />
         </section>

tests/SLDSLookup/lookup.test.jsx

@@ -137,7 +137,7 @@ describe('SLDSLookup: ',  function(){
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
       TestUtils.Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});
-      let selected = lookup.getElementsByTagName("a")[0].getElementsByTagName('span')[0].innerText;
+      let selected = lookup.getElementsByTagName("a")[0].getElementsByClassName('slds-pill__label')[0].innerText;
       expect(selected).to.equal('Paper St. Soap Company');
     });
 
@@ -149,7 +149,7 @@ describe('SLDSLookup: ',  function(){
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
       TestUtils.Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});
-      let selected = lookup.getElementsByTagName("a")[0].getElementsByTagName('span')[0].innerText;
+      let selected = lookup.getElementsByTagName("a")[0].getElementsByClassName('slds-pill__label')[0].innerText;
       expect(selected).to.equal('Tyrell Corp');
     });