@ukhomeoffice/cop-react-form-renderer 4.5.0 → 4.7.0

package/dist/components/CollectionPage/CollectionPage.js

@@ -68,6 +68,7 @@ var CollectionPage = function CollectionPage(_ref) {
   var onPageChange = function onPageChange(_ref2) {
     var target = _ref2.target;
     page.formData[target.name] = target.value;
+    data = page.formData[page.collection.name] || patch[page.collection.name] || [];
     setPatch(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.name, target.value));
     });

package/dist/components/FormPage/FormPage.js

@@ -89,10 +89,7 @@ var FormPage = function FormPage(_ref) {
       label: _utils.default.interpolateString(action.label, page.formData)
     }) : action;
   });
-
-  var operationResults = _utils.default.Operate.runPageOperations(page, _objectSpread(_objectSpread({}, page.formData), patch));
-
-  page.formData = _objectSpread(_objectSpread(_objectSpread({}, page.formData), patch), operationResults);
+  page.formData = _utils.default.Operate.runPageOperations(page, _objectSpread(_objectSpread({}, page.formData), patch), onWrapperChange || onPageChange);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes('page'),
     key: page.id

package/dist/utils/CheckYourAnswers/getCYARowsForContainer.js

@@ -9,6 +9,8 @@ var _models = require("../../models");
 
 var _getCYARow = _interopRequireDefault(require("./getCYARow"));
 
+var _getCYARowsForCollection = _interopRequireDefault(require("./getCYARowsForCollection"));
+
 var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,11 +26,16 @@ var getCYARowsForContainer = function getCYARowsForContainer(page, container, fo
     return container.components.filter(function (c) {
       return (0, _showComponentCYA.default)(c, page.formData);
     }).flatMap(function (component) {
+      var fd = formData ? formData[component.fieldId] : undefined;
+
       if (component.type === _models.ComponentTypes.CONTAINER) {
-        var fd = formData ? formData[component.fieldId] : undefined;
         return getCYARowsForContainer(page, component, fd, onAction);
       }
 
+      if (component.type === _models.ComponentTypes.COLLECTION) {
+        return (0, _getCYARowsForCollection.default)(page, component, fd, onAction);
+      }
+
       return (0, _getCYARow.default)(_objectSpread(_objectSpread({}, page), {}, {
         formData: formData
       }), component, onAction);

package/dist/utils/CheckYourAnswers/getCYARowsForContainer.test.js

@@ -8,7 +8,8 @@ var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForCon
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Local imports
+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; }
+
 describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
   it('should get an appropriate row for a container with a single readonly text component', function () {
     var FORM_DATA = {
@@ -250,4 +251,73 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
       });
     });
   });
+  it('should get an appropriate row for a collection with a single text component inside a container', function () {
+    var OUTER_ID = 'a';
+    var INNER_ID = 'b';
+
+    var FORM_DATA = _defineProperty({}, OUTER_ID, [_defineProperty({}, INNER_ID, 'Bravo'), _defineProperty({}, INNER_ID, 'Charlie')]);
+
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {},
+      collection: 'collectionName'
+    };
+    var COLLECTION_COMPONENT = {
+      type: 'collection',
+      id: OUTER_ID,
+      fieldId: OUTER_ID,
+      label: 'Alpha',
+      item: [{
+        id: INNER_ID,
+        fieldId: INNER_ID,
+        label: INNER_ID,
+        type: 'text'
+      }]
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COLLECTION_COMPONENT],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA, function () {});
+    expect(ROWS.length).toEqual(4);
+
+    var checkTitleRow = function checkTitleRow(index, row) {
+      expect(row).toEqual({
+        pageId: PAGE.id,
+        fieldId: CONTAINER.components[0].fieldId,
+        key: "Item ".concat(index + 1),
+        action: null,
+        full_path: "".concat(OUTER_ID, "[").concat(index, "]"),
+        type: 'title'
+      });
+    };
+
+    var checkValueRow = function checkValueRow(index, row, value) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: INNER_ID,
+        key: INNER_ID,
+        id: INNER_ID,
+        component: {
+          fieldId: INNER_ID,
+          full_path: "".concat(OUTER_ID, "[").concat(index, "].").concat(INNER_ID),
+          id: INNER_ID,
+          label: INNER_ID,
+          type: 'text'
+        },
+        value: value,
+        full_path: "".concat(OUTER_ID, "[").concat(index, "].").concat(INNER_ID)
+      });
+    };
+
+    checkTitleRow(0, ROWS[0]);
+    checkValueRow(0, ROWS[1], 'Bravo');
+    checkTitleRow(1, ROWS[2]);
+    checkValueRow(1, ROWS[3], 'Charlie');
+  });
 });

package/dist/utils/Operate/persistValueInFormData.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+var _getSourceData = _interopRequireDefault(require("../Data/getSourceData"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports.
+// Local imports.
+
+/**
+ * Simple operation to call the page's onChange handler with a specific value
+ * and name. Supports getting a value from an interpolated field string.
+ * @param {object} config The operation config.
+ * @param {object} data The page's formData.
+ * @param {function} onChange The page's onChange handler.
+ */
+var persistValueInFormData = function persistValueInFormData(config, data, onChange) {
+  var value;
+
+  if (config !== null && config !== void 0 && config.field) {
+    var fieldPath = _copReactComponents.Utils.interpolateString(config.field, data);
+
+    value = (0, _getSourceData.default)(data, fieldPath);
+  } else {
+    value = config === null || config === void 0 ? void 0 : config.value;
+  }
+
+  if (value && config.name && data[config.name] !== value) {
+    onChange({
+      target: {
+        name: config.name,
+        value: value
+      }
+    });
+  }
+};
+
+var _default = persistValueInFormData;
+exports.default = _default;

package/dist/utils/Operate/persistValueInFormData.test.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _persistValueInFormData = _interopRequireDefault(require("./persistValueInFormData"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Utils.Operate.persistValueInFormData', function () {
+  var DATA = {
+    alpha: 'abc',
+    beta: 'charlie',
+    charlie: '123'
+  };
+  var ON_CHANGE_COUNT = 0;
+
+  var ON_CHANGE = function ON_CHANGE(_ref) {
+    var target = _ref.target;
+    DATA[target.name] = target.value;
+    ON_CHANGE_COUNT++;
+  };
+
+  beforeEach(function () {
+    DATA = {
+      alpha: 'abc',
+      beta: 'charlie',
+      charlie: '123'
+    };
+    ON_CHANGE_COUNT = 0;
+  });
+  it('Should trigger a change correctly', function () {
+    var CONFIG = {
+      name: 'alpha',
+      value: 'bcd'
+    };
+    (0, _persistValueInFormData.default)(CONFIG, DATA, ON_CHANGE);
+    expect(DATA).toEqual({
+      alpha: 'bcd',
+      beta: 'charlie',
+      charlie: '123'
+    });
+    expect(ON_CHANGE_COUNT).toEqual(1);
+  });
+  it('Should not call onChange when value is unchanged', function () {
+    var CONFIG = {
+      name: 'alpha',
+      value: 'abc'
+    };
+    (0, _persistValueInFormData.default)(CONFIG, DATA, ON_CHANGE);
+    expect(DATA).toEqual({
+      alpha: 'abc',
+      beta: 'charlie',
+      charlie: '123'
+    });
+    expect(ON_CHANGE_COUNT).toEqual(0);
+  });
+  it('Should not call onChange if no value or field is given', function () {
+    var CONFIG = {
+      name: 'alpha'
+    };
+    (0, _persistValueInFormData.default)(CONFIG, DATA, ON_CHANGE);
+    expect(DATA).toEqual({
+      alpha: 'abc',
+      beta: 'charlie',
+      charlie: '123'
+    });
+    expect(ON_CHANGE_COUNT).toEqual(0);
+  });
+  it('Should not call onChange if no name is given', function () {
+    var CONFIG = {
+      field: 'charlie'
+    };
+    (0, _persistValueInFormData.default)(CONFIG, DATA, ON_CHANGE);
+    expect(DATA).toEqual({
+      alpha: 'abc',
+      beta: 'charlie',
+      charlie: '123'
+    });
+    expect(ON_CHANGE_COUNT).toEqual(0);
+  });
+  it('Should not call onChange if field cannot be found', function () {
+    var CONFIG = {
+      name: 'alpha',
+      field: 'delta'
+    };
+    (0, _persistValueInFormData.default)(CONFIG, DATA, ON_CHANGE);
+    expect(DATA).toEqual({
+      alpha: 'abc',
+      beta: 'charlie',
+      charlie: '123'
+    });
+    expect(ON_CHANGE_COUNT).toEqual(0);
+  });
+  it('Should correctly interpolate a field value', function () {
+    var CONFIG = {
+      name: 'alpha',
+      field: '${beta}'
+    };
+    (0, _persistValueInFormData.default)(CONFIG, DATA, ON_CHANGE);
+    expect(DATA).toEqual({
+      alpha: '123',
+      beta: 'charlie',
+      charlie: '123'
+    });
+    expect(ON_CHANGE_COUNT).toEqual(1);
+  });
+});

package/dist/utils/Operate/runPageOperations.js

@@ -5,65 +5,77 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _checkValueIsTruthy = _interopRequireDefault(require("./checkValueIsTruthy"));
 
 var _getIndexOfMatchingValueIn = _interopRequireDefault(require("./getIndexOfMatchingValueIn"));
 
-var _getValueFromFormData = _interopRequireDefault(require("./getValueFromFormData"));
+var _persistValueInFormData = _interopRequireDefault(require("./persistValueInFormData"));
 
-var _shouldRun = _interopRequireDefault(require("./shouldRun"));
+var _setValueInFormData = _interopRequireDefault(require("./setValueInFormData"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
+var _shouldRun = _interopRequireDefault(require("./shouldRun"));
 
-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; }
+var _setDataItem = _interopRequireDefault(require("../Data/setDataItem"));
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// Global imports.
+// Local imports.
 var functions = {
   checkValueIsTruthy: _checkValueIsTruthy.default,
   getIndexOfMatchingValueIn: _getIndexOfMatchingValueIn.default,
-  getValueFromFormData: _getValueFromFormData.default
+  persistValueInFormData: _persistValueInFormData.default,
+  setValueInFormData: _setValueInFormData.default
 };
 
-var doOperation = function doOperation(config, data) {
+var doOperation = function doOperation(config, data, onChange) {
   var fn = functions[config.function];
 
   if (typeof fn === 'function') {
-    return fn(config, data);
+    return fn(config, data, onChange);
   }
 
   return undefined;
 };
 /**
- * Run operations specified in a page's config on formData.
- * The results of any operations are stored in an object with 
- * the format of { operation_name: result, ... }.
+ * Run operations, specified in a page's config, on formData.
+ * 
+ * The result of an operation will be placed in data according
+ * to the operations 'output' string. This string is a dot
+ * separated fieldId. If any part of the output doesn't exist,
+ * then it is created.
  * 
- * If the page has no 'operations' field, or no valid operations
- * are given, then an empty object is returned.
+ * The page's onChange handler is passed in here in case any
+ * operation needs to persist its value within formData. Normally
+ * any operation result only lasts until the page is re-rendered.
  * 
  * @param {object} config The config for the page.
  * @param {object} data The page's formData.
- * @returns An object containing the results of the operations.
+ * @param {function} onChange The page's onChange handler.
+ * @returns data with the results of any operations included.
  */
 
 
-var runPageOperations = function runPageOperations(config, data) {
-  var result = {};
-
+var runPageOperations = function runPageOperations(config, data, onChange) {
   if (config !== null && config !== void 0 && config.operations && data) {
     config.operations.forEach(function (op) {
-      if (op.output) {
-        if ((0, _shouldRun.default)(op.run_when, data)) {
-          result[op.output] = doOperation(op, _objectSpread(_objectSpread({}, data), result));
+      if ((0, _shouldRun.default)(op.run_when, data)) {
+        var result = doOperation(op, data, onChange);
+
+        if (op.output) {
+          // Remove array indexers and replace them with dot separators. This ensures that outputPath will
+          // work with setDataItem.
+          var outputPath = _copReactComponents.Utils.interpolateString(op.output, data).replace('[', '.').replace(']', '');
+
+          (0, _setDataItem.default)(data, outputPath, result);
         }
       }
     });
   }
 
-  return result;
+  return data;
 };
 
 var _default = runPageOperations;

package/dist/utils/Operate/runPageOperations.test.js

@@ -4,64 +4,102 @@ var _runPageOperations = _interopRequireDefault(require("./runPageOperations"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
+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; }
+
 describe('Utils.Operate.runPageOperations', function () {
   var DATA = {
     alpha: 'abc',
     bravo: ['bcd', 'cde', 'charlie'],
-    charlie: 'def'
+    charlie: 'def',
+    delta: 'root',
+    array: ['123', '234', '456']
   };
   it('Should return an empty object when no operations are specified', function () {
     var PAGE = {};
     var result = (0, _runPageOperations.default)(PAGE, DATA);
-    expect(result).toEqual({});
+    expect(result).toEqual(DATA);
   });
   it('Should handle a single operation correctly', function () {
     var PAGE = {
       operations: [{
         output: 'firstOpResult',
-        function: 'getValueFromFormData',
+        function: 'setValueInFormData',
         field: 'alpha'
       }]
     };
     var result = (0, _runPageOperations.default)(PAGE, DATA);
-    expect(result).toEqual({
+    expect(result).toEqual(_objectSpread(_objectSpread({}, DATA), {}, {
       firstOpResult: 'abc'
-    });
+    }));
   });
   it('Should handle a multiple operations correctly', function () {
     var PAGE = {
       operations: [{
         output: 'firstOpResult',
-        function: 'getValueFromFormData',
+        function: 'setValueInFormData',
         field: 'alpha'
       }, {
         output: 'secondOpResult',
-        function: 'getValueFromFormData',
+        function: 'setValueInFormData',
         field: 'bravo[1]'
       }]
     };
     var result = (0, _runPageOperations.default)(PAGE, DATA);
-    expect(result).toEqual({
+    expect(result).toEqual(_objectSpread(_objectSpread({}, DATA), {}, {
       firstOpResult: 'abc',
       secondOpResult: 'cde'
-    });
+    }));
   });
   it('Should handle chained operations correctly', function () {
     var PAGE = {
       operations: [{
         output: 'firstOpResult',
-        function: 'getValueFromFormData',
+        function: 'setValueInFormData',
         field: 'bravo[2]'
       }, {
         output: 'secondOpResult',
-        function: 'getValueFromFormData',
+        function: 'setValueInFormData',
         field: '${firstOpResult}'
       }]
     };
     var result = (0, _runPageOperations.default)(PAGE, DATA);
-    expect(result).toEqual({
+    expect(result).toEqual(_objectSpread(_objectSpread({}, DATA), {}, {
       firstOpResult: 'charlie',
       secondOpResult: 'def'
-    });
+    }));
+  });
+  it('Should handle an interpolated output string correctly', function () {
+    var PAGE = {
+      operations: [{
+        function: 'setValueInFormData',
+        value: 'leaf',
+        output: '${delta}.trunk.branch'
+      }]
+    };
+    var result = (0, _runPageOperations.default)(PAGE, DATA);
+    expect(result).toEqual(_objectSpread(_objectSpread({}, DATA), {}, {
+      root: {
+        trunk: {
+          branch: 'leaf'
+        }
+      }
+    }));
+  });
+  it('Should handle an output string with array indeces in', function () {
+    var PAGE = {
+      operations: [{
+        function: 'setValueInFormData',
+        value: '000',
+        output: 'array[1]'
+      }]
+    };
+    var result = (0, _runPageOperations.default)(PAGE, DATA);
+    expect(result).toEqual(_objectSpread(_objectSpread({}, DATA), {}, {
+      array: ['123', '000', '456']
+    }));
   });
 });

package/dist/utils/Operate/{getValueFromFormData.js → setValueInFormData.js}

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // Global imports.
 // Local imports.
-var getValueFromFormData = function getValueFromFormData(config, data) {
+var setValueInFormData = function setValueInFormData(config, data) {
   if (config !== null && config !== void 0 && config.field) {
     var fieldPath = _copReactComponents.Utils.interpolateString(config.field, data);
 
@@ -23,5 +23,5 @@ var getValueFromFormData = function getValueFromFormData(config, data) {
   return (config === null || config === void 0 ? void 0 : config.value) || null;
 };
 
-var _default = getValueFromFormData;
+var _default = setValueInFormData;
 exports.default = _default;

package/dist/utils/Operate/{getValueFromFormData.test.js → setValueInFormData.test.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var _getValueFromFormData = _interopRequireDefault(require("./getValueFromFormData"));
+var _setValueInFormData = _interopRequireDefault(require("./setValueInFormData"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -14,32 +14,32 @@ describe('Utils.Operate.addToFormData', function () {
     var CONFIG = {
       value: '2'
     };
-    var result = (0, _getValueFromFormData.default)(CONFIG, DATA);
+    var result = (0, _setValueInFormData.default)(CONFIG, DATA);
     expect(result).toEqual(CONFIG.value);
   });
   it('Should return the value of the field given in config, if it exists', function () {
     var CONFIG = {
       field: 'a'
     };
-    var result = (0, _getValueFromFormData.default)(CONFIG, DATA);
+    var result = (0, _setValueInFormData.default)(CONFIG, DATA);
     expect(result).toEqual(DATA.a);
   });
   it('Should handle interpolated field strings', function () {
     var CONFIG = {
       field: 'b[${indexOfThree}]'
     };
-    var result = (0, _getValueFromFormData.default)(CONFIG, DATA);
+    var result = (0, _setValueInFormData.default)(CONFIG, DATA);
     expect(result).toEqual(DATA.b[1]);
   });
   it('Should return null when an invalid config is used', function () {
-    var result = (0, _getValueFromFormData.default)(null, DATA);
+    var result = (0, _setValueInFormData.default)(null, DATA);
     expect(result).toEqual(null);
   });
   it('Should return null when invalid data is used', function () {
     var CONFIG = {
       field: 'a'
     };
-    var result = (0, _getValueFromFormData.default)(CONFIG, null);
+    var result = (0, _setValueInFormData.default)(CONFIG, null);
     expect(result).toEqual(null);
   });
 });

package/package.json

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