@mapbox/mr-ui
Version:
UI components for Mapbox projects
106 lines (105 loc) • 4.17 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ControlRadioSet;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _omit = _interopRequireDefault(require("../utils/omit"));
var _classnames = _interopRequireDefault(require("classnames"));
var _controlWrapper = _interopRequireDefault(require("../control-wrapper"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 ControlRadioSet(_ref) {
let {
id,
onChange,
value = '',
options,
optional = false,
autoFocus = false,
validationError,
themeRadioContainer = 'txt-s block mb6 flex',
themeRadio = 'mr6 radio--blue radio--s-label inline-block',
themeControlWrapper
} = _ref;
const groupProps = {
id,
role: 'radiogroup',
'aria-required': optional ? false : true,
'data-testid': `${id}-input`
};
if (validationError) {
groupProps['aria-invalid'] = true;
}
const renderOptions = (_ref2, index) => {
let {
label,
...d
} = _ref2;
const extraProps = (0, _omit.default)(d, ['value', 'label']);
const radioLabelClasses = (0, _classnames.default)(`radio-container ${themeRadioContainer}`, {
'cursor-pointer': !d.disabled
});
return /*#__PURE__*/_react.default.createElement("label", {
key: d.value,
className: radioLabelClasses
}, /*#__PURE__*/_react.default.createElement("input", _extends({
value: d.value,
checked: d.value === value,
autoFocus: autoFocus && d.value === value,
onChange: e => onChange(e.target.value, id),
name: id,
"data-testid": `${id}-${index}-input`,
type: "radio"
}, extraProps)), /*#__PURE__*/_react.default.createElement("div", {
className: `${themeRadio} radio`
}), label);
};
return /*#__PURE__*/_react.default.createElement(_controlWrapper.default, {
themeControlWrapper: themeControlWrapper,
id: id,
validationError: validationError
}, /*#__PURE__*/_react.default.createElement("div", groupProps, options.map(renderOptions)));
}
ControlRadioSet.propTypes = {
/** Unique id for this control. Required if you want a `label`. */
id: _propTypes.default.string.isRequired,
/**
* An array of objects that represent each option of the set.
* Each object should contain two fields:
*
* - `label` which can either be a string or valid JSX
* - `value` a unique string value
*
* Any additional fields added will be passed as attributes to the input
* element.
*/
options: _propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.node.isRequired,
value: _propTypes.default.string.isRequired
})).isRequired,
/**
* Invoked when the control's value changes.
* Passed two arguments:
*
* - The value. A string matching the `value` field of one of the `options`
* props passed.
* - The `id` prop.
*/
onChange: _propTypes.default.func.isRequired,
/** The control's value. Can be an empty string to indicate no value. */
value: _propTypes.default.string,
/** If provided, aria-required=true is added to the control element. */
optional: _propTypes.default.bool,
/** When set, auto focus attributes are applied to the input that matches the `value` prop passed. */
autoFocus: _propTypes.default.bool,
/** A validation error to display beneath the control. */
validationError: _propTypes.default.node,
/** Classes to apply to the radio container */
themeRadioContainer: _propTypes.default.string,
/** Classes to apply to the radio element */
themeRadio: _propTypes.default.string,
/** Classes to apply to the control wrapper */
themeControlWrapper: _propTypes.default.string
};