@lyra/components/lib/autocomplete/DefaultAutocomplete.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _uniqueId2 = require('lodash/uniqueId');

var _uniqueId3 = _interopRequireDefault(_uniqueId2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _default = require('part:@lyra/components/formfields/default');

var _default2 = _interopRequireDefault(_default);

var _default3 = require('part:@lyra/components/textinputs/default');

var _default4 = _interopRequireDefault(_default3);

var _defaultStyle = require('part:@lyra/components/autocomplete/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

var _default5 = require('part:@lyra/components/lists/default');

var _default6 = _interopRequireDefault(_default5);

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

class DefaultAutocomplete extends _react2.default.Component {

  constructor(props, context) {
    super(props, context);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleKeyPress() {
    // console.log('press')
  }

  handleSelect(item) {
    this.props.onSelect(item);
  }

  handleChange(event) {
    this.props.onChange(event);
  }

  componentWillMount() {
    this._inputId = this.props.id || (0, _uniqueId3.default)('Autocomplete');
  }

  render() {
    var _props = this.props;
    const suggestions = _props.suggestions,
          label = _props.label,
          value = _props.value;


    const isOpen = suggestions.length > 1;

    return _react2.default.createElement(
      _default2.default,
      {
        className: `${isOpen ? _defaultStyle2.default.opened : _defaultStyle2.default.closed}`,
        label: label,
        labelFor: this._inputId
      },
      _react2.default.createElement(
        'div',
        { className: _defaultStyle2.default.input },
        _react2.default.createElement(_default4.default, {
          id: this._inputId,
          value: value,
          onKeyPress: this.handleKeyPress,
          className: _defaultStyle2.default.textField,
          onChange: this.handleChange
        })
      ),
      _react2.default.createElement(
        'div',
        { className: _defaultStyle2.default.suggestionsContainer },
        _react2.default.createElement(_default6.default, {
          items: suggestions,
          className: _defaultStyle2.default.suggestions,
          onSelect: this.handleSelect
        })
      )
    );
  }
}
exports.default = DefaultAutocomplete;
DefaultAutocomplete.propTypes = {
  label: _propTypes2.default.string.isRequired,
  onChange: _propTypes2.default.func,
  onSelect: _propTypes2.default.func,
  value: _propTypes2.default.string,
  hasError: _propTypes2.default.bool,
  onKeyPress: _propTypes2.default.func,
  placeholder: _propTypes2.default.string,
  isClearable: _propTypes2.default.bool,
  isOpen: _propTypes2.default.bool,
  id: _propTypes2.default.string,
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string
  })),
  suggestions: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string
  }))
};
DefaultAutocomplete.defaultProps = {
  value: '',
  onChange() {},
  onSelect() {},
  suggestions: []
};