Merge branch 'master' into lookup

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -34,7 +34,7 @@ class Item extends React.Component {
 
   handleClick(e){
     EventUtil.trapImmediate(e);
-    return this.props.onSelect(this.props.id);
+    return this.props.onSelect(this.props.id, this.props.data);
   }
 
   //Scroll menu item based on up/down mouse keys (assumes all items are the same height)

components/SLDSLookup/Menu/index.js

@@ -102,7 +102,7 @@ class Menu extends React.Component {
       setFocus={this.props.setFocus}
       handleItemFocus={this.handleItemFocus.bind(this)}
       onSelect={this.props.onSelect}
-      data={c}
+      data={c.data}
       >
       {c}
       </Item>

components/SLDSLookup/index.jsx

@@ -25,16 +25,22 @@ class SLDSLookup extends React.Component {
     super(props);
 
     //Dynamically assign ids to list items to reference for focusing and selecting items
-    this.modifyItems();
 
     this.state = {
       searchTerm: '',
       isOpen:false,
       currentFocus:null,
       focusIndex:null,
       selectedIndex: null,
-      listLength:this.props.items.length
+      listLength:this.props.items.length,
+      items:[]
     };
+
+
+  }
+
+  componentDidMount(){
+    this.modifyItems();
   }
 
   componentDidUpdate(prevProps, prevState){
@@ -71,13 +77,13 @@ class SLDSLookup extends React.Component {
 
   //=================================================
   // Select menu item (onClick or on key enter/space)
-  selectItem(itemId){
-    let index = itemId.replace('item-', '');
+  selectItem(itemId,data){
+    const index = itemId.replace('item-', '');
     this.setState({
       selectedIndex: index,
       searchTerm: null
     });
-    if(this.props.onItemSelect) this.props.onItemSelect(itemId);
+    if(this.props.onItemSelect) this.props.onItemSelect(data);
   }
 
   handleDeleteSelected() {
@@ -186,7 +192,7 @@ class SLDSLookup extends React.Component {
         type={this.props.type}
         focusIndex={this.state.focusIndex}
         listLength={this.state.listLength}
-        items={this.props.items}
+        items={this.state.items}
         filterWith={this.props.filterWith}
         getListLength={this.getListLength.bind(this)}
         setFocus={this.setFocus.bind(this)}
@@ -242,7 +248,15 @@ class SLDSLookup extends React.Component {
   }
 
   modifyItems () {
-    this.props.items.map((item, index) => { return item.id = 'item-' + index; })
+    const items = this.props.items.map((item, index) => { 
+      return {
+        id : 'item-' + index,
+        label: item.label,
+        data : item
+      }
+    });
+
+    this.setState({items:items});
   }
 
   componentWillReceiveProps (newProps) {

demo/pages/HomePage/LookupBaseDynamicSection.jsx

@@ -50,7 +50,7 @@ module.exports = React.createClass( {
   },
 
   handleItemSelect(item){
-    console.log(item);
+    console.dir(item);
   },
 
   render() {

demo/pages/HomePage/LookupBaseSection.jsx

@@ -49,7 +49,7 @@ module.exports = React.createClass( {
   },
 
   selectItem(item){
-    console.log(item + ' Selected');
+    console.log(item , ' Selected');
   },
 
   getHeader(){

dist/design-system-react.js

@@ -58,7 +58,7 @@ var Item = (function (_React$Component) {
     key: 'handleClick',
     value: function handleClick(e) {
       _utils.EventUtil.trapImmediate(e);
-      return this.props.onSelect(this.props.id);
+      return this.props.onSelect(this.props.id, this.props.data);
     }
 
     //Scroll menu item based on up/down mouse keys (assumes all items are the same height)