@ukhomeoffice/cop-react-form-renderer 4.89.2 → 4.91.0

package/dist/components/FormComponent/Collection.js

@@ -132,9 +132,11 @@ var Collection = function Collection(_ref) {
       index: labelCount
     }));
     var removeStyle = config.disableAddAndRemove || index === 0 && config.minimumEntries ? '' : (_config$removeLocatio = config.removeLocation) !== null && _config$removeLocatio !== void 0 ? _config$removeLocatio : 'start';
+    var addStyle = index !== 0 && config.subsequentItemStyle ? config.subsequentItemStyle : {};
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(classes('item')),
-      key: item.id
+      key: item.id,
+      style: addStyle
     }, /*#__PURE__*/_react.default.createElement(_copReactComponents.Label, {
       id: item.id,
       required: true,
@@ -211,6 +213,7 @@ Collection.propTypes = {
     minimumEntries: _propTypes.default.number,
     readonly: _propTypes.default.bool,
     removeLocation: _propTypes.default.string,
+    subsequentItemStyle: _propTypes.default.shape({}),
     required: _propTypes.default.bool
   }).isRequired,
   formData: _propTypes.default.shape({}),

package/dist/components/FormComponent/Collection.test.js

@@ -728,4 +728,80 @@ describe('components.FormComponent.Collection', function () {
       }
     }, _callee12);
   })));
+  it('should handle the alternative styling with a background and padding on the subsequent item(s) when subsequentItemStyle is provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
+    var COLLECTION, container, c, addButton, item, label, secondItem, secondLabel;
+    return _regeneratorRuntime().wrap(function _callee14$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          COLLECTION = {
+            id: ID,
+            fieldId: ID,
+            type: _models.ComponentTypes.COLLECTION,
+            item: [TEXT_COMPONENT],
+            subsequentItemStyle: {
+              background: 'white',
+              padding: '1px'
+            }
+          };
+          container = document.createElement('div');
+          document.body.appendChild(container);
+          _context14.next = 5;
+          return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
+            return _regeneratorRuntime().wrap(function _callee13$(_context13) {
+              while (1) switch (_context13.prev = _context13.next) {
+                case 0:
+                  (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                    component: COLLECTION
+                  }), container);
+                case 1:
+                case "end":
+                  return _context13.stop();
+              }
+            }, _callee13);
+          })));
+        case 5:
+          // Check the container itself.
+          c = container.childNodes[0];
+          expect(c.tagName).toEqual('DIV');
+          expect(c.classList).toContain(_Collection.DEFAULT_CLASS);
+
+          // And now make sure it has no children OTHER than the button to add an item.
+          expect(c.childNodes.length).toEqual(1);
+
+          // Get hold of that "Add another" button and click it.
+          addButton = c.childNodes[0].childNodes[0];
+          _react.fireEvent.click(addButton, {});
+
+          // Make sure an item has been added.
+          expect(c.childNodes.length).toEqual(2);
+          item = c.childNodes[0];
+          label = item.childNodes[0];
+          expect(label.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.item, {
+            index: 1
+          }));
+
+          // Check to see if styling has been untouched for the first item
+          expect(item.style.background).toEqual('');
+          expect(item.style.padding).toEqual('');
+
+          // Get hold of that "Add another" button and click it.
+          _react.fireEvent.click(addButton, {});
+
+          // Make sure another item has been added.
+          expect(c.childNodes.length).toEqual(3);
+          secondItem = c.childNodes[1];
+          secondLabel = secondItem.childNodes[0];
+          expect(secondLabel.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.secondItem, {
+            index: 2
+          }));
+
+          // Get hold of the second item and check background and padding has been applied.
+          expect(secondItem.style.background).toEqual('white');
+          expect(secondItem.style.padding).toEqual('1px');
+        case 24:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee14);
+  })));
 });

package/dist/utils/Data/setupFormData.js

@@ -32,13 +32,26 @@ var setupDefaultValue = function setupDefaultValue(component, data, fullPath) {
       setupDefaultValue(comp, data, "".concat(componentFullPath, "."));
     });
   }
-  if (component.defaultValue && !(0, _getSourceData.default)(data, componentFullPath)) {
+  if ((component.defaultValue || component.defaultObjectValue) && !(0, _getSourceData.default)(data, componentFullPath)) {
     switch (component.type) {
       case 'date':
         setDefaultDateValue(component, data, fullPath);
         break;
       default:
-        (0, _setDataItem.default)(data, componentFullPath, component.defaultValue);
+        // defaultValue is expected to be a string, default object value is an object. Keeping defaultValue
+        // as a string is required for consuming apps using FormIO, this restriction could be removed in the future. 
+        {
+          if (component.defaultObjectValue) {
+            Object.keys(component.defaultObjectValue).forEach(function (value) {
+              if (typeof component.defaultObjectValue[value] === 'string' && (0, _getSourceData.default)(data, component.defaultObjectValue[value]) !== undefined) {
+                thisComponent.defaultObjectValue[value] = (0, _getSourceData.default)(data, component.defaultObjectValue[value]);
+              }
+            });
+          }
+          var defaultToUse = component.defaultObjectValue ? component.defaultObjectValue : component.defaultValue;
+          (0, _setDataItem.default)(data, componentFullPath, defaultToUse);
+          delete thisComponent.defaultObjectValue;
+        }
     }
   }
   if (component.defaultValue) {

package/dist/utils/Data/setupFormData.test.js

@@ -221,6 +221,75 @@ describe('utils', function () {
           testField: 'VALUE'
         });
       });
+      it('should handle a default value field with defaultObjectValue', function () {
+        var PAGES = [];
+        var COMPONENTS = [{
+          fieldId: 'testField',
+          type: 'autocomplete',
+          defaultObjectValue: {
+            id: 4,
+            name: 'Algeria',
+            value: '4',
+            label: 'Algeria'
+          }
+        }];
+        var DATA = {};
+        var RESULT = (0, _setupFormData.default)(PAGES, COMPONENTS, DATA);
+        expect(RESULT.testField).toMatchObject({
+          id: 4,
+          name: 'Algeria',
+          value: '4',
+          label: 'Algeria'
+        });
+      });
+      it('should handle a default value field with defaultObjectValue if dot-separated field identifier exists within the data', function () {
+        var PAGES = [];
+        var COMPONENTS = [{
+          fieldId: 'testField',
+          type: 'autocomplete',
+          defaultObjectValue: {
+            id: 'country.id',
+            name: 'country.name',
+            value: 'country.value',
+            label: 'country.name'
+          }
+        }];
+        var DATA = {
+          'country': {
+            'id': 4,
+            'name': 'Algeria',
+            'value': '4'
+          }
+        };
+        var RESULT = (0, _setupFormData.default)(PAGES, COMPONENTS, DATA);
+        expect(RESULT.testField).toMatchObject({
+          id: 4,
+          name: 'Algeria',
+          value: '4',
+          label: 'Algeria'
+        });
+      });
+      it('should ignore the default value field with defaultObjectValue if dot-separated field identifier doesn\'t exists within the data', function () {
+        var PAGES = [];
+        var COMPONENTS = [{
+          fieldId: 'testField',
+          type: 'autocomplete',
+          defaultObjectValue: {
+            id: 'country.id',
+            name: 'country.name',
+            value: 'country.value',
+            label: 'country.name'
+          }
+        }];
+        var DATA = {};
+        var RESULT = (0, _setupFormData.default)(PAGES, COMPONENTS, DATA);
+        expect(RESULT.testField).toMatchObject({
+          id: 'country.id',
+          name: 'country.name',
+          value: 'country.value',
+          label: 'country.name'
+        });
+      });
       it('should ignore a default value when a value already exists in data', function () {
         var PAGES = [];
         var COMPONENTS = [{

package/package.json

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