Clean up code and add proptypes

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -17,8 +17,8 @@ class Item extends React.Component {
   }
 
   componentWillReceiveProps(nextProps){
-    if(nextProps.isActive !== this.props.isActive){
-      this.props.setActiveDescendant(nextProps.id);
+    if(nextProps.isActive !== this.props.isActive && (nextProps.isActive === true)){
+      this.props.setFocus(this.props.id);
     }
   }
 
@@ -42,17 +42,13 @@ class Item extends React.Component {
 
   render(){
     let className = 'slds-lookup__item';
-
-    //TODO: make isActive styles into a class??
     let id = this.props.id;
-    let styles = {};
     if(this.props.isActive) className += ' slds-theme--shade';
 
     return (
-      //IMPORTANT: id is used to set lookup's input's aria-activedescendant
+      //IMPORTANT: anchor id is used to set lookup's input's aria-activedescendant
       <li
         className={className}
-        style={styles}
         role="presentaion">
         <a
           href={this.props.href}
@@ -68,7 +64,17 @@ class Item extends React.Component {
       </li>
     )
   }
-
 }
 
+Item.propTypes = {
+  id: React.PropTypes.string,
+  setFocus: React.PropTypes.func,
+  isActive: React.PropTypes.bool,
+  onSelect: React.PropTypes.func,
+  searchTerm: React.PropTypes.string,
+};
+
+Item.defaultProps = {
+};
+
 module.exports = Item;

components/SLDSLookup/Menu/index.js

@@ -30,8 +30,8 @@ class Menu extends React.Component {
   renderItems(){
     return this.props.items.filter(this.filter, this).map((c, i) => {
       //isActive means it is aria-activedescendant
-      const isActive = this.props.activeIndex === i ? true : false;
-      return <Item key={c.id} id={c.id} setActiveDescendant={this.props.setActiveDescendant} isActive={isActive} onSelect={this.props.onSelect} searchTerm={this.props.searchTerm}>{c}</Item>
+      const isActive = this.props.focusIndex === i ? true : false;
+      return <Item key={c.id} id={c.id} setFocus={this.props.setFocus} isActive={isActive} onSelect={this.props.onSelect} searchTerm={this.props.searchTerm}>{c}</Item>
     });
   }
 
@@ -47,4 +47,20 @@ class Menu extends React.Component {
     )
   }
 }
+
+Menu.propTypes = {
+  searchTerm: React.PropTypes.string,
+  filterWith: React.PropTypes.func,
+  onSelect: React.PropTypes.func,
+  label: React.PropTypes.string,
+  items: React.PropTypes.array,
+  setFocus: React.PropTypes.func,
+  getListLength: React.PropTypes.func,
+  listLength: React.PropTypes.number,
+  focusIndex: React.PropTypes.number,
+};
+
+Menu.defaultProps = {
+};
+
 module.exports = Menu;

components/SLDSLookup/index.jsx

@@ -22,34 +22,35 @@ const defaultFilter = (term, item) => {
 class SLDSLookup extends React.Component {
   constructor(props) {
     super(props);
-    this.props.items.map((item, index) => {
-      return item.id = 'item-' + index;
-    })
+
+    //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.state = {
       searchTerm: '',
       isOpen:false,
-      activeItem:null,
+      currentFocus:null,
+      focusIndex:null,
       selectedIndex: null,
-      activeIndex:null,
       listLength:this.props.items.length
     };
   }
 
   //=================================================
-  // Set Active Descendant (on key down/up, set currently focused/hovered item in list)
+  // Using down/up keys, set Focus on list item and assign it to aria-activedescendant attribute in input.
+  // Need to keep track of filtered list length to be able to increment/decrement the focus index so it's contained to the number of available list items.
   increaseIndex(){
     let items = this.state.listLength - 1;
-    this.setState({ activeIndex: this.state.activeIndex < items ? this.state.activeIndex + 1 : 0 })
+    this.setState({ focusIndex: this.state.focusIndex < items ? this.state.focusIndex + 1 : 0 })
   }
 
   decreaseIndex(){
     let items = this.state.listLength - 1;
-    this.setState({ activeIndex: this.state.activeIndex > 0 ? this.state.activeIndex - 1 : items })
+    this.setState({ focusIndex: this.state.focusIndex > 0 ? this.state.focusIndex - 1 : items })
   }
 
-  setActiveDescendant(id){
-    this.setState({activeItem:id});
+  setFocus(id){
+    this.setState({currentFocus:id});
   }
 
   getListLength(qty){
@@ -61,7 +62,6 @@ class SLDSLookup extends React.Component {
   //=================================================
   // Select menu item (onClick or on key enter/space)
   selectItem(itemId){
-    //console.log('selectItem fired');
     let index = itemId.replace('item-', '');
     this.setState({
       selectedIndex: index,
@@ -81,7 +81,7 @@ class SLDSLookup extends React.Component {
   handleClose() {
     this.setState({
       isOpen:false,
-      activeIndex:null
+      focusIndex:null
     })
   }
 
@@ -108,25 +108,25 @@ class SLDSLookup extends React.Component {
       event.keyCode === KEYS.ESCAPE ? this.handleClose() : this.handleClick();
 
       //If user hits tab key, move aria activedescendant to first menu item
-      if(event.keyCode === KEYS.TAB && this.state.activeIndex === null){
-        this.setState({activeIndex: 0});
+      if(event.keyCode === KEYS.TAB && this.state.focusIndex === null){
+        this.setState({focusIndex: 0});
         EventUtil.trapImmediate(event);
       }
       //If user hits down key, advance aria activedescendant to next item
-      else if(event.keyCode === KEYS.DOWN && this.state.activeIndex !== null){
+      else if(event.keyCode === KEYS.DOWN && this.state.focusIndex !== null){
         EventUtil.trapImmediate(event);
         this.increaseIndex();
       }
       //If user hits up key, advance aria activedescendant to previous item
-      else if(event.keyCode === KEYS.UP && this.state.activeIndex !== null){
+      else if(event.keyCode === KEYS.UP && this.state.focusIndex !== null){
         EventUtil.trapImmediate(event);
         this.decreaseIndex();
       }
 
       //If user hits enter/space key, select current activedescendant item
-      else if((event.keyCode === KEYS.ENTER || event.keyCode === KEYS.SPACE) && this.state.activeIndex !== null){
+      else if((event.keyCode === KEYS.ENTER || event.keyCode === KEYS.SPACE) && this.state.focusIndex !== null){
         EventUtil.trapImmediate(event);
-        this.selectItem(this.state.activeItem);
+        this.selectItem(this.state.currentFocus);
       }
     }
   }
@@ -141,10 +141,10 @@ class SLDSLookup extends React.Component {
         onSelect={this.selectItem.bind(this)}
         label={this.props.label}
         items={this.props.items}
-        setActiveDescendant={this.setActiveDescendant.bind(this)}
+        setFocus={this.setFocus.bind(this)}
         getListLength={this.getListLength.bind(this)}
         listLength={this.state.listLength}
-        activeIndex={this.state.activeIndex}/>;
+        focusIndex={this.state.focusIndex}/>;
     }else{
       return null;
     }
@@ -169,11 +169,10 @@ class SLDSLookup extends React.Component {
 
   render(){
     let inputClasses = this.state.selectedIndex === null ? 'slds-input':'slds-input slds-hide';
-    let compClasses = this.state.selectedIndex === null ? "slds-lookup ignore-react-onclickoutside":"slds-lookup ignore-react-onclickoutside slds-has-selection";
-    console.log('activeIndex ', this.state.activeIndex);
+    let componentClasses = this.state.selectedIndex === null ? "slds-lookup ignore-react-onclickoutside":"slds-lookup ignore-react-onclickoutside slds-has-selection";
 
     return (
-      <div className={compClasses} data-select="single" data-scope="single" data-typeahead="true">
+      <div className={componentClasses} data-select="single" data-scope="single" data-typeahead="true">
         <section className="slds-form-element">
           <label className="slds-form-element__label" forHTML="lookup">{this.props.label}</label>
 
@@ -187,7 +186,7 @@ class SLDSLookup extends React.Component {
               aria-label="lookup"
               aria-haspopup="true"
               aria-autocomplete="list"
-              aria-activedescendant={this.state.activeItem ? this.state.activeItem:""}
+              aria-activedescendant={this.state.currentFocus ? this.state.currentFocus:""}
               aria-expanded={this.state.isOpen}
               role="combobox"
               onChange={this.handleChange.bind(this)}
@@ -205,11 +204,18 @@ class SLDSLookup extends React.Component {
   }
 }
 
+
+SLDSLookup.propTypes = {
+  items: React.PropTypes.array,
+  label: React.PropTypes.string,
+};
+
 SLDSLookup.defaultProps = {
   filterWith: defaultFilter,
   onItemSelect: function(item){
-    //console.log('onItemSelect should be defined');
+  //console.log('onItemSelect should be defined');
   }
 };
+
 module.exports = SLDSLookup;
 

components/SLDSModal/index.jsx

@@ -57,7 +57,7 @@ module.exports = React.createClass( {
   },
 
   componentDidMount () {
-    console.log('!!! window.activeElement !!! ',document.activeElement);
+    //console.log('!!! window.activeElement !!! ',document.activeElement);
     this.setState({returnFocusTo:document.activeElement})
     if(!this.state.revealed){
       setTimeout(()=>{
@@ -93,11 +93,11 @@ module.exports = React.createClass( {
   },
 
   getModal() {
-    return <div className={'slds-modal' +(this.state.revealed?' slds-fade-in-open':'')} 
+    return <div className={'slds-modal' +(this.state.revealed?' slds-fade-in-open':'')}
           onClick={this.closeModal}>
-          <div 
+          <div
             role='dialog'
-            className='slds-modal__container' 
+            className='slds-modal__container'
             onClick={(e)=>{EventUtil.trap(e);}}>
             <div className='slds-modal__header'>
               <h2 className='slds-text-heading--medium'>{this.props.title}</h2>
@@ -141,7 +141,7 @@ module.exports = React.createClass( {
 
 
       if(this.state.isClosing){
-        console.log('CLOSING: ');
+        //console.log('CLOSING: ');
 
         if(this.isMounted()){
           const el = this.getDOMNode().parentNode;

demo/index.js

@@ -7,7 +7,7 @@ const { Route, DefaultRoute, RouteHandler, Link } = Router;
 import { SLDSSettings } from '../components/';
 SLDSSettings.setAssetsPath('demo/assets/');
 
-console.log('SLDSSettings.getAssetsPath: '+SLDSSettings.getAssetsPath());
+//console.log('SLDSSettings.getAssetsPath: '+SLDSSettings.getAssetsPath());
 
 import App from './App';
 import HomePage from './pages/HomePage';