Add onChange to lookup

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -34,7 +34,6 @@ class Item extends React.Component {
 
   handleClick(e){
     EventUtil.trapImmediate(e);
-    console.log('>>> this.props.id: ',this.props.id);
     return this.props.onSelect(this.props.id);
   }
 

components/SLDSLookup/index.jsx

@@ -25,7 +25,8 @@ class SLDSLookup extends React.Component {
     super(props);
 
     //Dynamically assign ids to list items to reference for focusing and selecting items
-//    this.props.items.map((item, index) => { return item.id = 'item-' + index; })
+    //this.props.items.map((item, index) => { return item.id = 'item-' + index; })
+
 
     this.state = {
       searchTerm: '',
@@ -77,7 +78,7 @@ class SLDSLookup extends React.Component {
       selectedIndex: index,
       searchTerm: null
     });
-    if(this.props.onItemSelect) this.props.onItemSelect();
+    if(this.props.onItemSelect) this.props.onItemSelect(itemId);
   }
 
   handleDeleteSelected() {
@@ -130,6 +131,7 @@ class SLDSLookup extends React.Component {
   handleChange(event) {
     const target = event.target || event.currentTarget;
     this.setState({searchTerm: target.value});
+    if(this.props.onChange) this.props.onChange(target.value);
   }
 
   handleKeyDown(event) {
@@ -227,7 +229,7 @@ class SLDSLookup extends React.Component {
         </span>
         <SLDSButton
           label='Press delete to remove'
-          tabindex="-1"
+          tabIndex="-1"
           variant='icon'
           iconName='close'
           iconSize='medium'
@@ -286,6 +288,7 @@ SLDSLookup.propTypes = {
   type: React.PropTypes.string,
   filterWith: React.PropTypes.func,
   onItemSelect: React.PropTypes.func,
+  onChange: React.PropTypes.func,
   onNewItem: React.PropTypes.func,
   onSearchRecords: React.PropTypes.func,
   modal: React.PropTypes["bool"],
@@ -295,10 +298,7 @@ SLDSLookup.propTypes = {
 SLDSLookup.defaultProps = {
   filterWith: defaultFilter,
   modal: false,
-  disabled: false,
-  onItemSelect: function(item){
-    //console.log('onItemSelect should be defined');
-  }
+  disabled: false
 };
 
 module.exports = SLDSLookup;

demo/code-snippets/SLDSLookupPage.txt

@@ -8,5 +8,13 @@ const items = [
   {label:'Acme Construction'}
 ];
 
-<SLDSLookup items={items} label="Accounts" type="account" onNewItem={this.newItem} onSearchRecords={this.searchRecords} />
+<SLDSLookup
+  items={items}
+  label="Accounts"
+  type="account"
+  onChange={this.onChange}
+  onItemSelect={this.onItemSelect}
+  onNewItem={this.newItem}
+  onSearchRecords={this.searchRecords} />
+
 

demo/pages/HomePage/LookupBaseDynamicSection.jsx

@@ -45,16 +45,26 @@ module.exports = React.createClass( {
     alert('Search Records Clicked');
   },
 
+  onChange(newValue){
+    console.log('New search term: ', newValue);
+  },
+
+  selectItem(item){
+    console.log(item + ' Selected');
+  },
+
   render() {
     return (
 
             <div className="slds-p-around--medium">
             Dynamic list
               <div className="slds-p-vertical--large">
-                <SLDSLookup 
+                <SLDSLookup
                   items={this.state.items}
                   label="Accounts"
                   type="account"
+                  onChange={this.onChange}
+                  onItemSelect={this.selectItem}
                   onNewItem={this.newItem}
                   onSearchRecords={this.searchRecords}
                 />

demo/pages/HomePage/LookupBaseSection.jsx

@@ -44,6 +44,14 @@ module.exports = React.createClass( {
     alert('Search Records Clicked');
   },
 
+  onChange(newValue){
+    console.log('New search term: ', newValue);
+  },
+
+  selectItem(item){
+    console.log(item + ' Selected');
+  },
+
   render() {
     return (
 
@@ -60,10 +68,12 @@ module.exports = React.createClass( {
               </PrismCode>
 
               <div className="slds-p-vertical--large">
-                <SLDSLookup 
+                <SLDSLookup
                   items={items}
                   label="Accounts"
                   type="account"
+                  onChange={this.onChange}
+                  onItemSelect={this.selectItem}
                   onNewItem={this.newItem}
                   onSearchRecords={this.searchRecords}
                 />