@ukhomeoffice/cop-react-form-renderer 4.13.1-alpha → 4.15.0-alpha

package/dist/components/FormRenderer/FormRenderer.js

@@ -434,7 +434,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         }
       } else if (currentTask.state === _models.TaskStates.TYPES.IN_PROGRESS) {
         var _currentPage = data.formStatus.tasks[currentTask.name].currentPage;
-        onPageChange(_currentPage || currentTask.pages[0]);
+        onPageChange(_models.FormPages.CYA || currentTask.pages[0]);
       } else {
         onPageChange(currentTask.pages[0]);
       }

package/dist/utils/Component/getComponent.js

@@ -25,23 +25,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-var setupChildrenJSX = function setupChildrenJSX(options, config) {
-  options.forEach(function (option) {
-    if (!Array.isArray(option.nested)) {
-      return;
-    }
-
-    option.children = getChildrenJsx(config, option.nested);
-  });
-};
 /** 
  * Separate function for each component type for the sake of
  * code clarity - having the additional bits and pieces in the
  * switch statement increases the cyclomatic complexity and
  * makes it much harder to follow what's going on.
  */
-
-
 var getAutocomplete = function getAutocomplete(config) {
   var attrs = (0, _cleanAttributes.default)(config);
 
@@ -59,7 +48,6 @@ var getCheckboxes = function getCheckboxes(config) {
     options = val;
   });
 
-  setupChildrenJSX(options, config);
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Checkboxes, _extends({}, attrs, {
     options: options
@@ -118,7 +106,13 @@ var getRadios = function getRadios(config) {
     options = val;
   });
 
-  setupChildrenJSX(options, config);
+  options.forEach(function (option) {
+    if (!Array.isArray(option.nested)) {
+      return;
+    }
+
+    option.children = getChildrenJsx(config, option.nested);
+  });
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Radios, _extends({}, attrs, {
     options: options

package/dist/utils/FormPage/useComponent.js

@@ -11,6 +11,47 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var getComponentToUse = function getComponentToUse(toUse, formComponents) {
+  var path = toUse.use.split('.');
+  var firstId = path.shift();
+
+  var wrapper = _objectSpread({}, formComponents.find(function (fc) {
+    return fc.id === firstId;
+  }));
+
+  var parent = wrapper;
+
+  var _loop = function _loop() {
+    var id = path.shift();
+
+    if (Array.isArray(parent.components)) {
+      // Filter the parent components down to just the one referenced
+      // by the current id.
+      parent.components = parent.components.filter(function (c) {
+        return c.id === id;
+      });
+
+      if (parent.components.length > 0) {
+        // Make the found child the parent so we can iterate.
+        parent = parent.components[0];
+      } else {
+        // If no child was found, there can be no parent.
+        parent = undefined;
+      }
+    } else {
+      // We cannot find the child with this id if there are no child
+      // components on this parent.
+      parent = undefined;
+    }
+  };
+
+  while (parent && path.length > 0) {
+    _loop();
+  } // If we missed a nested reference along the way, don't return the wrapper.
+
+
+  return parent ? wrapper : undefined;
+};
 /**
  * Use an existing component from the formComponents, overriding any properties
  * where appropriate.
@@ -18,17 +59,19 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @param {Array} formComponents An array of existing components on the form.
  * @returns A component configuration object.
  */
+
+
 var useComponent = function useComponent(toUse, formComponents) {
-  var formComponent = toUse ? formComponents.find(function (fc) {
-    return fc.id === toUse.use;
-  }) : undefined;
-
-  if (formComponent) {
-    var fieldId = toUse.fieldId || formComponent.fieldId;
-    return _objectSpread(_objectSpread(_objectSpread({}, formComponent), toUse), {}, {
-      cya_label: formComponent.label || formComponent.cya_label,
-      fieldId: fieldId
-    });
+  if (toUse) {
+    var component = getComponentToUse(toUse, formComponents);
+
+    if (component) {
+      var fieldId = toUse.fieldId || component.fieldId;
+      return _objectSpread(_objectSpread(_objectSpread({}, component), toUse), {}, {
+        cya_label: component.label || component.cya_label,
+        fieldId: fieldId
+      });
+    }
   }
 
   return _objectSpread({}, toUse);

package/dist/utils/FormPage/useComponent.test.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _models = require("../../models");
+
 var _useComponent = _interopRequireDefault(require("./useComponent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -13,27 +15,45 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 describe('utils', function () {
   describe('FormPage', function () {
     describe('useComponent', function () {
+      var ZULU = {
+        id: 'z',
+        fieldId: 'z',
+        label: 'Zulu',
+        type: _models.ComponentTypes.TEXT
+      };
+      var CONTAINER = {
+        id: 'container',
+        fieldId: 'container',
+        label: 'Container',
+        type: _models.ComponentTypes.CONTAINER,
+        components: [{
+          id: 'f',
+          fieldId: 'f',
+          label: 'Foxtrot',
+          type: _models.ComponentTypes.TEXT
+        }, ZULU]
+      };
       var FORM_COMPONENTS = [{
         id: 'a',
         fieldId: 'a',
         label: 'Alpha',
-        type: 'text'
+        type: _models.ComponentTypes.TEXT
       }, {
         id: 'b',
         fieldId: 'b',
         label: 'Bravo',
-        type: 'text'
+        type: _models.ComponentTypes.TEXT
       }, {
         id: 'c',
         fieldId: 'c',
         label: 'Charlie',
-        type: 'text'
+        type: _models.ComponentTypes.TEXT
       }, {
         id: 'd',
         fieldId: 'd',
         cya_label: 'Delta',
-        type: 'text'
-      }];
+        type: _models.ComponentTypes.TEXT
+      }, CONTAINER];
       it('should handle a null toUse configuration', function () {
         var TO_USE = null;
         expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual({});
@@ -107,6 +127,43 @@ describe('utils', function () {
           label: TO_USE.label
         }));
       });
+      it('should handle a container', function () {
+        var TO_USE = {
+          use: CONTAINER.id
+        };
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(_objectSpread(_objectSpread({
+          use: CONTAINER.id
+        }, CONTAINER), {}, {
+          cya_label: CONTAINER.label
+        }));
+      });
+      it('should handle a component nested inside a container', function () {
+        var ID = "".concat(CONTAINER.id, ".").concat(ZULU.id);
+        var TO_USE = {
+          use: ID
+        };
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(_objectSpread(_objectSpread({
+          use: ID
+        }, CONTAINER), {}, {
+          cya_label: CONTAINER.label,
+          components: [ZULU // Foxtrot is not included
+          ]
+        }));
+      });
+      it('should handle an unrecognised container reference', function () {
+        var ID = "unrecognised.".concat(ZULU.id);
+        var TO_USE = {
+          use: ID
+        };
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(TO_USE);
+      });
+      it('should handle an unrecognised component within a container', function () {
+        var ID = "".concat(CONTAINER.id, ".unrecognised");
+        var TO_USE = {
+          use: ID
+        };
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(TO_USE);
+      });
     });
   });
 });

package/dist/utils/Validate/validateComponent.js

@@ -79,7 +79,6 @@ var validateComponent = function validateComponent(component, outerData, formDat
         error = message;
         break;
 
-      case _models.ComponentTypes.CHECKBOXES:
       case _models.ComponentTypes.RADIOS:
         var nestedErrors = [];
         (_component$data$optio = component.data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.forEach(function (option) {

package/dist/utils/Validate/validateComponent.test.js

@@ -200,19 +200,19 @@ describe('utils.Validate.Component', function () {
     });
   });
   describe('when the component has a nested component', function () {
-    it.each([['radios', 'text'], ['checkboxes', 'text']])('should return no error when the radio component contains nested components without errors', function (parentType, nestedType) {
+    it('should return no error when the radio component contains nested components without errors', function () {
       var NESTED_ID = 'nestedId';
       var NESTED_VALUE = 'nestedValue';
 
       var FORMDATA = _defineProperty({}, NESTED_ID, NESTED_VALUE);
 
       var COMPONENT = {
-        type: parentType,
+        type: 'radios',
         id: 'a',
         data: {
           options: [{
             nested: [{
-              type: nestedType,
+              type: 'text',
               fieldId: NESTED_ID,
               id: NESTED_ID,
               required: true
@@ -222,16 +222,16 @@ describe('utils.Validate.Component', function () {
       };
       expect((0, _validateComponent.default)(COMPONENT, undefined, FORMDATA)).toBeUndefined();
     });
-    it.each([['radios', 'text'], ['checkboxes', 'text']])('should return an error when the radio component contains nested components with errors', function (parentType, nestedType) {
+    it('should return an error when the radio component contains nested components with errors', function () {
       var NESTED_ID = 'nestedId';
       var FORMDATA = {};
       var COMPONENT = {
-        type: parentType,
+        type: 'radios',
         id: 'a',
         data: {
           options: [{
             nested: [{
-              type: nestedType,
+              type: 'text',
               fieldId: NESTED_ID,
               id: NESTED_ID,
               required: true
@@ -244,10 +244,10 @@ describe('utils.Validate.Component', function () {
         error: "Field is required"
       }]);
     });
-    it.each([['radios'], ['checkboxes']])('should return no error when a non selected radio component contains nested components with errors', function (type) {
+    it('should return no error when a non selected radio component contains nested components with errors', function () {
       var NESTED_ID = 'nestedId';
       var COMPONENT = {
-        type: type,
+        type: 'radios',
         id: 'a',
         data: {
           options: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.13.1-alpha",
+  "version": "4.15.0-alpha",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "2.2.3-alpha",
+    "@ukhomeoffice/cop-react-components": "2.2.2",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",