@ukhomeoffice/cop-react-form-renderer 4.15.1-alpha → 4.16.0

package/dist/components/FormComponent/FormComponent.js

@@ -90,6 +90,7 @@ var FormComponent = function FormComponent(_ref) {
     var target = _ref2.target;
 
     if (typeof onChange === 'function') {
+      target = (0, _helpers.addLabel)(target, component, data);
       onChange({
         target: target
       });

package/dist/components/FormComponent/helpers/addLabel.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+/**
+ * Adds label to target for given value.
+ * @param {object} target The target to be updated.
+ * @returns The updated target.
+ */
+var addLabel = function addLabel(target, component, data) {
+  // target.value can be an object in which case use value in object attribute
+  var value = _typeof(target.value) === 'object' ? target.value.value : target.value; // find the reference data item using the value
+
+  var item = data.find(function (e) {
+    return e.id === value;
+  }); // if item is null it means that the target.value can be used as a label otherwise use item.label
+
+  target['label'] = item === undefined ? target.value : item.label;
+  target['component'] = component.cya_label;
+  return target;
+};
+
+var _default = addLabel;
+exports.default = _default;

package/dist/components/FormComponent/helpers/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "addLabel", {
+  enumerable: true,
+  get: function get() {
+    return _addLabel.default;
+  }
+});
 Object.defineProperty(exports, "getComponentDisabled", {
   enumerable: true,
   get: function get() {
@@ -20,4 +26,6 @@ var _getComponentDisabled = _interopRequireDefault(require("./getComponentDisabl
 
 var _getComponentError = _interopRequireDefault(require("./getComponentError"));
 
+var _addLabel = _interopRequireDefault(require("./addLabel"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/FormPage/FormPage.js

@@ -68,6 +68,11 @@ var FormPage = function FormPage(_ref) {
 
   var _useValidation = (0, _hooks.useValidation)(),
       errors = _useValidation.errors;
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      patchLabel = _useState4[0],
+      setPatchLabel = _useState4[1];
   /**
    * Handle the state of the data directly within the page.
    * This is so that the overall form data isn't affected until such
@@ -81,6 +86,9 @@ var FormPage = function FormPage(_ref) {
     setPatch(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.name, target.value));
     });
+    setPatchLabel(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.component, target.label));
+    });
   };
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
@@ -112,7 +120,7 @@ var FormPage = function FormPage(_ref) {
       return _utils.default.Component.show(action, page.formData);
     }),
     onAction: function onAction(action) {
-      return _onAction(action, patch);
+      return _onAction(action, patch, patchLabel);
     }
   }));
 };

package/dist/components/FormRenderer/FormRenderer.js

@@ -292,8 +292,11 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
   (0, _react.useEffect)(function () {
     if (newPageId !== undefined) setPageId(newPageId);
   }, [newPageId]); // Handle actions from pages.
+  // (patch captures payload ready field name and value, 
+  // patchLabel captures non ID values 
+  // for display purposes after submission.)
 
-  var onPageAction = function onPageAction(action, patch) {
+  var onPageAction = function onPageAction(action, patch, patchLabel) {
     if (action.type === _models.PageAction.TYPES.CANCEL) {
       hooks.onCancel();
       return;
@@ -370,15 +373,16 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
         if (patch) {
           setData(submissionData);
-        } // In case of hub-and-spoke if patch has changed then save field name and value to variables for call to onSubmit hook
+        } // In case of hub-and-spoke if patchLabel has changed then 
+        // save name and value to variables for call to onSubmit hook
 
 
-        var changedFieldName = undefined;
-        var changedFieldValue = undefined;
+        var changedFieldName;
+        var changedFieldValue;
 
-        if (type === _models.FormTypes.HUB && Object.keys(patch).length > 0) {
-          changedFieldName = formState.page.components[0].cya_label;
-          changedFieldValue = Object.values(patch)[0];
+        if (type === _models.FormTypes.HUB && Object.keys(patchLabel).length > 0) {
+          changedFieldName = Object.keys(patchLabel)[0];
+          changedFieldValue = Object.values(patchLabel)[0];
         } // Now submit the data to the backend...
 
 

package/package.json

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