Merge pull request #45 from salesforce-ux/gpinto_lookup_modifications

Gpinto lookup modifications

Author: ivansfdc

components/SLDSLookup/Menu/Item/index.jsx

@@ -10,23 +10,27 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 import React, { Component } from 'react';
 import {Icon} from "../../../SLDSIcons";
 import {EventUtil} from '../../../utils';
+import escapeRegExp from 'lodash.escaperegexp';
 
 class Item extends React.Component {
   constructor(props) {
     super(props);
   }
 
   componentWillReceiveProps(nextProps){
-    if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true){
+    if (nextProps.isActive !== this.props.isActive && nextProps.isActive === true) {
       this.scrollFocus();
       this.props.setFocus(this.props.id);
     }
   }
 
   boldSearchText(children) {
-    const term = this.props.searchTerm;
-    if(!children || !term) return children;
-    const regex = new RegExp('(' + term + ')', 'gi');
+    let regex = this.props.boldRegex
+    if (!regex) {
+      const term = this.props.searchTerm;
+      if(!children || !term) return children;
+      regex = new RegExp('(' + escapeRegExp(term) + ')', 'gi');
+    }
     return React.Children.map(children, c => {
       return (typeof c === 'string') ? <span dangerouslySetInnerHTML={{ __html: c.replace(regex, '<mark>$1</mark>')}}></span> : c;
     });
@@ -83,7 +87,8 @@ Item.propTypes = {
   setFocus: React.PropTypes.func,
   handleItemFocus: React.PropTypes.func,
   onSelect: React.PropTypes.func,
-  data: React.PropTypes.object
+  data: React.PropTypes.object,
+  boldRegex: React.PropTypes.instanceOf(RegExp)
 };
 
 Item.defaultProps = {

components/SLDSLookup/Menu/index.js

@@ -71,21 +71,22 @@ class Menu extends React.Component {
       const id = c.id;
       let isActive = false;
       if(this.props.header){
-        isActive = this.props.focusIndex === i + 1? true : false;
+        isActive = this.props.focusIndex === i + 1 ? true : false;
       }else{
         isActive = this.props.focusIndex === i  ? true : false;
       }
       return <Item
-      key={id}
-      id={id}
-      type={this.props.type}
-      searchTerm={this.props.searchTerm}
-      index={i}
-      isActive={isActive}
-      setFocus={this.props.setFocus}
-      handleItemFocus={this.handleItemFocus.bind(this)}
-      onSelect={this.props.onSelect}
-      data={c.data}
+        key={id}
+        id={id}
+        type={this.props.type}
+        searchTerm={this.props.searchTerm}
+        index={i}
+        isActive={isActive}
+        setFocus={this.props.setFocus}
+        handleItemFocus={this.handleItemFocus.bind(this)}
+        onSelect={this.props.onSelect}
+        data={c.data}
+        boldRegex={this.props.boldRegex}
       >
       {c}
       </Item>
@@ -132,6 +133,7 @@ Menu.propTypes = {
   filterWith: React.PropTypes.func,
   getListLength: React.PropTypes.func,
   setFocus: React.PropTypes.func,
+  boldRegex: React.PropTypes.instanceOf(RegExp),
 };
 
 Menu.defaultProps = {

components/SLDSLookup/index.jsx

@@ -41,8 +41,6 @@ class SLDSLookup extends React.Component {
       errors:[],
       messages:[],
     };
-
-
   }
 
   componentDidMount(){
@@ -99,6 +97,7 @@ class SLDSLookup extends React.Component {
       selectedIndex: null,
       isOpen: true,
     });
+    if(this.props.onItemUnselect) this.props.onItemUnselect();
   }
 
   //=================================================
@@ -236,6 +235,7 @@ class SLDSLookup extends React.Component {
         onSelect={this.selectItem.bind(this)}
         header={this.getHeader()}
         footer={this.getFooter()}
+        boldRegex={this.props.boldRegex}
       />;
     }
   }
@@ -259,7 +259,7 @@ class SLDSLookup extends React.Component {
           {this.renderMenuContent()}
         </SLDSPopover>;
       }
-  };
+  }
 
   renderSelectedItem(){
     let selectedItem = this.props.items[this.state.selectedIndex].label;
@@ -357,9 +357,11 @@ SLDSLookup.propTypes = {
   type: React.PropTypes.string,
   filterWith: React.PropTypes.func,
   onItemSelect: React.PropTypes.func,
+  onItemUnselect: React.PropTypes.func,
   onChange: React.PropTypes.func,
   modal: React.PropTypes.bool,
   disabled: React.PropTypes.bool,
+  boldRegex: React.PropTypes.instanceOf(RegExp),
 };
 
 SLDSLookup.defaultProps = {