Refactor internal state, selectedIndex => selected

Author: i-like-robots

lib/Input.js

@@ -65,7 +65,7 @@ class Input extends React.Component {
   }
 
   render () {
-    const { query, placeholder, expanded, listboxId, selectedIndex } = this.props
+    const { query, placeholder, expanded, listboxId, selected } = this.props
 
     return (
       <div className={this.props.classNames.searchInput}>
@@ -77,7 +77,7 @@ class Input extends React.Component {
           aria-autocomplete='list'
           aria-label={placeholder}
           aria-owns={listboxId}
-          aria-activedescendant={selectedIndex > -1 ? `${listboxId}-${selectedIndex}` : null}
+          aria-activedescendant={selected > -1 ? `${listboxId}-${selected}` : null}
           aria-expanded={expanded}
           style={{ width: this.state.inputWidth }} />
         <div ref={(c) => { this.sizer = c }} style={SIZER_STYLES}>{query || placeholder}</div>

lib/ReactTags.js

@@ -35,7 +35,7 @@ class ReactTags extends React.Component {
       query: '',
       focused: false,
       expanded: false,
-      selectedIndex: -1,
+      selected: -1,
       classNames: Object.assign({}, CLASS_NAMES, this.props.classNames)
     }
   }
@@ -57,12 +57,12 @@ class ReactTags extends React.Component {
   }
 
   onKeyDown (e) {
-    const { query, selectedIndex } = this.state
+    const { query, selected } = this.state
     const { delimiters } = this.props
 
     // when one of the terminating keys is pressed, add current query to the tags.
     if (delimiters.indexOf(e.key) > -1) {
-      if (query || selectedIndex > -1) {
+      if (query || selected > -1) {
         e.preventDefault()
       }
 
@@ -72,7 +72,7 @@ class ReactTags extends React.Component {
           suggestion.name.search(new RegExp(`^${query}$`, 'i')) === 0
         ))
 
-        const index = selectedIndex === -1 ? match : selectedIndex
+        const index = selected === -1 ? match : selected
 
         if (index > -1) {
           this.addTag(this.suggestions.state.options[index])
@@ -91,17 +91,17 @@ class ReactTags extends React.Component {
       e.preventDefault()
 
       // if last item, cycle to the bottom
-      if (selectedIndex <= 0) {
-        this.setState({ selectedIndex: this.suggestions.state.options.length - 1 })
+      if (selected <= 0) {
+        this.setState({ selected: this.suggestions.state.options.length - 1 })
       } else {
-        this.setState({ selectedIndex: selectedIndex - 1 })
+        this.setState({ selected: selected - 1 })
       }
     }
 
     if (e.key === KEYS.DOWN_ARROW) {
       e.preventDefault()
 
-      this.setState({ selectedIndex: (selectedIndex + 1) % this.suggestions.state.options.length })
+      this.setState({ selected: (selected + 1) % this.suggestions.state.options.length })
     }
   }
 
@@ -112,7 +112,7 @@ class ReactTags extends React.Component {
   }
 
   onBlur () {
-    this.setState({ focused: false, selectedIndex: -1 })
+    this.setState({ focused: false, selected: -1 })
 
     if (this.props.onBlur) {
       this.props.onBlur()
@@ -137,7 +137,7 @@ class ReactTags extends React.Component {
     // reset the state
     this.setState({
       query: '',
-      selectedIndex: -1
+      selected: -1
     })
   }
 
@@ -171,10 +171,10 @@ class ReactTags extends React.Component {
         </div>
         <div
           className={this.state.classNames.search}
-          onBlurCapture={this.onBlur.bind(this)}
           onFocusCapture={this.onFocus.bind(this)}
-          onInput={this.onInput.bind(this)}
-          onKeyDown={this.onKeyDown.bind(this)}>
+          onBlurCapture={this.onBlur.bind(this)}
+          onKeyDown={this.onKeyDown.bind(this)}
+          onInput={this.onInput.bind(this)}>
           <Input {...this.state}
             ref={(c) => { this.input = c }}
             listboxId={listboxId}

lib/Suggestions.js

@@ -49,7 +49,7 @@ class Suggestions extends React.Component {
       const key = `${this.props.listboxId}-${i}`
       const classNames = []
 
-      if (this.props.selectedIndex === i) {
+      if (this.props.selected === i) {
         classNames.push(this.props.classNames.suggestionActive)
       }