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

Lookups refactor

Author: ivansfdc

components/SLDSLookup/Menu/Item/index.jsx

@@ -16,6 +16,12 @@ class Item extends React.Component {
     super(props);
   }
 
+  componentWillReceiveProps(nextProps){
+    if(nextProps.isActive !== this.props.isActive){
+      this.props.setActiveDescendant(nextProps.id);
+    }
+  }
+
   boldSearchText(children) {
     const term = this.props.searchTerm;
     if(!children || !term) return children;
@@ -31,17 +37,17 @@ class Item extends React.Component {
       e.nativeEvent.preventDefault();
       e.nativeEvent.stopImmediatePropagation();
     }
-    return this.props.onSelect(this.props.index);
+    return this.props.onSelect(this.props.id);
   }
 
   render(){
     let className = 'slds-lookup__item';
 
     //TODO: make isActive styles into a class??
+    let id = this.props.id;
     let styles = {};
     if(this.props.isActive) className += ' slds-theme--shade';
 
-
     return (
       //IMPORTANT: id is used to set lookup's input's aria-activedescendant
       <li
@@ -50,14 +56,14 @@ class Item extends React.Component {
         role="presentaion">
         <a
           href={this.props.href}
-          id={this.props.id}
+          id={id}
           tabIndex="-1"
           aria-disabled={this.props.disabled}
           role="option"
           onClick={this.handleClick.bind(this)}
           onMouseDown={this.handleClick.bind(this)}>
           <Icon name="account" />
-          { this.boldSearchText(this.props.children) }
+          { this.boldSearchText(this.props.children.label) }
         </a>
       </li>
     )

components/SLDSLookup/Menu/index.js

@@ -26,7 +26,7 @@ class Menu extends React.Component {
     return this.props.items.filter(this.filter, this).map((c, i) => {
       //isActive means it is aria-activedescendant
       const isActive = this.props.activeIndex === i ? true : false;
-      return <Item key={i} id={'item-' + i} index={i} isActive={isActive} onSelect={this.props.onSelect} searchTerm={this.props.searchTerm}>{c}</Item>
+      return <Item key={c.id} id={c.id} setActiveDescendant={this.props.setActiveDescendant} isActive={isActive} onSelect={this.props.onSelect} searchTerm={this.props.searchTerm}>{c}</Item>
     });
   }
 

components/SLDSLookup/index.jsx

@@ -22,9 +22,14 @@ const defaultFilter = (term, item) => {
 class SLDSLookup extends React.Component {
   constructor(props) {
     super(props);
+    this.props.items.map((item, index) => {
+      return item.id = 'item-' + index;
+    })
+
     this.state = {
       searchTerm: '',
       isOpen:false,
+      activeItem:null,
       selectedIndex: null,
       activeIndex:null,
     };
@@ -44,14 +49,15 @@ class SLDSLookup extends React.Component {
     })
   }
 
-  getActiveDescendant(){
-    return this.state.activeIndex !== null ? 'item-' + this.state.activeIndex: "";
+  setActiveDescendant(id){
+    this.setState({activeItem:id});
   }
 
   //=================================================
   // Select menu item (onClick or on key enter/space)
-  selectItem(index){
+  selectItem(itemId){
     //console.log('selectItem fired');
+    let index = itemId.replace('item-', '');
     this.setState({
       selectedIndex: index,
       searchTerm: null
@@ -115,7 +121,7 @@ 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.activeIndex !== null){
         EventUtil.trapImmediate(event);
-        this.selectItem(this.state.activeIndex);
+        this.selectItem(this.state.activeItem);
       }
     }
   }
@@ -130,6 +136,7 @@ class SLDSLookup extends React.Component {
         onSelect={this.selectItem.bind(this)}
         label={this.props.label}
         items={this.props.items}
+        setActiveDescendant={this.setActiveDescendant.bind(this)}
         activeIndex={this.state.activeIndex}/>;
     }else{
       return null;
@@ -172,7 +179,7 @@ class SLDSLookup extends React.Component {
               aria-label="lookup"
               aria-haspopup="true"
               aria-autocomplete="list"
-              aria-activedescendant={this.getActiveDescendant()}
+              aria-activedescendant={this.state.activeItem ? this.state.activeItem:""}
               aria-expanded={this.state.isOpen}
               role="combobox"
               onChange={this.handleChange.bind(this)}