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

Basic UX components

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _StatelessSearchableSelect = require('./StatelessSearchableSelect');

var _StatelessSearchableSelect2 = _interopRequireDefault(_StatelessSearchableSelect);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

class SearchableSelect extends _react2.default.PureComponent {

  constructor(props) {
    super();

    _initialiseProps.call(this);

    const inputValue = props.inputValue;

    this.state = {
      inputValue: inputValue || '',
      isOpen: false,
      highlightIndex: -1,
      isInputSelected: false,
      arrowNavigationPosition: 0,
      hasFocus: false
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.items != this.props.items) {
      this.setState({
        searchResult: this.props.items
      });
    }

    if (nextProps.inputValue !== this.props.inputValue) {
      this.setState({
        inputValue: nextProps.inputValue
      });
    }
  }

  focus() {
    this._input.focus();
  }

  render() {
    var _state = this.state;
    const isOpen = _state.isOpen,
          highlightIndex = _state.highlightIndex,
          isInputSelected = _state.isInputSelected,
          inputValue = _state.inputValue,
          hasFocus = _state.hasFocus;
    var _props = this.props;

    const onSearch = _props.onSearch,
          rest = _objectWithoutProperties(_props, ['onSearch']);

    return _react2.default.createElement(
      'div',
      { ref: this.setRootElement },
      _react2.default.createElement(_StatelessSearchableSelect2.default, _extends({}, rest, {
        onFocus: this.handleFocus,
        onBlur: this.handleBlur,
        onHighlightIndexChange: this.handleHighlightIndexChange,
        onOpen: this.handleOpen,
        onClose: this.handleClose,
        onChange: this.handleChange,
        isOpen: isOpen,
        highlightIndex: highlightIndex,
        isInputSelected: isInputSelected,
        inputValue: inputValue,
        onInputChange: this.handleInputChange,
        isSelected: hasFocus,
        ref: this.setInput
      }))
    );
  }
}
exports.default = SearchableSelect;
SearchableSelect.propTypes = {
  label: _propTypes2.default.string,
  description: _propTypes2.default.string,
  onChange: _propTypes2.default.func,
  onSearch: _propTypes2.default.func,
  onOpen: _propTypes2.default.func,
  onClose: _propTypes2.default.func,
  onClear: _propTypes2.default.func,
  value: _propTypes2.default.object,
  inputValue: _propTypes2.default.string,
  error: _propTypes2.default.bool,
  placeholder: _propTypes2.default.string,
  isLoading: _propTypes2.default.bool,
  renderItem: _propTypes2.default.func.isRequired,
  items: _propTypes2.default.array,
  dropdownPosition: _propTypes2.default.string
};
SearchableSelect.defaultProps = {
  placeholder: 'Type to search…',
  isLoading: false,
  onChange() {},
  onSearch() {},
  onOpen() {},
  onClose() {}
};

var _initialiseProps = function _initialiseProps() {
  this.handleChange = item => {
    const onChange = this.props.onChange;

    this.setState({
      isInputSelected: true
    });
    onChange(item);
    this.handleClose();
  };

  this.handleOpen = () => {
    this.setState({
      isOpen: true
    });
    this.props.onOpen();
  };

  this.handleClose = () => {
    this.setState({
      isOpen: false
    });
    this.props.onClose();
  };

  this.handleInputChange = inputValue => {
    this.setState({
      inputValue: inputValue,
      isInputSelected: false,
      isOpen: true
    });
    this.props.onSearch(inputValue);
  };

  this.handleHighlightIndexChange = nextIndex => {
    this.setState({ highlightIndex: nextIndex });
  };

  this.setRootElement = element => {
    this._rootElement = element;
  };

  this.setInput = input => {
    this._input = input;
  };

  this.handleFocus = event => {
    this.setState({
      hasFocus: true
    });
  };

  this.handleBlur = event => {
    this.setState({
      hasFocus: false,
      inputValue: this.props.inputValue
    });

    if (this.state.isOpen && this._rootElement.contains(event.relatedTarget)) {
      this.setState({
        isOpen: false
      });
    }
  };
};