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

React versions of Mayflower design system UI components

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

/**
 * InputRadioGroup module.
 * @module @massds/mayflower-react/InputRadioGroup
 * @requires module:@massds/mayflower-assets/scss/01-atoms/input-group
 * @requires module:@massds/mayflower-assets/scss/input-radio-group
 * @requires module:@massds/mayflower-assets/scss/01-atoms/input-radio
 * @requires module:@massds/mayflower-assets/scss/01-atoms/error-msg
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import InputRadio from "../InputRadio/index.mjs";
import ErrorMessage from "../ErrorMessage/index.mjs";

let 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", event => {
      const selected = event.target.value;

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

        if (typeof _this.props.onChange === 'function') {
          const 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() {
    const itemsClasses = classNames({
      'ma__input-group__items': true,
      'ma__input-group__items--inline': this.props.inline,
      'ma__input-group__items--outline': this.props.outline
    });
    const titleClasses = classNames({
      'ma__input-group__title': true,
      'ma__input-group__title--error': this.props.error,
      'ma__input-group__title--disabled': this.props.disabled
    });
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("div", {
      className: "ma__input-group"
    }, /*#__PURE__*/React.createElement("legend", {
      className: titleClasses
    }, this.props.title), /*#__PURE__*/React.createElement("div", {
      className: itemsClasses
    }, this.props.radioButtons.map((radioButton, index) => {
      const isChecked = radioButton.value === this.state.selected;
      const buttonId = radioButton.id || radioButton.value;
      return (
        /*#__PURE__*/

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

  return InputRadioGroup;
}(React.Component);

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

  /** The name of the radio button group */
  name: PropTypes.string.isRequired,

  /** Whether radio input is required or not */
  required: PropTypes.bool,

  /** Whether you want the radio input outlined */
  outline: PropTypes.bool,

  /** The default select radio button option on initial render */
  defaultSelected: PropTypes.string,

  /** Whether the radio group is in error state or not. */
  error: PropTypes.bool,

  /** Error Message content. */
  errorMsg: PropTypes.string,

  /** Display Inputs inline */
  inline: PropTypes.bool,

  /** Whether the radio button group is in a disabled state or not */
  disabled: PropTypes.bool,

  /** On change callback function */
  onChange: PropTypes.func,

  /** An array of radio buttons. */
  radioButtons: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    value: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,

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