@insticc/genericform 1.0.3 → 1.0.4

package/build/FormFields/CustomCheckbox.js

@@ -20,6 +20,7 @@ var CustomCheckbox = function CustomCheckbox(_ref) {
     helpText = _ref$helpText === void 0 ? "" : _ref$helpText;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "checkboxDiv",
+    id: name,
     key: name
   }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Checkbox, {
     type: "checkbox",

package/build/FormFields/CustomDatePicker.js

@@ -21,6 +21,7 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? null : _ref$style;
   return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "datePickerDiv",
     key: name,
     id: 'form-dateDiv-' + name,
     style: style ? style : {

package/build/FormFields/CustomInput.js

@@ -22,6 +22,7 @@ var CustomInput = function CustomInput(_ref) {
     inputStyle = _ref$inputStyle === void 0 ? null : _ref$inputStyle,
     className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "inputDiv",
     id: name,
     style: style ? style : {
       marginBottom: '13px'

package/build/FormFields/CustomLabel.js

@@ -12,6 +12,8 @@ var CustomLabel = function CustomLabel(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? null : _ref$style;
   return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "labelDiv",
+    id: name,
     key: name,
     style: style ? style : {
       marginBottom: '13px'

package/build/FormFields/CustomNumberInput.js

@@ -25,7 +25,8 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
     _ref$tooltip = _ref.tooltip,
     tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "inputDiv",
+    className: "inputNumberDiv",
+    id: name,
     key: name
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: {

package/build/FormFields/CustomSearch.js

@@ -17,6 +17,8 @@ var CustomSearch = function CustomSearch(_ref) {
     isLoading = _ref.isLoading,
     options = _ref.options;
   return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "searchDiv",
+    id: name,
     key: name
   }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "form-input-" + name,

package/build/FormFields/MultipleCheckbox.js

@@ -22,6 +22,7 @@ var MultipleCheckbox = function MultipleCheckbox(_ref) {
     checkboxDivStyle = _ref$checkboxDivStyle === void 0 ? null : _ref$checkboxDivStyle;
   return /*#__PURE__*/_react["default"].createElement("div", {
     key: name,
+    id: name,
     className: "multipleCheckboxDiv",
     style: divStyle
   }, /*#__PURE__*/_react["default"].createElement("label", {

package/build/FormFields/MultipleDropdown.js

@@ -16,6 +16,7 @@ var MultipleDropdown = function MultipleDropdown(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     options = _ref.options;
   return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "multipleDropdownDiv",
     id: name,
     key: name
   }, /*#__PURE__*/_react["default"].createElement("label", {

package/build/FormFields/YearDatePicker.js

@@ -22,6 +22,7 @@ var YearDatePicker = function YearDatePicker(_ref) {
     _ref$currentMaxYear = _ref.currentMaxYear,
     currentMaxYear = _ref$currentMaxYear === void 0 ? false : _ref$currentMaxYear;
   return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "yearDateDiv",
     key: name,
     id: 'form-dateYearDiv-' + name,
     style: style ? style : {
@@ -70,6 +71,9 @@ var YearDatePicker = function YearDatePicker(_ref) {
         readOnly: true,
         onClick: openCalendar // Ensures the calendar opens when the input is clicked
       }));
+    },
+    inputProps: {
+      placeholder: "Select year"
     }
   })));
 };

package/build/index.css

@@ -0,0 +1,18 @@
+.form-columns {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.form-column {
+  width: fit-content;
+  min-width: 200px;
+}
+
+@media (max-width: 768px) {
+  .form-columns {
+    flex-direction: column;
+  }
+}

package/build/index.js

@@ -20,6 +20,7 @@ var _MultipleCheckbox = _interopRequireDefault(require("./FormFields/MultipleChe
 var _MultipleDropdown = _interopRequireDefault(require("./FormFields/MultipleDropdown"));
 var _MultipleRadioButton = _interopRequireDefault(require("./FormFields/MultipleRadioButton"));
 var _YearDatePicker = _interopRequireDefault(require("./FormFields/YearDatePicker"));
+require("./index.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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); }
 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); }
@@ -89,7 +90,8 @@ var GenericForm = exports["default"] = /*#__PURE__*/function (_React$Component)
         options: field.options,
         onChange: _this.props.handleChange,
         disabled: field.disabled,
-        upward: field.openUpward
+        upward: field.openUpward,
+        placeholder: field.placeholder || 'Select option'
       });
       var findList = list.find(function (l) {
         return l.name === field.name;
@@ -132,15 +134,18 @@ var GenericForm = exports["default"] = /*#__PURE__*/function (_React$Component)
         formStyle = _this$props.formStyle,
         _this$props$haveSaveB = _this$props.haveSaveButton,
         haveSaveButton = _this$props$haveSaveB === void 0 ? true : _this$props$haveSaveB,
-        handleSubmit = _this$props.handleSubmit;
+        handleSubmit = _this$props.handleSubmit,
+        _this$props$splitForm = _this$props.splitForm,
+        splitForm = _this$props$splitForm === void 0 ? false : _this$props$splitForm,
+        splitField = _this$props.splitField,
+        splitGroup = _this$props.splitGroup;
       var sortedFields = _this.state.sortedFields;
+
+      // Group fields by their group name or 'ungrouped'
       var groupedFields = {};
-      // Grouping
       sortedFields.forEach(function (field) {
         var group = field.group || 'ungrouped';
-        if (!groupedFields[group]) {
-          groupedFields[group] = [];
-        }
+        if (!groupedFields[group]) groupedFields[group] = [];
         groupedFields[group].push(field);
       });
       divStyle = divStyle || {
@@ -149,6 +154,116 @@ var GenericForm = exports["default"] = /*#__PURE__*/function (_React$Component)
       formStyle = formStyle || {
         margin: 'auto'
       };
+
+      // Helper: split array of fields by splitField name
+      var splitByField = function splitByField(fields) {
+        var index = fields.findIndex(function (f) {
+          return f.name === splitField;
+        });
+        if (index === -1) {
+          return {
+            left: fields,
+            right: []
+          }; // No splitField found, all on left
+        }
+        return {
+          left: fields.slice(0, index + 1),
+          right: fields.slice(index + 1)
+        };
+      };
+
+      // Helper: render list of fields filtering hidden ones
+      var renderFields = function renderFields(fields) {
+        return fields.map(function (field) {
+          if (!field.hide) {
+            return _this.renderField(field);
+          }
+          return null;
+        });
+      };
+
+      // If splitting is requested and splitField is provided
+      if (splitForm && splitField) {
+        if (splitGroup) {
+          // Split at the group level
+          var groups = Object.keys(groupedFields).sort();
+
+          // Find which group contains the splitField
+          var splitGroupIndex = groups.findIndex(function (group) {
+            return groupedFields[group].some(function (f) {
+              return f.name === splitField;
+            });
+          });
+          if (splitGroupIndex === -1) {
+            // splitField not found, render normal
+            return /*#__PURE__*/_react["default"].createElement("div", {
+              style: divStyle
+            }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form, {
+              style: formStyle,
+              onSubmit: handleSubmit
+            }, groups.map(function (group) {
+              return /*#__PURE__*/_react["default"].createElement("div", {
+                key: group
+              }, group !== 'ungrouped' && /*#__PURE__*/_react["default"].createElement("h2", null, group), renderFields(groupedFields[group]));
+            })));
+          }
+
+          // Groups for left and right columns
+          var leftGroups = groups.slice(0, splitGroupIndex + 1);
+          var rightGroups = groups.slice(splitGroupIndex + 1);
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            style: divStyle
+          }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form, {
+            style: formStyle,
+            onSubmit: handleSubmit
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: "form-columns"
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: "form-column"
+          }, leftGroups.map(function (group) {
+            return /*#__PURE__*/_react["default"].createElement("div", {
+              key: group
+            }, group !== 'ungrouped' && /*#__PURE__*/_react["default"].createElement("h2", null, group), renderFields(groupedFields[group]));
+          })), /*#__PURE__*/_react["default"].createElement("div", {
+            className: "form-column"
+          }, rightGroups.map(function (group) {
+            return /*#__PURE__*/_react["default"].createElement("div", {
+              key: group
+            }, group !== 'ungrouped' && /*#__PURE__*/_react["default"].createElement("h2", null, group), renderFields(groupedFields[group]));
+          })))));
+        }
+
+        // Split inside each group by splitField
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: divStyle
+        }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form, {
+          style: formStyle,
+          onSubmit: handleSubmit
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "form-columns"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "form-column"
+        }, Object.keys(groupedFields).map(function (group) {
+          var fields = groupedFields[group];
+          var _splitByField = splitByField(fields),
+            left = _splitByField.left;
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: group
+          }, group !== 'ungrouped' && /*#__PURE__*/_react["default"].createElement("h2", null, group), renderFields(left));
+        })), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "form-column"
+        }, Object.keys(groupedFields).map(function (group) {
+          var fields = groupedFields[group];
+          var _splitByField2 = splitByField(fields),
+            right = _splitByField2.right;
+          if (right.length === 0) return null;
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: group
+          }, group !== 'ungrouped' && /*#__PURE__*/_react["default"].createElement("h2", null, group), renderFields(right));
+        })))));
+      }
+
+      // Default: no split
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: divStyle
       }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form, {
@@ -157,12 +272,7 @@ var GenericForm = exports["default"] = /*#__PURE__*/function (_React$Component)
       }, Object.keys(groupedFields).map(function (group) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: group
-        }, group !== 'ungrouped' && /*#__PURE__*/_react["default"].createElement("h2", null, group), groupedFields[group].map(function (field, index) {
-          var showField = !field.hide;
-          if (showField) {
-            return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _this.renderField(field));
-          }
-        }));
+        }, group !== 'ungrouped' && /*#__PURE__*/_react["default"].createElement("h2", null, group), renderFields(groupedFields[group]));
       })));
     });
     _defineProperty(_this, "renderField", function (field) {
@@ -313,6 +423,7 @@ var GenericForm = exports["default"] = /*#__PURE__*/function (_React$Component)
             _this2.reRenderDropdown(element, true);
           }
         });
+        this.sortFields(fields);
       }
     }
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/genericform",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "a generic form with various types of fields",
   "main": "build/index.js",
   "scripts": {