@ukhomeoffice/cop-react-form-renderer 5.89.0 → 5.90.1

package/dist/components/FormComponent/Container.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,35 +11,37 @@ var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 var _getSourceData = _interopRequireDefault(require("../../utils/Data/getSourceData"));
-var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"]; // Global imports
+require("./Container.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // Global imports
 // Local imports
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form-container';
-var Container = function Container(_ref) {
-  var container = _ref.container,
-    value = _ref.value,
-    formData = _ref.formData,
-    onChange = _ref.onChange,
-    wrap = _ref.wrap,
-    onTopLevelChange = _ref.onTopLevelChange,
-    attrs = _objectWithoutProperties(_ref, _excluded);
-  var onComponentChange = function onComponentChange(_ref2) {
-    var target = _ref2.target;
+// Styles
+const DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form-container';
+const Container = _ref => {
+  let {
+    container,
+    value,
+    formData,
+    onChange,
+    wrap,
+    onTopLevelChange,
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    ...attrs
+  } = _ref;
+  const onComponentChange = _ref2 => {
+    let {
+      target
+    } = _ref2;
     if (typeof onChange === 'function') {
       if (target.name === _utils.default.Meta.name) {
         onChange({
-          target: target
+          target
         });
       } else {
-        var val = _objectSpread(_objectSpread({}, value), {}, _defineProperty({}, target.name, target.value));
+        const val = {
+          ...value,
+          [target.name]: target.value
+        };
         onChange({
           target: {
             name: container.fieldId,
@@ -50,33 +51,39 @@ var Container = function Container(_ref) {
       }
     }
   };
-  var shouldShow = function shouldShow(options) {
-    var fullPath = "".concat(container.full_path || container.fieldId, ".").concat(options.fieldId);
+  const shouldShow = options => {
+    const fullPath = `${container.full_path || container.fieldId}.${options.fieldId}`;
     if (options.type === _models.ComponentTypes.CONTAINER) {
-      return _utils.default.Container.show(_objectSpread(_objectSpread({}, options), {}, {
+      return _utils.default.Container.show({
+        ...options,
         full_path: fullPath
-      }), formData);
+      }, formData);
     }
-    return _utils.default.Component.show(_objectSpread(_objectSpread({}, options), {}, {
+    return _utils.default.Component.show({
+      ...options,
       full_path: fullPath
-    }), _objectSpread(_objectSpread({}, formData), (0, _getSourceData.default)(formData, container.full_path)));
+    }, {
+      ...formData,
+      ...(0, _getSourceData.default)(formData, container.full_path)
+    });
   };
-  var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
-  var cleanedAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
+  const classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
+  const cleanedAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, cleanedAttrs, {
     className: classes(),
     id: container.id
-  }), container.components && container.components.filter(shouldShow).map(function (component, index) {
-    var defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
-    var val = value ? value[component.fieldId] : defaultValue;
-    var fullPath = "".concat(container.full_path || container.fieldId, ".").concat(component.fieldId);
+  }), container.components && container.components.filter(shouldShow).map((component, index) => {
+    const defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
+    const val = value ? value[component.fieldId] : defaultValue;
+    const fullPath = `${container.full_path || container.fieldId}.${component.fieldId}`;
     return /*#__PURE__*/_react.default.createElement(_FormComponent.default, _extends({
       key: index
     }, attrs, {
-      component: _objectSpread(_objectSpread({}, component), {}, {
+      component: {
+        ...component,
         full_path: fullPath,
         readonly: !!(container.readonly || component.readonly)
-      }),
+      },
       formData: formData,
       value: val || defaultValue,
       wrap: wrap,

package/dist/components/FormComponent/Container.scss

@@ -0,0 +1,15 @@
+.horizonal {
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  .horizonal{
+    justify-content: space-around;
+  }
+}
+@media screen and (max-width: 640px) {
+  .horizonal {
+    flex-direction: column;
+    gap:0;
+  }
+}