@ukhomeoffice/cop-react-form-renderer 4.13.0 → 4.14.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",