@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
128 lines • 6.07 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* 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) {
function InputRadioGroup(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_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;
}
_inheritsLoose(InputRadioGroup, _React$Component);
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;