govuk-react-jsx
Version:
[](https://github.com/alphagov/govuk-frontend/releases/tag/v4.0.1) [ • 10.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Boolean = Boolean;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _govuk = require("../govuk");
var _omitKey = _interopRequireDefault(require("./omitKey"));
var _excluded = ["className", "errorMessage", "fieldset", "formGroup", "hint", "idPrefix", "items", "controlType", "name", "onChange", "onBlur", "aria-describedby"],
_excluded2 = ["id", "children", "hint", "conditional", "behaviour", "label", "reactListKey"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function Boolean(props) {
var className = props.className,
errorMessage = props.errorMessage,
fieldset = props.fieldset,
formGroup = props.formGroup,
hint = props.hint,
idPrefix = props.idPrefix,
items = props.items,
controlType = props.controlType,
name = props.name,
onChange = props.onChange,
onBlur = props.onBlur,
describedByProp = props['aria-describedby'],
attributes = (0, _objectWithoutProperties2["default"])(props, _excluded);
var controlRef = (0, _react.useRef)();
var idPrefixValue = idPrefix || name;
var describedBy = describedByProp || '';
if (fieldset !== null && fieldset !== void 0 && fieldset['aria-describedby']) {
describedBy = fieldset['aria-describedby'];
}
var hintComponent;
var errorMessageComponent;
(0, _react.useEffect)(function () {
(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var _yield$import, RadiosJS, _yield$import2, CheckboxesJS;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.t0 = controlType;
_context.next = _context.t0 === 'radios' ? 3 : _context.t0 === 'checkboxes' ? 10 : 17;
break;
case 3:
if (!(typeof document !== 'undefined')) {
_context.next = 9;
break;
}
_context.next = 6;
return import(
/* webpackChunkName: "govuk-frontend-radios" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
'govuk-frontend/govuk/components/radios/radios');
case 6:
_yield$import = _context.sent;
RadiosJS = _yield$import["default"];
if (controlRef.current) {
new RadiosJS(controlRef.current).init();
}
case 9:
return _context.abrupt("break", 17);
case 10:
if (!(typeof document !== 'undefined')) {
_context.next = 16;
break;
}
_context.next = 13;
return import(
/* webpackChunkName: "govuk-frontend-checkboxes" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
'govuk-frontend/govuk/components/checkboxes/checkboxes');
case 13:
_yield$import2 = _context.sent;
CheckboxesJS = _yield$import2["default"];
if (controlRef.current) {
new CheckboxesJS(controlRef.current).init();
}
case 16:
return _context.abrupt("break", 17);
case 17:
case "end":
return _context.stop();
}
}
}, _callee);
}))();
}, [controlRef, controlType]);
if (hint) {
var hintId = "".concat(idPrefixValue, "-hint");
describedBy += " ".concat(hintId);
hintComponent = /*#__PURE__*/_react["default"].createElement(_govuk.Hint, (0, _extends2["default"])({}, hint, {
id: hintId
}));
}
var hasFieldset = !!fieldset;
if (errorMessage) {
var errorId = "".concat(idPrefixValue, "-error");
describedBy += " ".concat(errorId);
errorMessageComponent = /*#__PURE__*/_react["default"].createElement(_govuk.ErrorMessage, (0, _extends2["default"])({}, errorMessage, {
id: errorId
}));
}
var innerHtml = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hintComponent, errorMessageComponent, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: "govuk-".concat(controlType, " ").concat(className || '')
}, attributes, {
ref: controlRef,
"data-module": "govuk-".concat(controlType)
}), items && items.map(function (item, index) {
if (!item) {
return null;
}
if (item.behaviour === 'exclusive') {
// Forcibly disable the "exclusive" behaviour introduced in https://github.com/alphagov/govuk-frontend/pull/2151 since it cannot work in React
// The upstream JS cannot manipulate the checked state of controls without it causing problems
// At the moment, if a service needs this behaviour they should implement it themselves in the application code
delete item.behaviour;
}
var id = item.id,
children = item.children,
itemHint = item.hint,
itemConditional = item.conditional,
behaviour = item.behaviour,
label = item.label,
reactListKey = item.reactListKey,
itemAttributes = (0, _objectWithoutProperties2["default"])(item, _excluded2);
var idSuffix = "-".concat(index + 1);
var idValue = id || "".concat(idPrefixValue).concat(index === 0 ? '' : idSuffix);
var nameValue = item.name ? item.name : name;
var conditionalId = itemConditional !== null && itemConditional !== void 0 && itemConditional.children ? "conditional-".concat(idValue) : null;
var itemHintId = "".concat(idValue, "-item-hint");
var itemDescribedBy = '';
if (controlType === 'checkboxes' && !hasFieldset) {
itemDescribedBy = describedBy;
}
if (itemHint) {
itemDescribedBy += " ".concat(itemHintId);
}
if (item.divider) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: reactListKey || index,
className: "govuk-".concat(controlType, "__divider")
}, item.divider);
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
key: reactListKey || index
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "govuk-".concat(controlType, "__item")
}, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
className: "govuk-".concat(controlType, "__input"),
id: idValue,
name: nameValue,
type: controlType === 'radios' ? 'radio' : 'checkbox',
"data-aria-controls": conditionalId,
"aria-describedby": itemDescribedBy || null,
onChange: onChange,
onBlur: onBlur,
"data-behaviour": behaviour
}, itemAttributes)), /*#__PURE__*/_react["default"].createElement(_govuk.Label, _objectSpread(_objectSpread({}, label), {}, {
className: "govuk-".concat(controlType, "__label ").concat((label === null || label === void 0 ? void 0 : label.className) || ''),
htmlFor: idValue,
isPageHeading: false
}), children), itemHint ? /*#__PURE__*/_react["default"].createElement(_govuk.Hint, (0, _extends2["default"])({}, _objectSpread(_objectSpread({}, itemHint), {}, {
className: "govuk-".concat(controlType, "__hint ").concat(itemHint.className || '')
}), {
id: itemHintId
})) : ''), itemConditional !== null && itemConditional !== void 0 && itemConditional.children ? /*#__PURE__*/_react["default"].createElement("div", {
className: "govuk-".concat(controlType, "__conditional ").concat(item.checked ? '' : "govuk-".concat(controlType, "__conditional--hidden")),
id: conditionalId
}, itemConditional.children) : '');
})));
return /*#__PURE__*/_react["default"].createElement("div", {
className: "govuk-form-group".concat(errorMessage ? ' govuk-form-group--error' : '', " ").concat((formGroup === null || formGroup === void 0 ? void 0 : formGroup.className) || '')
}, hasFieldset ? /*#__PURE__*/_react["default"].createElement(_govuk.Fieldset, (0, _extends2["default"])({}, (0, _omitKey["default"])(fieldset, 'role'), {
"aria-describedby": describedBy.trim() || null
}), innerHtml) : innerHtml);
}