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

var _customStyle2 = _interopRequireDefault(_customStyle);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

    return _temp = super(...args), this.state = {
      isOpen: false,
      activeIndex: -1
    }, this.handleItemClick = event => {
      this.selectIndex(Number(event.currentTarget.getAttribute('data-item-index')));
      this.setState({ isOpen: false });
    }, this.handleInnerClick = () => {
      this.setState({ isOpen: true });
    }, this.handleKeyDown = event => {
      var _state = this.state;
      const isOpen = _state.isOpen,
            activeIndex = _state.activeIndex;

      if (event.key === 'Enter') {
        if (isOpen && activeIndex > -1) {
          this.selectIndex(activeIndex);
          this.setState({ isOpen: false });
        } else {
          this.setState({ isOpen: true });
        }
      }

      if (event.key === 'Escape') {
        this.setState({ isOpen: false });
      }

      const items = this.props.items;


      const lastIndex = items.length - 1;
      if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
        event.preventDefault();
        if (!isOpen) {
          this.setState({ isOpen: true });
          return;
        }
        let nextIndex = activeIndex + (event.key === 'ArrowUp' ? -1 : 1);
        if (nextIndex < 0) nextIndex = lastIndex;
        if (nextIndex > lastIndex) nextIndex = 0;
        this.setState({ activeIndex: nextIndex });
      }
    }, _temp;
  }

  selectIndex(index) {
    const item = this.props.items[index];
    this.props.onChange(item);
  }

  render() {
    var _props = this.props;

    const items = _props.items,
          value = _props.value,
          renderItem = _props.renderItem,
          rest = _objectWithoutProperties(_props, ['items', 'value', 'renderItem']);

    var _state2 = this.state;
    const isOpen = _state2.isOpen,
          activeIndex = _state2.activeIndex;


    return _react2.default.createElement(
      'div',
      _extends({ className: _customStyle2.default.root }, rest),
      _react2.default.createElement(
        'div',
        {
          className: _customStyle2.default.inner,
          onClick: this.handleInnerClick,
          onKeyDown: this.handleKeyDown,
          tabIndex: 0
        },
        _react2.default.createElement(
          'div',
          { className: _customStyle2.default.selectContainer },
          _react2.default.createElement(
            'span',
            { className: _customStyle2.default.text },
            renderItem(value)
          ),
          _react2.default.createElement(
            'div',
            { className: _customStyle2.default.arrow },
            _react2.default.createElement(_angleDownIcon2.default, { color: 'inherit' })
          )
        )
      ),
      isOpen && _react2.default.createElement(
        'div',
        { className: _customStyle2.default.listContainer },
        _react2.default.createElement(
          'ul',
          {
            className: _customStyle2.default.items,
            onKeyDown: this.handleKeyDown,
            ref: this.setListContainer
          },
          items.map((item, index) => {
            const isActive = index === activeIndex;
            const isSelected = item === value;
            const className = (0, _classnames2.default)(_customStyle2.default.item, {
              [_customStyle2.default.selectedItem]: isSelected,
              [_customStyle2.default.activeItem]: isActive
            });
            return _react2.default.createElement(
              'li',
              {
                key: index,
                className: className,
                onClick: this.handleItemClick,
                'data-item-index': index
              },
              renderItem(item, { index, isActive, isSelected })
            );
          })
        )
      )
    );
  }
}
exports.default = CustomSelect;
CustomSelect.propTypes = {
  onChange: _propTypes2.default.func,
  value: _propTypes2.default.object,
  renderItem: _propTypes2.default.func,
  items: _propTypes2.default.array
};
CustomSelect.defaultProps = {
  onChange() {}
};