@lyra/components/lib/selects/DefaultSelect.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 _defaultStyle = require('part:@lyra/components/selects/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

var _angleDownIcon = require('part:@lyra/base/angle-down-icon');

var _angleDownIcon2 = _interopRequireDefault(_angleDownIcon);

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 DefaultSelect extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleChange = event => {
      this.props.onChange(this.props.items[event.target.value]);
    }, this.setInput = el => {
      this._input = el;
    }, _temp;
  }

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

  render() {
    var _props = this.props;

    const hasError = _props.hasError,
          items = _props.items,
          value = _props.value,
          disabled = _props.disabled,
          hasFocus = _props.hasFocus,
          readOnly = _props.readOnly,
          rest = _objectWithoutProperties(_props, ['hasError', 'items', 'value', 'disabled', 'hasFocus', 'readOnly']);

    return _react2.default.createElement(
      'div',
      {
        className: `
          ${disabled || readOnly ? _defaultStyle2.default.disabled : ''}
          ${hasFocus ? _defaultStyle2.default.hasFocus : _defaultStyle2.default.root}
        `
      },
      _react2.default.createElement(
        'select',
        _extends({}, rest, {
          className: _defaultStyle2.default.select,
          onChange: this.handleChange,
          disabled: disabled || readOnly,
          value: value && items.indexOf(value),
          autoComplete: 'off',
          ref: this.setInput
        }),
        !value && _react2.default.createElement('option', null),
        items.length && items.map((item, i) => {
          return _react2.default.createElement(
            'option',
            { key: i, value: i },
            item.title
          );
        })
      ),
      _react2.default.createElement(
        'div',
        { className: _defaultStyle2.default.functions },
        _react2.default.createElement(
          'span',
          { className: _defaultStyle2.default.arrow },
          _react2.default.createElement(_angleDownIcon2.default, { color: 'inherit' })
        )
      )
    );
  }
}
exports.default = DefaultSelect;
DefaultSelect.propTypes = {
  onChange: _propTypes2.default.func,
  value: _propTypes2.default.object,
  hasError: _propTypes2.default.bool,
  onFocus: _propTypes2.default.func,
  onBlur: _propTypes2.default.func,
  hasFocus: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool,
  readOnly: _propTypes2.default.bool,
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string
  }))
};
DefaultSelect.defaultProps = {
  onChange() {},
  onBlur() {},
  onFocus() {},
  readOnly: false,
  hasError: false,
  hasFocus: false,
  value: {},
  items: []
};