@insticc/genericform 2.0.7 → 2.1.0

package/build/index.js

@@ -3,6 +3,96 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CustomAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _CustomAccordion["default"];
+  }
+});
+Object.defineProperty(exports, "CustomAction", {
+  enumerable: true,
+  get: function get() {
+    return _CustomAction["default"];
+  }
+});
+Object.defineProperty(exports, "CustomCheckbox", {
+  enumerable: true,
+  get: function get() {
+    return _CustomCheckbox["default"];
+  }
+});
+Object.defineProperty(exports, "CustomCheckboxGroup", {
+  enumerable: true,
+  get: function get() {
+    return _CustomCheckboxGroup["default"];
+  }
+});
+Object.defineProperty(exports, "CustomDatePicker", {
+  enumerable: true,
+  get: function get() {
+    return _CustomDatePicker["default"];
+  }
+});
+Object.defineProperty(exports, "CustomDropdown", {
+  enumerable: true,
+  get: function get() {
+    return _CustomDropdown["default"];
+  }
+});
+Object.defineProperty(exports, "CustomFileInput", {
+  enumerable: true,
+  get: function get() {
+    return _CustomFileInput["default"];
+  }
+});
+Object.defineProperty(exports, "CustomInput", {
+  enumerable: true,
+  get: function get() {
+    return _CustomInput["default"];
+  }
+});
+Object.defineProperty(exports, "CustomJson", {
+  enumerable: true,
+  get: function get() {
+    return _CustomJson["default"];
+  }
+});
+Object.defineProperty(exports, "CustomMobilePhone", {
+  enumerable: true,
+  get: function get() {
+    return _CustomMobilePhone["default"];
+  }
+});
+Object.defineProperty(exports, "CustomMultiDropdown", {
+  enumerable: true,
+  get: function get() {
+    return _CustomMultiDropdown["default"];
+  }
+});
+Object.defineProperty(exports, "CustomNumberInput", {
+  enumerable: true,
+  get: function get() {
+    return _CustomNumberInput["default"];
+  }
+});
+Object.defineProperty(exports, "CustomRadioGroup", {
+  enumerable: true,
+  get: function get() {
+    return _CustomRadioGroup["default"];
+  }
+});
+Object.defineProperty(exports, "CustomTextArea", {
+  enumerable: true,
+  get: function get() {
+    return _CustomTextArea["default"];
+  }
+});
+Object.defineProperty(exports, "CustomToggle", {
+  enumerable: true,
+  get: function get() {
+    return _CustomToggle["default"];
+  }
+});
 Object.defineProperty(exports, "Demo", {
   enumerable: true,
   get: function get() {
@@ -19,14 +109,17 @@ exports["default"] = void 0;
 var _react = require("react");
 var _reactBootstrap = require("react-bootstrap");
 var _CustomAccordion = _interopRequireDefault(require("./FormFields/CustomAccordion"));
+var _CustomAction = _interopRequireDefault(require("./FormFields/CustomAction"));
 var _CustomCheckbox = _interopRequireDefault(require("./FormFields/CustomCheckbox"));
 var _CustomCheckboxGroup = _interopRequireDefault(require("./FormFields/CustomCheckboxGroup"));
 var _CustomComponent = _interopRequireDefault(require("./FormFields/CustomComponent"));
 var _CustomDatePicker = _interopRequireDefault(require("./FormFields/CustomDatePicker"));
 var _CustomDropdown = _interopRequireDefault(require("./FormFields/CustomDropdown"));
+var _CustomFileInput = _interopRequireDefault(require("./FormFields/CustomFileInput"));
 var _CustomInput = _interopRequireDefault(require("./FormFields/CustomInput"));
 var _CustomJson = _interopRequireDefault(require("./FormFields/CustomJson"));
 var _CustomLabel = _interopRequireDefault(require("./FormFields/CustomLabel"));
+var _CustomMobilePhone = _interopRequireDefault(require("./FormFields/CustomMobilePhone"));
 var _CustomMultiDropdown = _interopRequireDefault(require("./FormFields/CustomMultiDropdown"));
 var _CustomNumberInput = _interopRequireDefault(require("./FormFields/CustomNumberInput"));
 var _CustomRadioGroup = _interopRequireDefault(require("./FormFields/CustomRadioGroup"));
@@ -116,10 +209,14 @@ var GenericForm = function GenericForm(_ref) {
     fieldsStyle = _ref.fieldsStyle,
     actionsDivStyle = _ref.actionsDivStyle,
     actionsStyle = _ref.actionsStyle,
+    inlineStyle = _ref.inlineStyle,
     _ref$splitForm = _ref.splitForm,
     splitForm = _ref$splitForm === void 0 ? false : _ref$splitForm,
-    splitField = _ref.splitField,
+    _ref$splitFields = _ref.splitFields,
+    splitFields = _ref$splitFields === void 0 ? [] : _ref$splitFields,
     splitGroup = _ref.splitGroup,
+    _ref$splitColumns = _ref.splitColumns,
+    splitColumns = _ref$splitColumns === void 0 ? 2 : _ref$splitColumns,
     _ref$disableDefaultCo = _ref.disableDefaultContainer,
     disableDefaultContainer = _ref$disableDefaultCo === void 0 ? false : _ref$disableDefaultCo,
     handleSubmit = _ref.handleSubmit,
@@ -155,7 +252,9 @@ var GenericForm = function GenericForm(_ref) {
     _ref$modalShow = _ref.modalShow,
     modalShow = _ref$modalShow === void 0 ? false : _ref$modalShow,
     _ref$modalSize = _ref.modalSize,
-    modalSize = _ref$modalSize === void 0 ? 'lg' : _ref$modalSize;
+    modalSize = _ref$modalSize === void 0 ? 'lg' : _ref$modalSize,
+    _ref$disableFormTag = _ref.disableFormTag,
+    disableFormTag = _ref$disableFormTag === void 0 ? false : _ref$disableFormTag;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     sortedFields = _useState2[0],
@@ -224,7 +323,7 @@ var GenericForm = function GenericForm(_ref) {
             var nextErrors = _objectSpread({}, prevErrors);
             Object.keys(patch).forEach(function (name) {
               var field = fields.find(function (f) {
-                return f.name === name;
+                return (f === null || f === void 0 ? void 0 : f.name) === name;
               });
               if (field) nextErrors[name] = validateField(field, patch[name], merged) || undefined;
             });
@@ -243,14 +342,14 @@ var GenericForm = function GenericForm(_ref) {
     var errs = [];
     if (field.required) {
       var empty = value === undefined || value === null || value === '' || Array.isArray(value) && value.length === 0;
-      if (empty) errs.push(field.errorMessage || "".concat(typeof field.label === 'string' && field.label || field.displayName || field.name, " is required"));
+      if (empty) errs.push(field.errorMessage || "".concat(typeof field.label === 'string' && field.label || field.name, " is required"));
     }
     if (field.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) errs.push(field.errorMessage || 'Invalid email format');
     if (field.minLength && value && value.length < field.minLength) errs.push(field.errorMessage || "Minimum ".concat(field.minLength, " characters required"));
     if (field.maxLength && value && value.length > field.maxLength) errs.push(field.errorMessage || "Maximum ".concat(field.maxLength, " characters allowed"));
     if (field.min !== undefined && value !== '' && Number(value) < field.min) errs.push(field.errorMessage || "Minimum value is ".concat(field.min));
     if (field.max !== undefined && value !== '' && Number(value) > field.max) errs.push(field.errorMessage || "Maximum value is ".concat(field.max));
-    if (typeof field.validate === 'function') {
+    if (!['date', 'datetime', 'year'].includes(field.type) && typeof field.validate === 'function') {
       var custom = field.validate(value, currentFormData || internalFormData);
       if (custom) errs.push(custom);
     }
@@ -454,9 +553,10 @@ var GenericForm = function GenericForm(_ref) {
     // Props shared by all interactive fields
     var cp = {
       name: field.name,
-      displayName: field.label || field.displayName,
+      label: field.label,
       disabled: field.disabled,
-      required: field.required
+      required: field.required,
+      placeholder: field.placeholder
     };
     var sp = {
       mainDivStyle: field.style,
@@ -500,7 +600,6 @@ var GenericForm = function GenericForm(_ref) {
       case 'number':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomNumberInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
-          placeholder: field.placeholder,
           min: field.min,
           max: field.max,
           step: field.step,
@@ -509,11 +608,17 @@ var GenericForm = function GenericForm(_ref) {
       case 'textArea':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomTextArea["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
-          placeholder: field.placeholder,
           rows: field.rows,
           height: field.height,
           onChange: fieldHandler(field)
         }), field.name);
+      case 'tel':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomMobilePhone["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
+          value: value,
+          onChange: fieldHandler,
+          countryCodes: field.countryCodes,
+          defaultCountryCode: field.defaultCountryCode
+        }), field.name);
 
       // Date
       case 'date':
@@ -522,8 +627,8 @@ var GenericForm = function GenericForm(_ref) {
       case 'year':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomDatePicker["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
-          placeholder: field.placeholder,
           onChange: dateFieldHandler(field),
+          isValidDate: field.validate,
           dateFormat: field.type === 'time' ? false : field.type === 'year' ? 'YYYY' : 'DD/MM/YYYY',
           timeFormat: field.type === 'datetime' || field.type === 'time' ? 'HH:mm' : false
         }), field.name);
@@ -588,10 +693,14 @@ var GenericForm = function GenericForm(_ref) {
       case 'checkboxGroup':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomCheckboxGroup["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           checked: value !== null && value !== void 0 ? value : [],
+          onChange: fieldHandler(field),
+          onOptionChange: field.onOptionChange,
+          groupInputStyle: field.groupInputStyle,
           options: field.options,
           grouped: field.grouped,
-          onChange: fieldHandler(field),
-          onOptionChange: field.onOptionChange
+          collapsible: field.collapsible,
+          defaultCollapsed: field.defaultCollapsed,
+          enableParent: field.enableParent
         }), field.name);
       case 'radioGroup':
       case 'radioGroupInline':
@@ -629,11 +738,17 @@ var GenericForm = function GenericForm(_ref) {
             return validateJsonField(name, raw, isMulti, false, field);
           }
         }), field.name);
+      case 'file':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomFileInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
+          value: value,
+          accept: field.accept,
+          onChange: fieldHandler(field)
+        }), field.name);
       default:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          type: field.type
+        }, cp), sp), fp), {}, {
           value: value,
-          type: "text",
-          placeholder: field.placeholder,
           onChange: fieldHandler(field),
           className: field.className
         }), field.name);
@@ -656,6 +771,7 @@ var GenericForm = function GenericForm(_ref) {
     return groupByInline(fieldList).map(function (group, idx) {
       return group.type === 'inline' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "ufg-field-row",
+        style: inlineStyle,
         children: group.fields.map(function (_ref9) {
           var field = _ref9.field;
           return renderField(field);
@@ -672,63 +788,91 @@ var GenericForm = function GenericForm(_ref) {
       }), renderFields(fieldList)]
     }, g);
   };
-  var splitByField = function splitByField(fieldList) {
-    var idx = fieldList.findIndex(function (f) {
-      return f.name === splitField;
+
+  // ── Replace splitByField + buildContent entirely ─────────────────────────────
+
+  var splitFieldsSet = (0, _react.useMemo)(function () {
+    return new Set(splitFields);
+  }, [splitFields]);
+
+  /**
+   * Returns the index of the last field (in `list`) whose name is in splitFields.
+   * Returns -1 when none match.
+   */
+  var lastSplitIdx = (0, _react.useCallback)(function (list) {
+    var idx = -1;
+    list.forEach(function (f, i) {
+      if (splitFieldsSet.has(f.name)) idx = i;
     });
-    if (idx === -1) return {
-      left: fieldList,
-      right: []
-    };
-    return {
-      left: fieldList.slice(0, idx + 1),
-      right: fieldList.slice(idx + 1)
-    };
-  };
-  var buildContent = function buildContent() {
+    return idx;
+  }, [splitFieldsSet]);
+  var buildContent = (0, _react.useCallback)(function () {
     var groups = Object.keys(groupedFields);
-    if (splitForm && splitField && splitGroup) {
-      var splitIdx = groups.findIndex(function (g) {
-        return groupedFields[g].some(function (f) {
-          return f.name === splitField;
-        });
+    if (!splitForm || splitFields.length === 0) return groups.map(function (g) {
+      return renderGroupSection(g, groupedFields[g]);
+    });
+
+    // ── Group-level split ────────────────────────────────────────────────────
+    if (splitGroup) {
+      // Find the rightmost group that contains any splitField
+      var pivotGroupIdx = -1;
+      groups.forEach(function (g, gi) {
+        if (groupedFields[g].some(function (f) {
+          return splitFieldsSet.has(f.name);
+        })) pivotGroupIdx = gi;
       });
-      if (splitIdx === -1) return groups.map(function (g) {
+      if (pivotGroupIdx === -1) return groups.map(function (g) {
         return renderGroupSection(g, groupedFields[g]);
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "ufg-form-columns",
+        style: {
+          gridTemplateColumns: "repeat(".concat(splitColumns, ", 1fr)")
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: groups.slice(0, splitIdx + 1).map(function (g) {
+          children: groups.slice(0, pivotGroupIdx + 1).map(function (g) {
             return renderGroupSection(g, groupedFields[g]);
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: groups.slice(splitIdx + 1).map(function (g) {
+          children: groups.slice(pivotGroupIdx + 1).map(function (g) {
             return renderGroupSection(g, groupedFields[g]);
           })
         })]
       });
     }
-    if (splitForm && splitField) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "ufg-form-columns",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: groups.map(function (g) {
-            return renderGroupSection(g, splitByField(groupedFields[g]).left);
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: groups.map(function (g) {
-            var _splitByField = splitByField(groupedFields[g]),
-              right = _splitByField.right;
-            return right.length ? renderGroupSection(g, right) : null;
-          })
-        })]
-      });
-    }
-    return groups.map(function (g) {
+
+    // ── Field-level split (cross-group aware) ────────────────────────────────
+    // Flatten preserving order, find pivot, then re-group each side.
+    var allFields = groups.flatMap(function (g) {
+      return groupedFields[g];
+    });
+    var pivot = lastSplitIdx(allFields);
+    if (pivot === -1) return groups.map(function (g) {
       return renderGroupSection(g, groupedFields[g]);
     });
-  };
+    var regroup = function regroup(slice) {
+      var map = {};
+      slice.forEach(function (f) {
+        var g = f.group || 'ungrouped';
+        if (!map[g]) map[g] = [];
+        map[g].push(f);
+      });
+      return Object.keys(map).map(function (g) {
+        return renderGroupSection(g, map[g]);
+      });
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "ufg-form-columns",
+      style: {
+        gridTemplateColumns: "repeat(".concat(splitColumns, ", 1fr)")
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: regroup(allFields.slice(0, pivot + 1))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: regroup(allFields.slice(pivot + 1))
+      })]
+    });
+  }, [groupedFields, splitForm, splitFields, splitGroup, splitFieldsSet, lastSplitIdx, renderGroupSection]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // #endregion
   // #region Actions bar
@@ -737,14 +881,11 @@ var GenericForm = function GenericForm(_ref) {
     className: "ufg-actions",
     style: actionsDivStyle,
     children: [customActions.map(function (action, idx) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        type: "button",
-        className: "ufg-button ".concat(action.className || 'ufg-button-secondary'),
-        onClick: action.onClick,
-        disabled: !!action.disabled,
-        style: _objectSpread(_objectSpread({}, actionsStyle), action.style),
-        children: [action.icon, action.label || action.name]
-      }, idx);
+      return (0, _CustomAction["default"])(_objectSpread(_objectSpread({}, action), {}, {
+        name: "".concat(action.name, " ").concat(idx),
+        className: action.className || "ufg-button-secondary",
+        style: _objectSpread(_objectSpread({}, actionsStyle), action.style)
+      }));
     }), showSubmit && haveSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       type: "submit",
       className: "ufg-button ".concat(submitButton.className || 'ufg-button-primary'),
@@ -769,7 +910,14 @@ var GenericForm = function GenericForm(_ref) {
 
   // #endregion
   // #region Form JSX
-  var formJSX = /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+  var formJSX = disableFormTag ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "ufg-form",
+    style: formStyle || {
+      margin: 'auto'
+    },
+    onSubmit: onFormSubmit,
+    children: [buildContent(), actionsBar]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
     className: "ufg-form",
     style: formStyle || {
       margin: 'auto'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/genericform",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "A generic form with a comprehensive set of field types, validation, and external state management",
   "main": "build/index.js",
   "scripts": {