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

Basic UX components

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _radioStyle = require('part:@lyra/components/selects/radio-style');

var _radioStyle2 = _interopRequireDefault(_radioStyle);

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

var _default2 = _interopRequireDefault(_default);

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

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

    return _temp = super(...args), this.state = {
      focusedItem: null
    }, this.handleRadioChange = item => {
      this.props.onChange(item);
    }, this.handleFocus = item => {
      this.setState({
        focusedItem: item
      });
    }, this.handleBlur = () => {
      this.setState({
        focusedItem: null
      });
    }, _temp;
  }

  focus() {
    // todo. See https://github.com/lyra-io/lyra/issues/527
  }

  render() {
    var _props = this.props;
    const items = _props.items,
          value = _props.value,
          name = _props.name,
          direction = _props.direction,
          readOnly = _props.readOnly;
    const focusedItem = this.state.focusedItem;


    return _react2.default.createElement(
      'div',
      {
        className: `
          ${direction == 'vertical' ? _radioStyle2.default.vertical : _radioStyle2.default.horizontal}
        `
      },
      _react2.default.createElement(
        'div',
        { className: _radioStyle2.default.radioContainer },
        items.map((item, i) => {
          return _react2.default.createElement(
            'div',
            { className: _radioStyle2.default.item, key: i },
            _react2.default.createElement(_default2.default, {
              disabled: readOnly,
              name: name,
              key: i,
              label: item.title,
              item: item,
              onChange: this.handleRadioChange,
              checked: value === item,
              onFocus: this.handleFocus,
              onBlur: this.handleBlur,
              hasFocus: focusedItem === item
            })
          );
        })
      )
    );
  }
}
exports.default = RadioSelect;
RadioSelect.propTypes = {
  name: _propTypes2.default.string,
  direction: _propTypes2.default.oneOf(['horizontal', 'vertical']),
  onChange: _propTypes2.default.func,
  value: _propTypes2.default.object,
  readOnly: _propTypes2.default.bool,
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string
  }))
};
RadioSelect.defaultProps = {
  onChange() {}
};