Refactor key handlers into separate functions

Author: i-like-robots

lib/ReactTags.js

@@ -25,14 +25,63 @@ const CLASS_NAMES = {
   suggestionDisabled: 'is-disabled'
 }
 
+function pressDelimiterKey (e) {
+  if (this.state.query || this.state.selected > -1) {
+    e.preventDefault()
+  }
+
+  if (this.state.query.length >= this.props.minQueryLength) {
+    // Check if the user typed in an existing suggestion.
+    const match = this.suggestions.state.options.findIndex((suggestion) => (
+      suggestion.name.search(new RegExp(`^${this.state.query}$`, 'i')) === 0
+    ))
+
+    const index = this.state.selected === -1 ? match : this.state.selected
+
+    if (index > -1) {
+      this.addTag(this.suggestions.state.options[index])
+    } else if (this.props.allowNew) {
+      this.addTag({ name: this.state.query })
+    }
+  }
+}
+
+function pressUpKey (e) {
+  e.preventDefault()
+
+  // if first item, cycle to the bottom
+  if (this.state.selected <= 0) {
+    this.setState({ selected: this.suggestions.state.options.length - 1 })
+  } else {
+    this.setState({ selected: this.state.selected - 1 })
+  }
+}
+
+function pressDownKey (e) {
+  e.preventDefault()
+
+  // if last item, cycle to top
+  if (this.state.selected >= this.suggestions.state.options.length - 1) {
+    this.setState({ selected: 0 })
+  } else {
+    this.setState({ selected: this.state.selected + 1 })
+  }
+}
+
+function pressBackspaceKey () {
+  // when backspace key is pressed and query is blank, delete the last tag
+  if (!this.state.query.length) {
+    this.deleteTag(this.props.tags.length - 1)
+  }
+}
+
 class ReactTags extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
       query: '',
       focused: false,
-      expanded: false,
       selected: -1,
       classNames: Object.assign({}, CLASS_NAMES, this.props.classNames)
     }
@@ -55,51 +104,22 @@ class ReactTags extends React.Component {
   }
 
   onKeyDown (e) {
-    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 || selected > -1) {
-        e.preventDefault()
-      }
-
-      if (query.length >= this.props.minQueryLength) {
-        // Check if the user typed in an existing suggestion.
-        const match = this.suggestions.state.options.findIndex((suggestion) => (
-          suggestion.name.search(new RegExp(`^${query}$`, 'i')) === 0
-        ))
-
-        const index = selected === -1 ? match : selected
-
-        if (index > -1) {
-          this.addTag(this.suggestions.state.options[index])
-        } else if (this.props.allowNew) {
-          this.addTag({ name: query })
-        }
-      }
+    // when one of the terminating keys is pressed, add current query to the tags
+    if (this.props.delimiters.indexOf(e.key) > -1) {
+      pressDelimiterKey.call(this, e)
     }
 
     // when backspace key is pressed and query is blank, delete the last tag
-    if (e.key === KEYS.BACKSPACE && query.length === 0 && this.props.allowBackspace) {
-      this.deleteTag(this.props.tags.length - 1)
+    if (e.key === KEYS.BACKSPACE && this.props.allowBackspace) {
+      pressBackspaceKey.call(this, e)
     }
 
     if (e.key === KEYS.UP_ARROW) {
-      e.preventDefault()
-
-      // if last item, cycle to the bottom
-      if (selected <= 0) {
-        this.setState({ selected: this.suggestions.state.options.length - 1 })
-      } else {
-        this.setState({ selected: selected - 1 })
-      }
+      pressUpKey.call(this, e)
     }
 
     if (e.key === KEYS.DOWN_ARROW) {
-      e.preventDefault()
-
-      this.setState({ selected: (selected + 1) % this.suggestions.state.options.length })
+      pressDownKey.call(this, e)
     }
   }