react-tag-input-custom-search/dist-es5/Suggestions.js

React Tag Autocomplete is a simple tagging component ready to drop in your React projects.

'use strict'

var React = require('react')
var _ = require('lodash')

function escapeForRegExp (query) {
  return query.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
}

function markIt (item, query) {
  var input = item.name;
  var name = (_.get(item,'condition.length',0) == 1 ? (' ' + _.get(item,['condition',0])) : '');
  var regex = RegExp(escapeForRegExp(query), 'gi')

  return {
    __html: input.replace(regex, '<mark>$&</mark>') + name
  }
}

function filterSuggestions (query, suggestions, length, suggestionsFilter) {
  if (!suggestionsFilter) {
    var regex = new RegExp(("(?:^|\\s)" + (escapeForRegExp(query))), 'i')
    suggestionsFilter = function (item) { return regex.test(item.name); }
  }
  return suggestions.filter(suggestionsFilter).slice(0, length)
}

var Suggestions = (function (superclass) {
  function Suggestions (props) {
    superclass.call(this, props)

    this.state = {
      options: filterSuggestions(this.props.query, this.props.suggestions, this.props.maxSuggestionsLength, this.props.suggestionsFilter)
    }
  }

  if ( superclass ) Suggestions.__proto__ = superclass;
  Suggestions.prototype = Object.create( superclass && superclass.prototype );
  Suggestions.prototype.constructor = Suggestions;

  Suggestions.prototype.componentWillReceiveProps = function componentWillReceiveProps (newProps) {
    this.setState({
      options: filterSuggestions(newProps.query, newProps.suggestions, newProps.maxSuggestionsLength, newProps.suggestionsFilter)
    })
  };

  Suggestions.prototype.handleMouseDown = function handleMouseDown (item, e) {
    // if(item.disabled){
    //   console.log('item disabled called');
    //   e.preventDefault()
    //   return;
    // }
    // focus is shifted on mouse down but calling preventDefault prevents this
    e.preventDefault()
    this.props.addTag(item)
  };

  Suggestions.prototype.render = function render () {
    var this$1 = this;

    if (!this.props.expandable || !this.state.options.length) {
      return null
    }

    var options = this.state.options.map(function (item, i) {
      var key = (this$1.props.listboxId) + "-" + i
      var classNames = []

      if (this$1.props.selectedIndex === i) {
        classNames.push(this$1.props.classNames.suggestionActive)
      }

      if (item.disabled) {
        classNames.push(this$1.props.classNames.suggestionDisabled)
      }

      return (
        React.createElement( 'li', {
          id: key, key: key, role: 'option', className: classNames.join(' '), 'aria-disabled': item.disabled === true, onMouseDown: this$1.handleMouseDown.bind(this$1, item) },
          React.createElement( 'span', { dangerouslySetInnerHTML: markIt(item, this$1.props.query) })
        )
      )
    })

    return (
      React.createElement( 'div', { className: this.props.classNames.suggestions },
        React.createElement( 'ul', { role: 'listbox', id: this.props.listboxId }, options)
      )
    )
  };

  return Suggestions;
}(React.Component));

module.exports = Suggestions