@nomios/web-uikit/dist/components/autocomplete-select/AutocompleteSelect.js

Nomios' living web UIKit

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import memoize from 'memoize-one';
import Select from 'react-select';
import styles from './AutocompleteSelect.css';

const hideMenuWithNoOptions = () => 'No options available';

class AutocompleteSelect extends Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "getValueFromOptions", memoize((options, value) => options.find(option => option.value === value)));

    _defineProperty(this, "handleSelectChange", option => this.props.onChange(option.value));
  }

  render() {
    const {
      className,
      value,
      ...rest
    } = this.props;
    const valueObj = this.getValueFromOptions(this.props.options, value);
    return React.createElement(Select, Object.assign({}, rest, {
      value: valueObj,
      classNamePrefix: "autocomplete",
      onChange: this.handleSelectChange,
      className: classNames(styles.container, className)
    }));
  }

}

AutocompleteSelect.propTypes = {
  options: PropTypes.array.isRequired,
  onChange: PropTypes.func.isRequired,
  value: PropTypes.string.isRequired,
  noOptionsMessage: PropTypes.func,
  className: PropTypes.string
};
AutocompleteSelect.defaultProps = {
  noOptionsMessage: hideMenuWithNoOptions
};
export default AutocompleteSelect;