@xgovformbuilder/govuk-react-jsx
Version:
> This package is no longer maintained and will not receive updates bringing it beyond govuk-frontend 4.0.1. If you are using this in your project the simplest way forward is to copy and paste the components from here into your project allowing you to kee
215 lines (180 loc) • 8.96 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "errorMessage", "fieldset", "formGroup", "hint", "idPrefix", "items", "controlType", "name", "onChange", "onBlur", "aria-describedby"],
_excluded2 = ["id", "children", "hint", "conditional", "behaviour", "label", "reactListKey"];
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) { _defineProperty(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; }
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect, useRef } from 'react';
import { ErrorMessage, Fieldset, Hint, Label } from '../govuk';
import omit from './omitKey';
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 = _objectWithoutProperties(props, _excluded);
var controlRef = 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;
useEffect(function () {
_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _yield$import, RadiosJS, _yield$import2, CheckboxesJS;
return _regeneratorRuntime.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.createElement(Hint, _extends({}, hint, {
id: hintId
}));
}
var hasFieldset = !!fieldset;
if (errorMessage) {
var errorId = "".concat(idPrefixValue, "-error");
describedBy += " ".concat(errorId);
errorMessageComponent = /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, errorMessage, {
id: errorId
}));
}
var innerHtml = /*#__PURE__*/React.createElement(React.Fragment, null, hintComponent, errorMessageComponent, /*#__PURE__*/React.createElement("div", _extends({
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 = _objectWithoutProperties(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.createElement("div", {
key: reactListKey || index,
className: "govuk-".concat(controlType, "__divider")
}, item.divider);
}
return /*#__PURE__*/React.createElement(React.Fragment, {
key: reactListKey || index
}, /*#__PURE__*/React.createElement("div", {
className: "govuk-".concat(controlType, "__item")
}, /*#__PURE__*/React.createElement("input", _extends({
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.createElement(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.createElement(Hint, _extends({}, _objectSpread(_objectSpread({}, itemHint), {}, {
className: "govuk-".concat(controlType, "__hint ").concat(itemHint.className || '')
}), {
id: itemHintId
})) : ''), itemConditional !== null && itemConditional !== void 0 && itemConditional.children ? /*#__PURE__*/React.createElement("div", {
className: "govuk-".concat(controlType, "__conditional ").concat(item.checked ? '' : "govuk-".concat(controlType, "__conditional--hidden")),
id: conditionalId
}, itemConditional.children) : '');
})));
return /*#__PURE__*/React.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.createElement(Fieldset, _extends({}, omit(fieldset, 'role'), {
"aria-describedby": describedBy.trim() || null
}), innerHtml) : innerHtml);
}
export { Boolean };