@lyra/components/lib/radiobutton/RadioButtonDefault.js

Basic UX components

'use strict';

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

var _uniqueId2 = require('lodash/uniqueId');

var _uniqueId3 = _interopRequireDefault(_uniqueId2);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _defaultStyle = require('part:@lyra/components/radiobutton/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

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

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

    return _temp = super(...args), this.handleMouseUp = event => {
      this.handleBlur();
    }, this.handleChange = () => {
      this.props.onChange(this.props.item);
    }, this.handleFocus = () => {
      this.props.onFocus(this.props.item);
    }, this.handleBlur = () => {
      window.setTimeout(() => {
        this.props.onBlur(this.props.item);
      }, 0.001);
    }, _temp;
  }

  componentWillMount() {
    this._inputId = (0, _uniqueId3.default)('RadioSelect');
  }

  render() {
    var _props = this.props;
    const disabled = _props.disabled,
          checked = _props.checked,
          label = _props.label,
          name = _props.name,
          hasFocus = _props.hasFocus;


    return _react2.default.createElement(
      'label',
      {
        className: `
          ${_defaultStyle2.default.root}
          ${disabled ? _defaultStyle2.default.isDisabled : ''}
          ${checked ? _defaultStyle2.default.isChecked : _defaultStyle2.default.unChecked}
          ${hasFocus ? _defaultStyle2.default.isFocused : ''}
        `,
        onMouseUp: this.handleMouseUp
      },
      _react2.default.createElement('input', {
        className: _defaultStyle2.default.input,
        type: 'radio',
        onChange: this.handleChange,
        checked: checked,
        id: this._inputId,
        name: name,
        onFocus: this.handleFocus,
        onBlur: this.handleBlur,
        disabled: disabled
      }),
      _react2.default.createElement(
        'div',
        { className: _defaultStyle2.default.label, htmlFor: this._inputId },
        label
      ),
      _react2.default.createElement(
        'div',
        { className: _defaultStyle2.default.circleOutline },
        _react2.default.createElement('div', { className: _defaultStyle2.default.tickOutline })
      ),
      _react2.default.createElement('div', { className: _defaultStyle2.default.focusHelper }),
      _react2.default.createElement('div', { className: _defaultStyle2.default.tickHelper })
    );
  }
}
exports.default = RadioButton;
RadioButton.propTypes = {
  label: _propTypes2.default.string.isRequired,
  item: _propTypes2.default.object.isRequired,
  onChange: _propTypes2.default.func,
  onFocus: _propTypes2.default.func,
  onBlur: _propTypes2.default.func,
  checked: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool,
  name: _propTypes2.default.string,
  hasFocus: _propTypes2.default.bool
};
RadioButton.defaultProps = {
  onChange() {},
  onFocus() {},
  onBlur() {}
};