modified: components/SLDSLookup/Menu/index.js

Author: hikkitada

components/SLDSLookup/Menu/index.js

@@ -65,7 +65,13 @@ class Menu extends React.Component {
       return <div className={isActiveClass}>{this.props.footer}</div>;
     }
   }
-
+  renderMessages(){
+    if (this.props.messages.length){
+      return <li className="slds-lookup__item" role="presentaion">
+        {this.props.messages.join("; ")}
+      </li>
+    }
+  }
   renderItems(){
     return this.props.items.filter(this.filter, this).map((c, i) => {
       //isActive means it is aria-activedescendant
@@ -97,11 +103,10 @@ class Menu extends React.Component {
     return (
       <section id="menuContainer">
         {this.renderHeader()}
-
         <ul id="list" className="slds-lookup__list" role="presentation" ref="list">
+          {this.renderMessages()}
           {this.renderItems()}
         </ul>
-
         {this.renderFooter()}
       </section>
     )
@@ -115,6 +120,7 @@ Menu.propTypes = {
   focusIndex: React.PropTypes.number,
   listLength: React.PropTypes.number,
   items: React.PropTypes.array,
+  messages: 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:[],
     };
 
 
@@ -189,6 +191,8 @@ 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}
         filterWith={this.props.filterWith}
         getListLength={this.getListLength.bind(this)}
         setFocus={this.setFocus.bind(this)}
@@ -220,6 +224,11 @@ 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 (
@@ -257,6 +266,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({error: newProps.error});
+    }
   }
 
   render(){
@@ -292,7 +307,7 @@ class SLDSLookup extends React.Component {
               value={this.state.searchTerm}
             />
           </div>
-
+          {this.renderErrors()}
           {this.props.modal?this.renderModalMenu():this.renderSimpleMenu()}
         </section>
       </div>
@@ -303,6 +318,9 @@ 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),
   label: React.PropTypes.string,
   type: React.PropTypes.string,
   filterWith: React.PropTypes.func,