@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
134 lines (133 loc) • 6.81 kB
JavaScript
"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(e) { return e && e.__esModule ? e : { "default": e }; }
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
*/
var InputRadioGroup = /*#__PURE__*/function (_React$Component) {
function InputRadioGroup(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_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;
}
_inheritsLoose(InputRadioGroup, _React$Component);
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 = exports["default"] = InputRadioGroup;
module.exports = exports.default;