Re-name 'selected' state 'index'

Author: i-like-robots

lib/Input.js

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

lib/ReactTags.js

@@ -27,7 +27,7 @@ const CLASS_NAMES = {
 }
 
 function pressDelimiterKey (e) {
-  if (this.state.query || this.state.selected > -1) {
+  if (this.state.query || this.state.index > -1) {
     e.preventDefault()
   }
 
@@ -37,7 +37,7 @@ function pressDelimiterKey (e) {
       return matchExact(this.state.query).test(option.name)
     })
 
-    const index = this.state.selected === -1 ? match : this.state.selected
+    const index = this.state.index === -1 ? match : this.state.index
 
     if (index > -1) {
       this.addTag(this.state.options[index])
@@ -51,21 +51,21 @@ function pressUpKey (e) {
   e.preventDefault()
 
   // if first item, cycle to the bottom
-  if (this.state.selected <= 0) {
-    this.setState({ selected: this.state.options.length - 1 })
+  if (this.state.index <= 0) {
+    this.setState({ index: this.state.options.length - 1 })
   } else {
-    this.setState({ selected: this.state.selected - 1 })
+    this.setState({ index: this.state.index - 1 })
   }
 }
 
 function pressDownKey (e) {
   e.preventDefault()
 
   // if last item, cycle to top
-  if (this.state.selected >= this.state.options.length - 1) {
-    this.setState({ selected: 0 })
+  if (this.state.index >= this.state.options.length - 1) {
+    this.setState({ index: 0 })
   } else {
-    this.setState({ selected: this.state.selected + 1 })
+    this.setState({ index: this.state.index + 1 })
   }
 }
 
@@ -89,7 +89,7 @@ class ReactTags extends React.Component {
       query: '',
       focused: false,
       options: [],
-      selected: -1,
+      index: -1,
       classNames: Object.assign({}, CLASS_NAMES, this.props.classNames)
     }
   }
@@ -142,7 +142,7 @@ class ReactTags extends React.Component {
   }
 
   onBlur () {
-    this.setState({ focused: false, selected: -1 })
+    this.setState({ focused: false, index: -1 })
 
     if (this.props.onBlur) {
       this.props.onBlur()
@@ -167,7 +167,7 @@ class ReactTags extends React.Component {
     // reset the state
     this.setState({
       query: '',
-      selected: -1
+      index: -1
     })
   }
 

lib/Suggestions.js

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

lib/concerns/matchers.js

@@ -2,16 +2,14 @@ function escapeForRegExp (string) {
   return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
 }
 
-function matchAny (string) {
+export function matchAny (string) {
   return new RegExp(escapeForRegExp(string), 'gi')
 }
 
-function matchPartial (string) {
+export function matchPartial (string) {
   return new RegExp(`(?:^|\\s)${escapeForRegExp(string)}`, 'i')
 }
 
-function matchExact (string) {
+export function matchExact (string) {
   return new RegExp(`^${escapeForRegExp(string)}$`, 'i')
 }
-
-module.exports = { escapeForRegExp, matchAny, matchPartial, matchExact }