@lyra/components/lib/selects/FuzzySearchableSelect.js

Basic UX components

'use strict';

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

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 _searchable = require('part:@lyra/components/selects/searchable');

var _searchable2 = _interopRequireDefault(_searchable);

var _fuse = require('fuse.js');

var _fuse2 = _interopRequireDefault(_fuse);

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

class FuzzySearchableSelect extends _react2.default.Component {

  constructor(props, context) {
    super(props, context);
    this.handleSearch = this.handleSearch.bind(this);

    const fuseOptions = {
      keys: ['title']
    };

    const items = this.props.items;


    this.fuse = new _fuse2.default(items, fuseOptions);

    this.state = {
      searchResult: [],
      query: null
    };
  }

  handleSearch(query) {
    this.setState({
      searchResult: this.fuse.search(query)
    });
  }

  render() {
    var _props = this.props;
    const label = _props.label,
          error = _props.error,
          value = _props.value,
          placeholder = _props.placeholder;
    var _state = this.state;
    const searchResult = _state.searchResult,
          loading = _state.loading;


    return _react2.default.createElement(
      _default2.default,
      { error: error, label: label },
      _react2.default.createElement(_searchable2.default, {
        placeholder: placeholder,
        value: value,
        onSearch: this.handleSearch,
        onChange: this.props.onChange,
        onFocus: this.props.onChange,
        loading: loading,
        items: searchResult
      })
    );
  }
}
exports.default = FuzzySearchableSelect;
FuzzySearchableSelect.propTypes = {
  label: _propTypes2.default.string.isRequired,
  placeholder: _propTypes2.default.string,
  onChange: _propTypes2.default.func,
  value: _propTypes2.default.object,
  error: _propTypes2.default.bool,
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string
  }))
};
FuzzySearchableSelect.defaultProps = {
  onChange() {},
  onBlur() {},
  onFocus() {}
};