@attivio/suit/lib/components/SimpleAutoCompleteInput.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _class, _temp; /* eslint-disable react/no-multi-comp */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Dropdown = require('react-bootstrap/lib/Dropdown');

var _Dropdown2 = _interopRequireDefault(_Dropdown);

var _MenuItem = require('react-bootstrap/lib/MenuItem');

var _MenuItem2 = _interopRequireDefault(_MenuItem);

var _reactOverlays = require('react-overlays');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * A component to do autocomplete. It differs from the AutoCompleteInput
 * component in that it uses a static list of options and not a dynamically
 * fetched one. Also, since it doesn't have the expense of doing the fetch,
 * the look up and suggestions happen with the first key stroke instead of
 * waiting to have at least three characters.
 */
var SimpleAutoCompleteInput = (_temp = _class = function (_React$Component) {
  _inherits(SimpleAutoCompleteInput, _React$Component);

  // eslint-disable-line max-len
  function SimpleAutoCompleteInput(props) {
    _classCallCheck(this, SimpleAutoCompleteInput);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.state = {
      open: false,
      suggestions: [],
      cursor: -1,
      queryValue: _this.props.value
    };
    _this.closeMenu = _this.closeMenu.bind(_this);
    _this.handleChange = _this.handleChange.bind(_this);
    _this.doKeyPress = _this.doKeyPress.bind(_this);
    _this.valueSelected = _this.valueSelected.bind(_this);
    _this.onToggle = _this.onToggle.bind(_this);
    return _this;
  }

  SimpleAutoCompleteInput.prototype.onToggle = function onToggle(isOpen) {
    this.setState({ open: isOpen });
  };

  SimpleAutoCompleteInput.prototype.valueSelected = function valueSelected(newValue) {
    this.props.updateValue(newValue, true);
    this.closeMenu();
  };

  SimpleAutoCompleteInput.prototype.closeMenu = function closeMenu() {
    this.setState({
      cursor: -1,
      open: false,
      suggestions: [],
      queryValue: ''
    });
  };

  SimpleAutoCompleteInput.prototype.findSuggestions = function findSuggestions(query) {
    if (query && query.length > 0) {
      var lowercaseFilter = query.toLocaleLowerCase();
      return this.props.values.filter(function (value) {
        if (value.toLocaleLowerCase().startsWith(lowercaseFilter)) {
          return true;
        }
        return false;
      });
    }
    return [];
  };

  SimpleAutoCompleteInput.prototype.handleChange = function handleChange(event) {
    var query = event.currentTarget.value;
    this.props.updateValue(query, false);
    if (!query || query.length === 0) {
      this.setState({
        queryValue: '',
        open: false,
        suggestions: []
      });
    } else {
      var _suggestions = this.findSuggestions(query);
      var _open = _suggestions.length > 0;
      if (query && query.length > 0) {
        this.setState({
          queryValue: query,
          open: _open,
          suggestions: _suggestions
        });
      }
    }
  };

  SimpleAutoCompleteInput.prototype.submitChoice = function submitChoice(choice) {
    var valueToSubmit = choice;
    if (!this.props.allowCustomValues) {
      // If we don't allow custom values, we need to make sure that the
      // choice is in the list of possible values before calling the
      // callback.
      var lcChoice = choice.toLocaleLowerCase();
      valueToSubmit = this.props.values.find(function (value) {
        return value.toLocaleLowerCase() === lcChoice;
      });
    }
    if (valueToSubmit) {
      this.props.updateValue(valueToSubmit, true);
      this.closeMenu();
    }
  };

  SimpleAutoCompleteInput.prototype.doKeyPress = function doKeyPress(event) {
    var suggestions = this.state.suggestions;
    // This condition is satisfied when a user presses the enter key.
    if (event.keyCode === 13) {
      var query = event.currentTarget.value;
      this.submitChoice(query);
    } else if (event.keyCode === 40 && this.state.cursor < suggestions.length - 1) {
      // This condition is satisfied when a user presses the down arrow key.
      var newCursor = this.state.cursor + 1;
      var _value = suggestions[newCursor];
      this.setState({
        cursor: newCursor,
        queryValue: _value
      });
    } else if (event.keyCode === 38 && this.state.cursor > 0) {
      // This condition is satisfied when a user presses the up arrow key.
      var _newCursor = this.state.cursor - 1;
      var _value2 = suggestions[_newCursor];
      this.setState({
        cursor: _newCursor,
        queryValue: _value2
      });
    }
  };

  SimpleAutoCompleteInput.prototype.render = function render() {
    var _this2 = this;

    var menuItems = this.state.suggestions.map(function (suggestion, i) {
      var activeState = _this2.state.cursor === i;
      return _react2.default.createElement(
        _MenuItem2.default,
        {
          eventKey: suggestion,
          key: suggestion,
          active: activeState
        },
        suggestion
      );
    });

    return _react2.default.createElement(
      _reactOverlays.RootCloseWrapper,
      {
        onRootClose: this.closeMenu
      },
      _react2.default.createElement(
        _Dropdown2.default,
        {
          id: this.props.id,
          onSelect: this.valueSelected,
          className: 'attivio-dropdown',
          open: this.state.open,
          onToggle: this.onToggle,
          style: this.props.outerStyle
        },
        _react2.default.createElement('input', {
          placeholder: this.props.placeholder,
          value: this.state.queryValue,
          className: this.props.className,
          style: this.props.style,
          disabled: this.props.disabled,
          onInput: this.handleChange,
          onChange: this.handleChange,
          onKeyDown: this.doKeyPress,
          'data-id': this.props.id
        }),
        _react2.default.createElement(_Dropdown2.default.Toggle, {
          style: { display: 'none' }
        }),
        _react2.default.createElement(
          _Dropdown2.default.Menu,
          {
            style: this.props.style
          },
          menuItems
        )
      )
    );
  };

  return SimpleAutoCompleteInput;
}(_react2.default.Component), _class.defaultProps = {
  placeholder: '',
  allowCustomValues: false,
  disabled: false,
  className: '',
  style: {},
  outerStyle: {}
}, _class.displayName = 'SimpleAutoCompleteInput', _temp);
exports.default = SimpleAutoCompleteInput;
module.exports = exports['default'];