Add error/emptymessage/messages into lookup

Author: hikkitada

components/SLDSLookup/Menu/index.js

@@ -66,12 +66,17 @@ class Menu extends React.Component {
     }
   }
   renderMessages(){
-    if (this.props.messages.length){
-      return <li className="slds-lookup__item" role="presentaion">
-        {this.props.messages.join("; ")}
-      </li>
-    }
+    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) => {
       //isActive means it is aria-activedescendant
@@ -99,13 +104,26 @@ 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.renderMessages()}
-          {this.renderItems()}
+          {this.renderContent()}
         </ul>
         {this.renderFooter()}
       </section>
@@ -120,7 +138,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

@@ -193,6 +193,7 @@ class SLDSLookup extends React.Component {
         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)}
@@ -224,11 +225,6 @@ class SLDSLookup extends React.Component {
       }
   };
 
-  renderErrors(){
-    if (this.state.errors.length){
-      return <div className="slds-lookup__error">{this.state.errors.join("; ")}</div>;
-    }
-  }
   renderSelectedItem(){
     let selectedItem = this.props.items[this.state.selectedIndex].label;
     return (
@@ -270,7 +266,7 @@ class SLDSLookup extends React.Component {
       this.setState({message: newProps.message});
     }
     if (newProps.error){
-      this.setState({error: newProps.error});
+      this.setState({errors: newProps.error});
     }
   }
 
@@ -307,7 +303,6 @@ class SLDSLookup extends React.Component {
               value={this.state.searchTerm}
             />
           </div>
-          {this.renderErrors()}
           {this.props.modal?this.renderModalMenu():this.renderSimpleMenu()}
         </section>
       </div>
@@ -319,8 +314,9 @@ class SLDSLookup extends React.Component {
 SLDSLookup.propTypes = {
   items: React.PropTypes.array,
   errors: React.PropTypes.arrayOf(React.PropTypes.string),
-  emptyMessage: 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,