@ukhomeoffice/cop-react-form-renderer 2.1.0 → 2.2.0

package/dist/components/FormComponent/FormComponent.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = require("react");
 
+var _useHooks2 = _interopRequireDefault(require("../../hooks/useHooks"));
+
 var _useRefData2 = _interopRequireWildcard(require("../../hooks/useRefData"));
 
 var _utils = _interopRequireDefault(require("../../utils"));
@@ -52,6 +54,9 @@ var FormComponent = function FormComponent(_ref) {
       onChange = _ref.onChange,
       attrs = _objectWithoutProperties(_ref, _excluded);
 
+  var _useHooks = (0, _useHooks2.default)(),
+      hooks = _useHooks.hooks;
+
   var _useRefData = (0, _useRefData2.default)(component),
       data = _useRefData.data,
       status = _useRefData.status;
@@ -72,7 +77,7 @@ var FormComponent = function FormComponent(_ref) {
     options: options,
     value: value || '',
     onChange: onChange
-  }), wrap);
+  }), wrap, hooks.onGetComponent);
 };
 
 FormComponent.propTypes = {

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

@@ -4,6 +4,8 @@ var _react = require("@testing-library/react");
 
 var _react2 = _interopRequireDefault(require("react"));
 
+var _useHooks = require("../../hooks/useHooks");
+
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -14,6 +16,9 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 describe('components', function () {
   describe('FormComponent', function () {
+    beforeEach(function () {
+      (0, _useHooks.resetHooks)();
+    });
     it('should render a text component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var ID, VALUE, COMPONENT, ON_CHANGE, _render, container, formGroup, label, hint, input;
 
@@ -133,5 +138,67 @@ describe('components', function () {
         }
       }, _callee3);
     })));
+    it('should render an overridden html component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var ID, COMPONENT, _render4, container, div;
+
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              (0, _useHooks.addHook)('onGetComponent', function (config, wrap) {
+                return /*#__PURE__*/_react2.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
+              });
+              ID = 'component';
+              COMPONENT = {
+                type: 'html',
+                tagName: 'p',
+                content: 'HTML content'
+              };
+              _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                "data-testid": ID,
+                component: COMPONENT
+              })), container = _render4.container;
+              div = container.childNodes[0];
+              expect(div.tagName).toEqual('DIV');
+              expect(div.textContent).toEqual("".concat(COMPONENT.type, " | ").concat(COMPONENT.tagName, " | ").concat(COMPONENT.content, " | true"));
+
+            case 7:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    })));
+    it('should render the correct html component when the override returns null', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+      var ID, COMPONENT, _render5, container, p;
+
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              (0, _useHooks.addHook)('onGetComponent', function () {
+                return null;
+              });
+              ID = 'component';
+              COMPONENT = {
+                type: 'html',
+                tagName: 'p',
+                content: 'HTML content'
+              };
+              _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                "data-testid": ID,
+                component: COMPONENT
+              })), container = _render5.container;
+              p = container.childNodes[0];
+              expect(p.tagName).toEqual('P');
+              expect(p.textContent).toEqual(COMPONENT.content);
+
+            case 7:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    })));
   });
 });

package/dist/hooks/useHooks.js

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resetHooks = exports.removeHook = exports.default = exports.addHook = exports.ALLOWED_HOOKS = void 0;
-var ALLOWED_HOOKS = ['onRequest', 'onFormComplete', 'onFormLoad', 'onPageChange', 'onSubmit'];
+var ALLOWED_HOOKS = ['onFormComplete', 'onFormLoad', 'onGetComponent', 'onPageChange', 'onRequest', 'onSubmit'];
 exports.ALLOWED_HOOKS = ALLOWED_HOOKS;
 var DEFAULT_HOOKS = {
   onFormComplete: function onFormComplete() {},
   onFormLoad: function onFormLoad() {},
+  onGetComponent: function onGetComponent(config, wrap) {
+    return null;
+  },
   onPageChange: function onPageChange(pageId) {
     return pageId;
   },
@@ -22,6 +25,7 @@ var DEFAULT_HOOKS = {
 var hooks = {
   onFormComplete: DEFAULT_HOOKS.onFormComplete,
   onFormLoad: DEFAULT_HOOKS.onFormLoad,
+  onGetComponent: DEFAULT_HOOKS.onGetComponent,
   onPageChange: DEFAULT_HOOKS.onPageChange,
   onRequest: DEFAULT_HOOKS.onRequest,
   onSubmit: DEFAULT_HOOKS.onSubmit

package/dist/utils/Component/getComponent.js

@@ -132,9 +132,27 @@ var getComponentByType = function getComponentByType(config) {
       }
   }
 };
+/**
+ * Get a renderable component, based on a configuration object.
+ * @param {object} config The configuration object for the component.
+ * @param {boolean} wrap Indicates whether or not the component should be wrapped.
+ * @param {Function} fnOverride An optional override function for component rendering.
+ * @returns A renderable component.
+ */
+
 
 var getComponent = function getComponent(config) {
   var wrap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var fnOverride = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+
+  if (typeof fnOverride === 'function') {
+    var overrideComponent = fnOverride(config, wrap);
+
+    if (overrideComponent) {
+      return overrideComponent;
+    }
+  }
+
   var component = getComponentByType(config);
 
   if (component && wrap && (0, _isEditable.default)(config)) {

package/package.json

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