Merge pull request #43 from hikkitada/htsang_modified_lookup

Htsang modified lookup

Author: ivansfdc

components/SLDSLookup/Menu/index.js

@@ -53,6 +53,17 @@ class Menu extends React.Component {
       return <div className={isActiveClass}>{this.props.footer}</div>;
     }
   }
+  renderMessages(){
+    return this.props.messages.map((message) => {
+      return <li className="slds-lookup__message" aria-live="polite">{message}</li>;
+    });
+  }
+
+  renderErrors(){
+    return this.props.errors.map((error) => {
+      return <li className="slds-lookup__error" aria-live="polite">{error}</li>;
+    });
+  }
 
   renderItems(){
     return this.props.items.filter(this.filter, this).map((c, i) => {
@@ -81,15 +92,27 @@ class Menu extends React.Component {
     });
   }
 
+  renderContent() {
+    if (this.props.errors.length)
+      return this.renderErrors
+    else if (this.props.items.length === 0)
+      return <li className="slds-lookup__message" aria-live="polite">{this.props.emptyMessage}</li>;
+    
+    elements = this.renderItems()
+    if (this.props.messages.length){
+      return elements.concat(this.renderMessages());
+    }
+    return elements;
+
+  }
+
   render(){
     return (
       <section id="menuContainer">
         {this.renderHeader()}
-
         <ul id="list" className="slds-lookup__list" role="presentation" ref="list">
-          {this.renderItems()}
+          {this.renderContent()}
         </ul>
-
         {this.renderFooter()}
       </section>
     )
@@ -103,6 +126,9 @@ Menu.propTypes = {
   focusIndex: React.PropTypes.number,
   listLength: React.PropTypes.number,
   items: React.PropTypes.array,
+  emptyMessage: React.PropTypes.string,
+  messages: React.PropTypes.arrayOf(React.PropTypes.string),
+  errors: React.PropTypes.arrayOf(React.PropTypes.string),
   filterWith: React.PropTypes.func,
   getListLength: React.PropTypes.func,
   setFocus: React.PropTypes.func,

components/SLDSLookup/index.jsx

@@ -37,7 +37,9 @@ class SLDSLookup extends React.Component {
       focusIndex:null,
       selectedIndex: null,
       listLength:this.props.items.length,
-      items:[]
+      items:[],
+      errors:[],
+      messages:[],
     };
 
 
@@ -225,6 +227,9 @@ class SLDSLookup extends React.Component {
         focusIndex={this.state.focusIndex}
         listLength={this.state.listLength}
         items={this.state.items}
+        emptyMessage={this.props.emptyMessage}
+        messages={this.state.messages}
+        errors={this.state.errors}
         filterWith={this.props.filterWith}
         getListLength={this.getListLength.bind(this)}
         setFocus={this.setFocus.bind(this)}
@@ -293,6 +298,12 @@ class SLDSLookup extends React.Component {
     if(newProps.items){
       this.modifyItems(newProps.items);
     }
+    if (newProps.message){
+      this.setState({message: newProps.message});
+    }
+    if (newProps.error){
+      this.setState({errors: newProps.error});
+    }
   }
 
   render(){
@@ -328,7 +339,6 @@ class SLDSLookup extends React.Component {
               value={this.state.searchTerm}
             />
           </div>
-
           {this.props.modal?this.renderModalMenu():this.renderSimpleMenu()}
         </section>
       </div>
@@ -339,6 +349,10 @@ class SLDSLookup extends React.Component {
 
 SLDSLookup.propTypes = {
   items: React.PropTypes.array,
+  errors: React.PropTypes.arrayOf(React.PropTypes.string),
+  emptyMessage: React.PropTypes.string,
+  messages: React.PropTypes.arrayOf(React.PropTypes.string),
+  errors: React.PropTypes.arrayOf(React.PropTypes.string),
   label: React.PropTypes.string,
   type: React.PropTypes.string,
   filterWith: React.PropTypes.func,

demo/pages/HomePage/PicklistBaseSection.jsx

@@ -57,7 +57,7 @@ module.exports = React.createClass( {
               <div className="slds-p-vertical--large">
                 <SLDSPicklistBase
                     options={[
-                      {label:'A Option Option Super Super Long',value:'A0'},
+                      {label:'A Option Option Super Super Long',value:'A0', title: 'Greg'},
                       {label:'B Option',value:'B0'},
                       {label:'C Option',value:'C0'},
                       {label:'D Option',value:'D0'},