@insticc/genericform 1.0.0 → 1.0.2

package/build/FormFields/CustomCheckbox.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomCheckbox = function CustomCheckbox(_ref) {
+  var _onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    checked = _ref.checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "checkboxDiv",
+    key: name
+  }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Checkbox, {
+    type: "checkbox",
+    style: {
+      display: 'inline-block',
+      margin: '0px 0px'
+    },
+    checked: checked,
+    onChange: function onChange(checked) {
+      return _onChange(name);
+    },
+    disabled: disabled
+  }), /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "form-input-" + name,
+    style: {
+      display: 'inline-block',
+      fontSize: '10pt',
+      textAlign: 'center',
+      margin: '0px 5px'
+    }
+  }, displayName, " ", showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+    name: "help circle",
+    title: helpText
+  }) : null));
+};
+var _default = exports["default"] = CustomCheckbox;

package/build/FormFields/CustomDatePicker.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDatetime = _interopRequireDefault(require("react-datetime"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomDatePicker = function CustomDatePicker(_ref) {
+  var _onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    value = _ref.value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    key: name,
+    id: 'form-dateDiv-' + name,
+    style: style ? style : {
+      display: 'flex',
+      alignItems: 'baseline'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    id: 'form-datelabel-' + name,
+    htmlFor: "form-date-" + name,
+    style: {
+      width: '161px',
+      fontSize: '10pt',
+      textAlign: 'left'
+    }
+  }, displayName), /*#__PURE__*/_react["default"].createElement(_reactDatetime["default"], {
+    style: {
+      maxWidth: 350,
+      display: 'inline-block'
+    },
+    id: "form-date-" + name,
+    value: value,
+    dateFormat: "DD/MM/YYYY",
+    onChange: function onChange(date) {
+      return _onChange(date, name);
+    },
+    input: true,
+    timeFormat: false,
+    disabled: disabled,
+    required: required
+  }), tooltip != "" ? /*#__PURE__*/_react["default"].createElement("label", {
+    style: {
+      fontSize: '11px'
+    }
+  }, tooltip) : null);
+};
+var _default = exports["default"] = CustomDatePicker;

package/build/FormFields/CustomDropdown.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomDropdown = function CustomDropdown(_ref) {
+  var field = _ref.field,
+    reRenderDropdown = _ref.reRenderDropdown;
+  return (
+    /*#__PURE__*/
+    //TODO: HANDLE THIS FIELD TYPE
+    _react["default"].createElement("div", {
+      key: field.name,
+      className: "dropdownDiv",
+      style: field.style ? field.style : {
+        display: 'flex',
+        alignItems: 'baseline',
+        minWidth: '510px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("label", {
+      id: "form-inputLabel-" + field.name,
+      htmlFor: "form-input-" + field.name,
+      style: {
+        width: '162px',
+        fontSize: '10pt',
+        textAlign: 'left'
+      }
+    }, field.displayName), reRenderDropdown(field))
+  );
+};
+var _default = exports["default"] = CustomDropdown;

package/build/FormFields/CustomInput.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomInput = function CustomInput(_ref) {
+  var onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    value = _ref.value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? null : _ref$inputStyle,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: name,
+    style: style ? style : {
+      marginBottom: '13px'
+    },
+    key: name
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: 'form-input-' + name,
+    style: {
+      width: '161px',
+      fontSize: '10pt',
+      textAlign: 'left'
+    }
+  }, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: '#db2828',
+      position: 'relative',
+      top: '-2px'
+    }
+  }, "*")), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Input, {
+    inline: true,
+    style: inputStyle ? inputStyle : {
+      minWidth: 350,
+      fontSize: '16px !important'
+    },
+    id: "form-input-" + name,
+    placeholder: displayName,
+    name: name,
+    value: value,
+    onChange: onChange,
+    disabled: disabled,
+    required: required,
+    className: className
+  }));
+};
+var _default = exports["default"] = CustomInput;

package/build/FormFields/CustomLabel.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomLabel = function CustomLabel(_ref) {
+  var name = _ref.name,
+    displayName = _ref.displayName,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    key: name,
+    style: style ? style : {
+      marginBottom: '13px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: 'form-input-' + name,
+    style: {
+      width: '161px',
+      fontSize: '10pt',
+      textAlign: 'left'
+    }
+  }, displayName));
+};
+var _default = exports["default"] = CustomLabel;

package/build/FormFields/CustomNumberInput.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomNumberInput = function CustomNumberInput(_ref) {
+  var onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    value = _ref.value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    key: name
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'inline-block',
+      margin: '0 0 1em'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Input, {
+    inline: true,
+    style: style ? style : {
+      minWidth: 50,
+      fontSize: '16px !important'
+    },
+    id: "form-input-" + name,
+    placeholder: name,
+    type: "number",
+    label: /*#__PURE__*/_react["default"].createElement("label", {
+      "for": "form-input-" + name,
+      style: {
+        fontWeight: 'normal !important',
+        marginTop: 10,
+        width: 150,
+        fontSize: '10pt'
+      }
+    }, displayName, " ", showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+      name: "user circle help",
+      title: helpText
+    }) : null),
+    name: name,
+    defaultValue: value,
+    onChange: onChange,
+    disabled: disabled,
+    required: required
+  })));
+};
+var _default = exports["default"] = CustomNumberInput;

package/build/FormFields/CustomRadioButton.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomRadioButton = function CustomRadioButton(_ref) {
+  var _onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    checked = _ref.checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: name,
+    className: "radioButtonDiv",
+    key: name
+  }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Radio, {
+    style: {
+      display: 'inline-block',
+      margin: '0'
+    },
+    label: displayName,
+    name: name,
+    checked: checked,
+    onChange: function onChange(checked) {
+      return _onChange(name);
+    },
+    disabled: disabled
+  }), showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+    name: "help circle",
+    title: helpText
+  }) : null);
+};
+var _default = exports["default"] = CustomRadioButton;

package/build/FormFields/CustomSearch.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomSearch = function CustomSearch(_ref) {
+  var onChange = _ref.onChange,
+    handleResultSelect = _ref.handleResultSelect,
+    resultRenderer = _ref.resultRenderer,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    value = _ref.value,
+    isLoading = _ref.isLoading,
+    options = _ref.options;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    key: name
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "form-input-" + name,
+    style: {
+      width: '161px',
+      fontSize: '10pt',
+      textAlign: 'left'
+    }
+  }, displayName), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Search, {
+    style: {
+      maxWidth: 350,
+      display: 'inline-block',
+      margin: '0 0 1em'
+    },
+    loading: isLoading,
+    onResultSelect: handleResultSelect,
+    onSearchChange: onChange,
+    results: options,
+    resultRenderer: resultRenderer,
+    value: value
+  }));
+};
+var _default = exports["default"] = CustomSearch;

package/build/FormFields/CustomTextArea.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomTextArea = function CustomTextArea(_ref) {
+  var onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    value = _ref.value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '90%' : _ref$height,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style;
+  return /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.TextArea, {
+    inline: true,
+    key: name,
+    style: style ? style : {
+      minWidth: 350,
+      fontSize: '16px !important',
+      height: height
+    },
+    id: "form-input-" + name,
+    placeholder: displayName,
+    label: /*#__PURE__*/_react["default"].createElement("label", {
+      htmlFor: "form-input-" + name,
+      style: {
+        fontWeight: 'normal !important',
+        marginTop: 10,
+        width: 350,
+        fontSize: '10pt'
+      }
+    }, displayName),
+    name: name,
+    value: value,
+    onChange: onChange,
+    disabled: disabled,
+    required: required,
+    rows: 10
+  });
+};
+var _default = exports["default"] = CustomTextArea;

package/build/FormFields/MultipleCheckbox.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var MultipleCheckbox = function MultipleCheckbox(_ref) {
+  var _onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    options = _ref.options,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$divStyle = _ref.divStyle,
+    divStyle = _ref$divStyle === void 0 ? null : _ref$divStyle,
+    _ref$labelStyle = _ref.labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? null : _ref$labelStyle,
+    _ref$checkboxDivStyle = _ref.checkboxDivStyle,
+    checkboxDivStyle = _ref$checkboxDivStyle === void 0 ? null : _ref$checkboxDivStyle;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    key: name,
+    className: "multipleCheckboxDiv",
+    style: divStyle
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: 'form-input-' + name,
+    style: labelStyle ? labelStyle : {
+      width: '161px',
+      fontSize: '10pt',
+      textAlign: 'left'
+    }
+  }, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: '#db2828',
+      position: 'relative',
+      top: '-2px'
+    }
+  }, "*")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "multipleCheckboxGroupDiv"
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "checkboxDiv",
+      style: checkboxDivStyle
+    }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Checkbox, {
+      type: "checkbox",
+      style: {
+        display: 'inline-block',
+        margin: '0'
+      },
+      label: option.label,
+      name: option.name,
+      checked: option.checked,
+      onChange: function onChange() {
+        return _onChange(option.name);
+      },
+      disabled: option.disabled
+    }), option.showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+      name: "help circle",
+      title: option.helpText
+    }) : null);
+  })));
+};
+var _default = exports["default"] = MultipleCheckbox;

package/build/FormFields/MultipleDropdown.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var MultipleDropdown = function MultipleDropdown(_ref) {
+  var onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    value = _ref.value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    options = _ref.options;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: name,
+    key: name
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "form-input-" + name,
+    style: {
+      width: '161px',
+      fontSize: '10pt',
+      textAlign: 'left'
+    }
+  }, displayName), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Dropdown, {
+    style: {
+      maxWidth: 350,
+      display: 'inline-block',
+      margin: '0 0 1em'
+    },
+    placeholder: "Select " + name,
+    name: name,
+    fluid: true,
+    multiple: true,
+    selection: true,
+    search: true,
+    value: value,
+    options: options,
+    onChange: onChange,
+    disabled: disabled
+  }));
+};
+var _default = exports["default"] = MultipleDropdown;

package/build/FormFields/MultipleRadioButton.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var MultipleRadioButton = function MultipleRadioButton(_ref) {
+  var _onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    divStyle = _ref.divStyle,
+    _ref$labelStyle = _ref.labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? null : _ref$labelStyle,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    options = _ref.options,
+    radioButtonDivStyle = _ref.radioButtonDivStyle,
+    component = _ref.component;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: name,
+    className: "multipleRadioDiv",
+    key: name,
+    style: divStyle
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: 'form-input-' + name,
+    style: labelStyle ? labelStyle : {
+      width: '161px',
+      fontSize: '10pt',
+      textAlign: 'left'
+    }
+  }, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: '#db2828',
+      position: 'relative',
+      top: '-2px'
+    }
+  }, "*")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "multipleRadioGroupDiv",
+    style: radioButtonDivStyle
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "radioButtonDiv"
+    }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Radio, {
+      style: {
+        display: 'inline-block',
+        margin: '0'
+      },
+      label: option.label,
+      name: option.name,
+      checked: option.checked,
+      onChange: function onChange() {
+        return _onChange(option.name);
+      },
+      disabled: option.disabled
+    }), option.showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+      name: "help circle",
+      title: option.helpText
+    }) : null);
+  }), component ? component : null));
+};
+var _default = exports["default"] = MultipleRadioButton;

package/build/FormFields/YearDatePicker.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDatetime = _interopRequireDefault(require("react-datetime"));
+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); }
+var YearDatePicker = function YearDatePicker(_ref) {
+  var _onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    value = _ref.value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style,
+    _ref$currentMaxYear = _ref.currentMaxYear,
+    currentMaxYear = _ref$currentMaxYear === void 0 ? false : _ref$currentMaxYear;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    key: name,
+    id: 'form-dateYearDiv-' + name,
+    style: style ? style : {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    id: 'form-dateYearlabel-' + name,
+    htmlFor: "form-dateYear-" + name,
+    style: {
+      width: '161px',
+      fontSize: '10pt',
+      textAlign: 'left'
+    }
+  }, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: '#db2828',
+      position: 'relative',
+      top: '-2px'
+    }
+  }, "*")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactDatetime["default"], {
+    style: {
+      maxWidth: 350,
+      display: 'inline-block'
+    },
+    id: "form-dateYear-" + name,
+    value: value,
+    dateFormat: "YYYY",
+    timeFormat: false,
+    input: true,
+    onChange: function onChange(date) {
+      return _onChange(date, name);
+    },
+    viewMode: "years",
+    disabled: disabled,
+    isValidDate: function isValidDate(current) {
+      if (currentMaxYear) {
+        var year = current.year();
+        var currentYear = new Date().getFullYear();
+        return year >= 2000 && year <= currentYear;
+      }
+      return true;
+    },
+    renderInput: function renderInput(props, openCalendar) {
+      return /*#__PURE__*/_react["default"].createElement("input", _extends({}, props, {
+        readOnly: true,
+        onClick: openCalendar // Ensures the calendar opens when the input is clicked
+      }));
+    }
+  })));
+};
+var _default = exports["default"] = YearDatePicker;

package/build/index.js

@@ -1,32 +1,322 @@
 "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
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+var _shallowequal = _interopRequireDefault(require("shallowequal"));
+var _CustomCheckbox = _interopRequireDefault(require("./FormFields/CustomCheckbox"));
+var _CustomDatePicker = _interopRequireDefault(require("./FormFields/CustomDatePicker"));
+var _CustomDropdown = _interopRequireDefault(require("./FormFields/CustomDropdown"));
+var _CustomInput = _interopRequireDefault(require("./FormFields/CustomInput"));
+var _CustomLabel = _interopRequireDefault(require("./FormFields/CustomLabel"));
+var _CustomNumberInput = _interopRequireDefault(require("./FormFields/CustomNumberInput"));
+var _CustomRadioButton = _interopRequireDefault(require("./FormFields/CustomRadioButton"));
+var _CustomSearch = _interopRequireDefault(require("./FormFields/CustomSearch"));
+var _CustomTextArea = _interopRequireDefault(require("./FormFields/CustomTextArea"));
+var _MultipleCheckbox = _interopRequireDefault(require("./FormFields/MultipleCheckbox"));
+var _MultipleDropdown = _interopRequireDefault(require("./FormFields/MultipleDropdown"));
+var _MultipleRadioButton = _interopRequireDefault(require("./FormFields/MultipleRadioButton"));
+var _YearDatePicker = _interopRequireDefault(require("./FormFields/YearDatePicker"));
+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); }
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var Button = function Button() {
-  var _useState = (0, _react.useState)('blue'),
-    _useState2 = _slicedToArray(_useState, 2),
-    color = _useState2[0],
-    setColor = _useState2[1];
-  var changeColor = function changeColor() {
-    setColor(color === 'blue' ? 'red' : 'blue');
-  };
-  return /*#__PURE__*/_react["default"].createElement("button", {
-    style: {
-      backgroundColor: color
-    },
-    onClick: changeColor
-  }, "Click me");
-};
-var _default = exports["default"] = Button;
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+require('react-datetime/css/react-datetime.css');
+var GenericForm = exports["default"] = /*#__PURE__*/function (_React$Component) {
+  function GenericForm(props) {
+    var _this;
+    _classCallCheck(this, GenericForm);
+    _this = _callSuper(this, GenericForm, [props]);
+    _defineProperty(_this, "sortFields", function (fields) {
+      var grouped = {},
+        ungrouped = [];
+      fields.forEach(function (field) {
+        if (field.group) {
+          if (!grouped[field.group]) {
+            grouped[field.group] = [];
+          }
+          grouped[field.group].push(field);
+        } else {
+          ungrouped.push(field);
+        }
+      });
+      var sortedGroups = Object.keys(grouped).sort();
+      var sortedFields = sortedGroups.flatMap(function (group) {
+        return grouped[group];
+      }).concat(ungrouped);
+      _this.setState({
+        sortedFields: sortedFields
+      });
+    });
+    _defineProperty(_this, "reRenderDropdown", function (field) {
+      var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var list = _this.state.list;
+      var toReturn = /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Select, {
+        style: field.inputStyle ? field.inputStyle : {
+          maxWidth: 350,
+          display: 'inline-block',
+          margin: '0 0 1em'
+        },
+        clearable: true,
+        fluid: true,
+        search: true,
+        id: "form-input-" + field.name,
+        name: field.name,
+        value: field.value,
+        options: field.options,
+        onChange: _this.props.handleChange,
+        disabled: field.disabled,
+        upward: field.openUpward
+      });
+      var findList = list.find(function (l) {
+        return l.name === field.name;
+      });
+      if (!findList) {
+        if (update === true) _this.setState({
+          list: [].concat(_toConsumableArray(list), [{
+            name: field.name,
+            value: toReturn,
+            props: field.options
+          }])
+        });
+        return toReturn;
+      } else {
+        if (field.value !== findList.value.props.value) {
+          if (update === true) _this.setState({
+            list: list.map(function (l) {
+              return l.name === field.name ? _objectSpread(_objectSpread({}, l), {}, {
+                value: toReturn
+              }) : l;
+            })
+          });
+          return toReturn;
+        } else if (field.disabled !== findList.value.props.disabled) {
+          if (update === true) _this.setState({
+            list: list.map(function (l) {
+              return l.name === field.name ? _objectSpread(_objectSpread({}, l), {}, {
+                value: toReturn
+              }) : l;
+            })
+          });
+          return toReturn;
+        }
+        return findList.value;
+      }
+    });
+    _defineProperty(_this, "renderContent", function () {
+      var _this$props = _this.props,
+        divStyle = _this$props.divStyle,
+        formStyle = _this$props.formStyle,
+        _this$props$haveSaveB = _this$props.haveSaveButton,
+        haveSaveButton = _this$props$haveSaveB === void 0 ? true : _this$props$haveSaveB,
+        handleSubmit = _this$props.handleSubmit;
+      var sortedFields = _this.state.sortedFields;
+      var groupedFields = {};
+      // Grouping
+      sortedFields.forEach(function (field) {
+        var group = field.group || 'ungrouped';
+        if (!groupedFields[group]) {
+          groupedFields[group] = [];
+        }
+        groupedFields[group].push(field);
+      });
+      divStyle = divStyle || {
+        width: '100%'
+      };
+      formStyle = formStyle || {
+        margin: 'auto'
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: divStyle
+      }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form, {
+        style: formStyle,
+        onSubmit: handleSubmit
+      }, 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));
+          }
+        }));
+      })));
+    });
+    _defineProperty(_this, "renderField", function (field) {
+      var _this$props2 = _this.props,
+        handleChange = _this$props2.handleChange,
+        onChangeTime = _this$props2.onChangeTime,
+        onChangeYear = _this$props2.onChangeYear,
+        handleSearchChange = _this$props2.handleSearchChange,
+        handleResultSelect = _this$props2.handleResultSelect,
+        resultRenderer = _this$props2.resultRenderer,
+        handleCheckboxChange = _this$props2.handleCheckboxChange,
+        handleRadioChange = _this$props2.handleRadioChange,
+        handleMultipleCheckboxChange = _this$props2.handleMultipleCheckboxChange,
+        handleMultipleRadioChange = _this$props2.handleMultipleRadioChange;
+      var componentMap = {
+        string: _CustomInput["default"],
+        "int": _CustomNumberInput["default"],
+        date: _CustomDatePicker["default"],
+        yearDate: _YearDatePicker["default"],
+        multipleDropdown: _MultipleDropdown["default"],
+        search: _CustomSearch["default"],
+        list: _CustomDropdown["default"],
+        textArea: _CustomTextArea["default"],
+        checkbox: _CustomCheckbox["default"],
+        radioButton: _CustomRadioButton["default"],
+        multipleCheckboxes: _MultipleCheckbox["default"],
+        multipleRadioButtons: _MultipleRadioButton["default"],
+        label: _CustomLabel["default"]
+      };
+      var commonProps = {
+        name: field.name,
+        displayName: field.displayName,
+        value: field.value,
+        disabled: field.disabled,
+        required: field.required,
+        style: field.style
+      };
+      var additionalProps = {
+        CustomInput: {
+          onChange: handleChange,
+          inputStyle: field.inputStyle,
+          className: field.className
+        },
+        CustomNumberInput: {
+          onChange: handleChange,
+          showHelp: field.showHelp,
+          helpText: field.helpText
+        },
+        CustomDatePicker: {
+          onChange: onChangeTime,
+          tooltip: field.tooltip
+        },
+        YearDatePicker: {
+          onChange: onChangeYear,
+          currentMaxYear: field.currentMaxYear
+        },
+        MultipleDropdown: {
+          onChange: handleChange,
+          options: field.options
+        },
+        CustomSearch: {
+          onChange: handleSearchChange,
+          handleResultSelect: handleResultSelect,
+          resultRenderer: resultRenderer,
+          isLoading: field.isLoading,
+          options: field.options
+        },
+        CustomDropdown: {
+          field: field,
+          reRenderDropdown: _this.reRenderDropdown
+        },
+        CustomTextArea: {
+          onChange: handleChange,
+          height: field.height
+        },
+        CustomCheckbox: {
+          onChange: handleCheckboxChange,
+          checked: field.checked,
+          showHelp: field.showHelp,
+          helpText: field.helpText
+        },
+        CustomRadioButton: {
+          onChange: handleRadioChange,
+          checked: field.checked,
+          showHelp: field.showHelp,
+          helpText: field.helpText
+        },
+        MultipleCheckbox: {
+          onChange: handleMultipleCheckboxChange,
+          options: field.options,
+          divStyle: field.divStyle,
+          labelStyle: field.labelStyle,
+          checkboxDivStyle: field.checkboxDivStyle
+        },
+        MultipleRadioButton: {
+          onChange: handleMultipleRadioChange,
+          options: field.options,
+          divStyle: field.divStyle,
+          labelStyle: field.labelStyle,
+          radioButtonDivStyle: field.radioButtonDivStyle,
+          component: field.component
+        },
+        CustomLabel: {}
+      };
+      var Component = componentMap[field.type] || _CustomInput["default"];
+      return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, commonProps, additionalProps[Component.name] || {}));
+    });
+    _this.state = {
+      operations: [{
+        value: "<",
+        key: 1,
+        text: "<"
+      }, {
+        value: ">",
+        key: 2,
+        text: ">"
+      }, {
+        value: "=",
+        key: 3,
+        text: "="
+      }],
+      list: [{
+        name: "",
+        value: "",
+        options: []
+      }],
+      sortedFields: []
+    };
+    return _this;
+  }
+  _inherits(GenericForm, _React$Component);
+  return _createClass(GenericForm, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var fields = this.props.fields;
+      this.sortFields(fields);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+      var fields = this.props.fields;
+      if (!(0, _shallowequal["default"])(fields, prevProps.fields)) {
+        fields.forEach(function (element) {
+          if (element.type === 'list') {
+            _this2.reRenderDropdown(element, true);
+          }
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", null, this.renderContent());
+    }
+  }]);
+}(_react["default"].Component);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/genericform",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "a generic form with various types of fields",
   "main": "build/index.js",
   "scripts": {
@@ -17,13 +17,15 @@
   "author": "Bernardo Lagos",
   "license": "ISC",
   "dependencies": {
+    "bootstrap": "^5.3.3",
+    "moment": "^2.22.2",
+    "prop-types": "^15.6.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "semantic-ui-react": "^2.1.5",
     "react-bootstrap": "^2.10.2",
+    "react-datetime": "^3.2.0",
+    "react-dom": "^18.2.0",
     "semantic-ui-css": "^2.5.0",
-    "bootstrap": "^5.3.3",
-    "prop-types": "^15.6.1"
+    "semantic-ui-react": "^2.1.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",
@@ -32,12 +34,14 @@
     "@babel/preset-react": "^7.26.3"
   },
   "peerDependencies": {
+    "bootstrap": "^5.3.3",
+    "moment": "^2.22.2",
+    "prop-types": "^15.6.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "semantic-ui-react": "^2.1.5",
     "react-bootstrap": "^2.10.2",
+    "react-datetime": "^3.2.0",
+    "react-dom": "^18.2.0",
     "semantic-ui-css": "^2.5.0",
-    "bootstrap": "^5.3.3",
-    "prop-types": "^15.6.1"
+    "semantic-ui-react": "^2.1.5"
   }
 }