@vtex/styleguide/lib/RadioGroup/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _Radio = require("../Radio");

var _Radio2 = _interopRequireDefault(_Radio);

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var RadioGroup =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(RadioGroup, _React$Component);

  function RadioGroup() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.handleChange = function (event) {
      _this.props.onChange(event);
    };

    return _this;
  }

  var _proto = RadioGroup.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        options = _this$props.options,
        value = _this$props.value,
        name = _this$props.name,
        disabled = _this$props.disabled,
        hideBorder = _this$props.hideBorder,
        label = _this$props.label,
        testId = _this$props.testId,
        size = _this$props.size,
        error = _this$props.error,
        errorMessage = _this$props.errorMessage;
    var large = size === 'large';
    var errorHighlight = error || errorMessage;
    return _react2.default.createElement("div", {
      className: "vtex-radioGroup"
    }, _react2.default.createElement("fieldset", {
      className: "vtex-radioGroup__fieldset vtex-input w-100 bn pa0 m0",
      "data-testid": testId
    }, label && _react2.default.createElement("legend", {
      className: "vtex-radioGroup__legend dt",
      style: {
        padding: '0.01em 0 0 0'
      }
    }, _react2.default.createElement("span", {
      className: (0, _classnames2.default)('vtex-radioGroup__label vtex-input__label db mb3 w-100 c-on-base', {
        't-body': large,
        't-small': !large
      })
    }, label)), options.map(function (option, i) {
      var isFirst = i === 0;
      var isLast = i === options.length - 1;
      var isDisabled = disabled || option.disabled;
      var id = name + "-" + i;
      return _react2.default.createElement("label", {
        className: (0, _classnames2.default)('vtex-radioGroup__radioLabel db br3', {
          'ba pv2 ph4': !hideBorder,
          'b--danger hover-b--danger': errorHighlight,
          'b--muted-4': !error && !errorMessage,
          pointer: !isDisabled
        }),
        key: id,
        style: _extends({}, !isFirst && {
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          borderTop: 'none'
        }, {}, !isLast && {
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0
        })
      }, _react2.default.createElement("div", {
        className: (0, _classnames2.default)('vtex-radioGroup__radioContainer', {
          mv3: !hideBorder
        })
      }, _react2.default.createElement(_Radio2.default, {
        id: id,
        isLast: isLast,
        name: name,
        disabled: isDisabled,
        onChange: _this2.handleChange,
        label: option.label,
        value: option.value,
        checked: value === option.value
      })));
    }), errorMessage && _react2.default.createElement("div", {
      className: "vtex-radioGroup__error c-danger t-small mt3 lh-title"
    }, errorMessage)));
  };

  return RadioGroup;
}(_react2.default.Component);

RadioGroup.propTypes = {
  /** Options list */
  options: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
    label: _propTypes2.default.node.isRequired,
    disabled: _propTypes2.default.bool
  })).isRequired,

  /** Error highlight */
  error: _propTypes2.default.bool,

  /** Error message */
  errorMessage: _propTypes2.default.string,

  /** Name attribute for the radio inputs, which will also be used to generate ids */
  name: _propTypes2.default.string.isRequired,

  /** Current selected value */
  value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),

  /** onChange event handler */
  onChange: _propTypes2.default.func.isRequired,

  /** Disable the entire group */
  disabled: _propTypes2.default.bool,

  /** Hide group border */
  hideBorder: _propTypes2.default.bool,

  /** Label */
  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),

  /** Data attribute */
  testId: _propTypes2.default.string,

  /** Input size */
  size: _propTypes2.default.oneOf(['small', 'regular', 'large'])
};
RadioGroup.defaultProps = {
  disabled: false,
  hideBorder: false
};
exports.default = RadioGroup;