Refactor filtered suggestions into top-level component

Author: i-like-robots

lib/ReactTags.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import Tag from './Tag'
 import Input from './Input'
 import Suggestions from './Suggestions'
+import { escapeForRegExp } from './utils'
 
 const KEYS = {
   ENTER: 'Enter',
@@ -32,14 +33,17 @@ function pressDelimiterKey (e) {
 
   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 match = this.state.options.findIndex((option) => {
+      const query = escapeForRegExp(this.state.query)
+      const regex = new RegExp(`^${query}$`, 'i')
+
+      return regex.test(option.name)
+    })
 
     const index = this.state.selected === -1 ? match : this.state.selected
 
     if (index > -1) {
-      this.addTag(this.suggestions.state.options[index])
+      this.addTag(this.state.options[index])
     } else if (this.props.allowNew) {
       this.addTag({ name: this.state.query })
     }
@@ -51,7 +55,7 @@ function pressUpKey (e) {
 
   // if first item, cycle to the bottom
   if (this.state.selected <= 0) {
-    this.setState({ selected: this.suggestions.state.options.length - 1 })
+    this.setState({ selected: this.state.options.length - 1 })
   } else {
     this.setState({ selected: this.state.selected - 1 })
   }
@@ -61,7 +65,7 @@ function pressDownKey (e) {
   e.preventDefault()
 
   // if last item, cycle to top
-  if (this.state.selected >= this.suggestions.state.options.length - 1) {
+  if (this.state.selected >= this.state.options.length - 1) {
     this.setState({ selected: 0 })
   } else {
     this.setState({ selected: this.state.selected + 1 })
@@ -75,13 +79,19 @@ function pressBackspaceKey () {
   }
 }
 
+function filterSuggestions (query, suggestions) {
+  const regexp = new RegExp(`(?:^|\\s)${escapeForRegExp(query)}`, 'i')
+  return suggestions.filter((item) => regexp.test(item.name))
+}
+
 class ReactTags extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
       query: '',
       focused: false,
+      options: [],
       selected: -1,
       classNames: Object.assign({}, CLASS_NAMES, this.props.classNames)
     }
@@ -100,7 +110,12 @@ class ReactTags extends React.Component {
       this.props.onInput(query)
     }
 
-    this.setState({ query })
+    if (query !== this.state.query) {
+      const filtered = filterSuggestions(query, this.props.suggestions)
+      const options = filtered.slice(0, this.props.maxSuggestionsLength)
+
+      this.setState({ query, options })
+    }
   }
 
   onKeyDown (e) {
@@ -203,9 +218,7 @@ class ReactTags extends React.Component {
             ref={(c) => { this.suggestions = c }}
             listboxId={listboxId}
             expanded={expanded}
-            suggestions={this.props.suggestions}
-            addTag={this.addTag.bind(this)}
-            maxSuggestionsLength={this.props.maxSuggestionsLength} />
+            addTag={this.addTag.bind(this)} />
         </div>
       </div>
     )

lib/Suggestions.js

@@ -1,49 +1,24 @@
 import React from 'react'
+import { escapeForRegExp } from './utils'
 
-function escapeForRegExp (query) {
-  return query.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
-}
-
-function markIt (input, query) {
-  const regex = RegExp(escapeForRegExp(query), 'gi')
-
-  return {
-    __html: input.replace(regex, '<mark>$&</mark>')
-  }
-}
-
-function filterSuggestions (query, suggestions, length) {
-  const regex = new RegExp(`(?:^|\\s)${escapeForRegExp(query)}`, 'i')
-  return suggestions.filter((item) => regex.test(item.name)).slice(0, length)
+function markIt (name, query) {
+  const regexp = new RegExp(escapeForRegExp(query), 'gi')
+  return name.replace(regexp, '<mark>$&</mark>')
 }
 
 class Suggestions extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      options: filterSuggestions(this.props.query, this.props.suggestions, this.props.maxSuggestionsLength)
-    }
-  }
-
-  componentWillReceiveProps (newProps) {
-    this.setState({
-      options: filterSuggestions(newProps.query, newProps.suggestions, newProps.maxSuggestionsLength)
-    })
-  }
-
   onMouseDown (item, e) {
     // focus is shifted on mouse down but calling preventDefault prevents this
     e.preventDefault()
     this.props.addTag(item)
   }
 
   render () {
-    if (!this.props.expanded || !this.state.options.length) {
+    if (!this.props.expanded || !this.props.options.length) {
       return null
     }
 
-    const options = this.state.options.map((item, i) => {
+    const options = this.props.options.map((item, i) => {
       const key = `${this.props.listboxId}-${i}`
       const classNames = []
 
@@ -63,7 +38,7 @@ class Suggestions extends React.Component {
           className={classNames.join(' ')}
           aria-disabled={item.disabled === true}
           onMouseDown={this.onMouseDown.bind(this, item)}>
-          <span dangerouslySetInnerHTML={markIt(item.name, this.props.query)} />
+          <span dangerouslySetInnerHTML={{ __html: markIt(item.name, this.props.query) }} />
         </li>
       )
     })

lib/utils.js

@@ -0,0 +1,5 @@
+function escapeForRegExp (string) {
+  return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
+}
+
+module.exports = { escapeForRegExp }