@massds/mayflower-react/dist/InputRadioGroup/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

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

var _classnames = _interopRequireDefault(require("classnames"));

var _index = _interopRequireDefault(require("../InputRadio/index.js"));

var _index2 = _interopRequireDefault(require("../ErrorMessage/index.js"));

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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

  function InputRadioGroup(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
      var selected = event.target.value;

      if (selected !== _this.state.selected) {
        _this.setState({
          selected: selected
        });

        if (typeof _this.props.onChange === 'function') {
          var name = _this.props.name;

          _this.props.onChange({
            selected: selected,
            name: name,
            event: event
          });
        }
      }
    });

    _this.state = {
      selected: _this.props.defaultSelected
    };
    return _this;
  }

  var _proto = InputRadioGroup.prototype;

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

    var itemsClasses = (0, _classnames["default"])({
      'ma__input-group__items': true,
      'ma__input-group__items--inline': this.props.inline,
      'ma__input-group__items--outline': this.props.outline
    });
    var titleClasses = (0, _classnames["default"])({
      'ma__input-group__title': true,
      'ma__input-group__title--error': this.props.error,
      'ma__input-group__title--disabled': this.props.disabled
    });
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__input-group"
    }, /*#__PURE__*/_react["default"].createElement("legend", {
      className: titleClasses
    }, this.props.title), /*#__PURE__*/_react["default"].createElement("div", {
      className: itemsClasses
    }, this.props.radioButtons.map(function (radioButton, index) {
      var isChecked = radioButton.value === _this2.state.selected;
      var buttonId = radioButton.id || radioButton.value;
      return (
        /*#__PURE__*/

        /* eslint-disable-next-line react/no-array-index-key */
        _react["default"].createElement("div", {
          className: "ma__input-group__item item-" + _this2.props.radioButtons.length + " " + radioButton["class"],
          key: "InputRadioGroupDiv-" + buttonId + "-" + index
        }, /*#__PURE__*/_react["default"].createElement(_index["default"], _extends({}, radioButton, {
          name: _this2.props.name,
          onChange: _this2.handleChange,
          checked: isChecked,
          required: _this2.props.required,
          outline: _this2.props.outline,
          error: _this2.props.error,
          disabled: _this2.props.disabled
          /* eslint-disable-next-line react/no-array-index-key */
          ,
          key: "InputRadioGroup-" + buttonId + "-" + index
        })))
      );
    })))), this.props.errorMsg && this.props.error && /*#__PURE__*/_react["default"].createElement(_index2["default"], {
      status: true,
      error: this.props.errorMsg,
      inputID: this.props.name
    }));
  };

  return InputRadioGroup;
}(_react["default"].Component);

InputRadioGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The legend title of the radio button group. */
  title: _propTypes["default"].string.isRequired,

  /** The name of the radio button group */
  name: _propTypes["default"].string.isRequired,

  /** Whether radio input is required or not */
  required: _propTypes["default"].bool,

  /** Whether you want the radio input outlined */
  outline: _propTypes["default"].bool,

  /** The default select radio button option on initial render */
  defaultSelected: _propTypes["default"].string,

  /** Whether the radio group is in error state or not. */
  error: _propTypes["default"].bool,

  /** Error Message content. */
  errorMsg: _propTypes["default"].string,

  /** Display Inputs inline */
  inline: _propTypes["default"].bool,

  /** Whether the radio button group is in a disabled state or not */
  disabled: _propTypes["default"].bool,

  /** On change callback function */
  onChange: _propTypes["default"].func,

  /** An array of radio buttons. */
  radioButtons: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    id: _propTypes["default"].string,
    value: _propTypes["default"].string.isRequired,
    label: _propTypes["default"].string.isRequired,

    /** Allow adding one class to radio button, e.g. "col-medium-1", "col-large-1" */
    "class": _propTypes["default"].string
  }))
} : {};
InputRadioGroup.defaultProps = {
  outline: false,
  required: false,
  inline: true,
  error: false,
  disabled: false
};
var _default = InputRadioGroup;
exports["default"] = _default;
module.exports = exports.default;