react-conventions/lib/components/Radio/Radio.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

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; }

var Radio = function Radio(props) {
  var label = props.label,
      labelPosition = props.labelPosition,
      optClass = props.optClass,
      other = _objectWithoutProperties(props, ['label', 'labelPosition', 'optClass']);

  var cx = _bind2.default.bind(_style2.default);
  var disabledClass = props.disabled ? _style2.default['radio-disabled'] : '';
  var radioClass = cx(_style2.default['radio-component'], optClass, disabledClass);

  var handleChange = function handleChange(event) {
    event.persist();
    if (typeof props.changeCallback === 'function') {
      props.changeCallback(event, props.value);
    }
  };

  return _react2.default.createElement(
    'div',
    { className: radioClass },
    _react2.default.createElement('input', _extends({ type: 'radio', onChange: handleChange }, other)),
    _react2.default.createElement(
      'div',
      null,
      label && labelPosition === 'left' ? _react2.default.createElement(
        'label',
        { className: _style2.default['label-left'] },
        label
      ) : null,
      _react2.default.createElement('div', { className: _style2.default['radio-input'] }),
      label && labelPosition === 'right' ? _react2.default.createElement(
        'label',
        { className: _style2.default['label-right'] },
        label
      ) : null
    )
  );
};

Radio.defaultProps = {
  checked: false,
  disabled: false,
  labelPosition: 'right'
};

Radio.propTypes = {
  /**
   * True if the option is checked.
   */
  checked: _react2.default.PropTypes.bool,
  /**
   * Whether the option is disabled.
   */
  disabled: _react2.default.PropTypes.bool,
  /**
   * Text shown next to the radio input element.
   */
  label: _react2.default.PropTypes.string,
  /**
   * The position of the label.
   */
  labelPosition: _react2.default.PropTypes.oneOf(['left', 'right']),
  /**
   * Value of the option.
   */
  value: _react2.default.PropTypes.string,
  /**
   * Optional styles to add to the radio component.
   */
  optClass: _react2.default.PropTypes.string,
  /**
   * Name specified in the RadioGroup component.
   */
  name: _react2.default.PropTypes.string,
  /**
   * A callback function (from RadioGroup) to be called when the option is changed.
   */
  changeCallback: _react2.default.PropTypes.func
};

exports.default = Radio;