From d4b457a83c27d944c4329411bf4c778f3db0d2c8 Mon Sep 17 00:00:00 2001
From: Donielle Berg <donielle.berg@gmail.com>
Date: Thu, 22 Oct 2015 13:35:51 -0700
Subject: [PATCH] Add onChange to lookup

---
 components/SLDSLookup/Menu/Item/index.jsx        |  1 -
 components/SLDSLookup/index.jsx                  | 14 +++++++-------
 demo/code-snippets/SLDSLookupPage.txt            | 10 +++++++++-
 demo/pages/HomePage/LookupBaseDynamicSection.jsx | 12 +++++++++++-
 demo/pages/HomePage/LookupBaseSection.jsx        | 12 +++++++++++-
 5 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/components/SLDSLookup/Menu/Item/index.jsx b/components/SLDSLookup/Menu/Item/index.jsx
index e8e1004342..9e7e84f5e9 100644
--- a/components/SLDSLookup/Menu/Item/index.jsx
+++ b/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);
   }
 
diff --git a/components/SLDSLookup/index.jsx b/components/SLDSLookup/index.jsx
index d727d50cb2..535b63079f 100644
--- a/components/SLDSLookup/index.jsx
+++ b/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;
diff --git a/demo/code-snippets/SLDSLookupPage.txt b/demo/code-snippets/SLDSLookupPage.txt
index 3c07dbe8e1..4c16cb98f2 100644
--- a/demo/code-snippets/SLDSLookupPage.txt
+++ b/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} />
+
 
diff --git a/demo/pages/HomePage/LookupBaseDynamicSection.jsx b/demo/pages/HomePage/LookupBaseDynamicSection.jsx
index 04bbaa16a2..23e8a7d125 100644
--- a/demo/pages/HomePage/LookupBaseDynamicSection.jsx
+++ b/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}
                 />
diff --git a/demo/pages/HomePage/LookupBaseSection.jsx b/demo/pages/HomePage/LookupBaseSection.jsx
index d208025dd7..1947c44ece 100644
--- a/demo/pages/HomePage/LookupBaseSection.jsx
+++ b/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}
                 />