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

Basic UX components

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _default = require('part:@lyra/components/lists/default');

var _SelectMenu = require('./styles/SelectMenu.css');

var _SelectMenu2 = _interopRequireDefault(_SelectMenu);

var _domScrollIntoView = require('dom-scroll-into-view');

var _domScrollIntoView2 = _interopRequireDefault(_domScrollIntoView);

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

class SelectMenu extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleItemClick = event => {
      const index = Number(event.currentTarget.getAttribute('data-item-index'));
      var _props = this.props;
      const onSelect = _props.onSelect,
            items = _props.items;

      onSelect(items[index]);
    }, this.setScrollContainer = domNode => {
      this.scrollContainer = domNode;
    }, _temp;
  }

  componentDidUpdate(prevProps) {
    if (prevProps.highlightIndex !== this.props.highlightIndex) {
      const itemElement = this.scrollContainer.querySelector(`[data-item-index="${this.props.highlightIndex}"]`);
      (0, _domScrollIntoView2.default)(itemElement, this.scrollContainer, {
        onlyScrollIfNeeded: true
      });
    }
  }

  render() {
    var _props2 = this.props;
    const items = _props2.items,
          renderItem = _props2.renderItem,
          highlightIndex = _props2.highlightIndex,
          value = _props2.value;

    return _react2.default.createElement(
      'div',
      { className: _SelectMenu2.default.scrollContainer, ref: this.setScrollContainer },
      _react2.default.createElement(
        _default.List,
        { className: _SelectMenu2.default.list },
        items.map((item, index) => {
          const classes = (0, _classnames2.default)(_SelectMenu2.default.item, {
            [_SelectMenu2.default.highlighted]: index === highlightIndex,
            [_SelectMenu2.default.selected]: item === value
          });
          return _react2.default.createElement(
            _default.Item,
            {
              key: index,
              'data-item-index': index,
              onClick: this.handleItemClick,
              className: classes,
              tabIndex: 0
            },
            renderItem(item, index)
          );
        })
      )
    );
  }
}
exports.default = SelectMenu;