@insticc/genericform 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/build/FormFields/CustomCheckbox.js +1 -1
  2. package/build/FormFields/CustomCheckboxGroup.js +51 -14
  3. package/build/FormFields/CustomComponent.js +1 -1
  4. package/build/FormFields/CustomDatePicker.js +1 -1
  5. package/build/FormFields/CustomDropdown.js +2 -2
  6. package/build/FormFields/CustomInput.js +1 -1
  7. package/build/FormFields/CustomJson.js +1 -1
  8. package/build/FormFields/CustomLabel.js +1 -1
  9. package/build/FormFields/CustomMultiDropdown.js +1 -1
  10. package/build/FormFields/CustomNumberInput.js +1 -1
  11. package/build/FormFields/CustomRadioGroup.js +1 -1
  12. package/build/FormFields/CustomSearch.js +1 -1
  13. package/build/FormFields/CustomTextArea.js +1 -1
  14. package/build/FormFields/CustomToggle.js +1 -1
  15. package/build/index.css +3 -8
  16. package/build/index.js +31 -11
  17. package/package.json +1 -1
package/build/FormFields/CustomCheckbox.js CHANGED
@@ -66,7 +66,7 @@ var CustomCheckbox = function CustomCheckbox(_ref) {
66
66
  CustomCheckbox.propTypes = {
67
67
  onChange: _propTypes["default"].func.isRequired,
68
68
  name: _propTypes["default"].string.isRequired,
69
- displayName: _propTypes["default"].string,
69
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
70
70
  checked: _propTypes["default"].bool,
71
71
  disabled: _propTypes["default"].bool,
72
72
  required: _propTypes["default"].bool,
package/build/FormFields/CustomCheckboxGroup.js CHANGED
@@ -26,6 +26,8 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
26
26
  options = _ref$options === void 0 ? [] : _ref$options,
27
27
  _ref$required = _ref.required,
28
28
  required = _ref$required === void 0 ? false : _ref$required,
29
+ _ref$grouped = _ref.grouped,
30
+ grouped = _ref$grouped === void 0 ? false : _ref$grouped,
29
31
  error = _ref.error,
30
32
  _ref$tooltip = _ref.tooltip,
31
33
  tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
@@ -53,22 +55,56 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
53
55
  children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
54
56
  className: "ufg-checkbox-group",
55
57
  children: options.map(function (opt, idx) {
58
+ var _opt$options;
56
59
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
57
- className: "ufg-checkbox-item",
58
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
59
- id: "".concat(name, "-").concat(idx),
60
- type: "checkbox",
61
- checked: checked.includes(opt.name || opt.value),
62
- disabled: !!opt.disabled,
63
- style: inputStyle,
64
- onChange: function onChange(e) {
65
- return handleChange(opt.name || opt.value, e.target.checked);
60
+ children: [idx > 0 && grouped && /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
61
+ style: {
62
+ margin: '0.5rem 0 0.75rem',
63
+ color: '#888888'
66
64
  }
67
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
68
- htmlFor: "".concat(name, "-").concat(idx),
69
- children: opt.label || opt.text
65
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
66
+ className: "ufg-checkbox-item",
67
+ style: inputStyle,
68
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
69
+ id: "".concat(name, "-").concat(idx),
70
+ type: "checkbox",
71
+ checked: checked.includes(opt.name || opt.value),
72
+ disabled: !!opt.disabled,
73
+ style: opt.inputStyle,
74
+ onChange: function onChange(e) {
75
+ return handleChange(opt.name || opt.value, e.target.checked);
76
+ }
77
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
78
+ htmlFor: "".concat(name, "-").concat(idx),
79
+ style: opt.labelStyle,
80
+ children: opt.label || opt.text
81
+ })]
82
+ }, opt.name || opt.value), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
83
+ style: opt.options ? {
84
+ paddingLeft: '1.25rem'
85
+ } : undefined,
86
+ children: (_opt$options = opt.options) === null || _opt$options === void 0 ? void 0 : _opt$options.map(function (subopt, subidx) {
87
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
88
+ className: "ufg-checkbox-item",
89
+ style: inputStyle,
90
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
91
+ id: "".concat(name, "-").concat(idx, "-").concat(subidx),
92
+ type: "checkbox",
93
+ checked: checked.includes(subopt.name || subopt.value),
94
+ disabled: !!subopt.disabled,
95
+ style: subopt.inputStyle,
96
+ onChange: function onChange(e) {
97
+ return handleChange(subopt.name || subopt.value, e.target.checked);
98
+ }
99
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
100
+ htmlFor: "".concat(name, "-").concat(idx, "-").concat(subidx),
101
+ style: subopt.labelStyle,
102
+ children: subopt.label || subopt.text
103
+ })]
104
+ }, subopt.name || subopt.value);
105
+ })
70
106
  })]
71
- }, opt.name || opt.value);
107
+ }, "".concat(name, "-").concat(idx));
72
108
  })
73
109
  }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
74
110
  });
@@ -77,9 +113,10 @@ CustomCheckboxGroup.propTypes = {
77
113
  onChange: _propTypes["default"].func.isRequired,
78
114
  onOptionChange: _propTypes["default"].func,
79
115
  name: _propTypes["default"].string.isRequired,
80
- displayName: _propTypes["default"].string,
116
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
81
117
  options: _propTypes["default"].array.isRequired,
82
118
  required: _propTypes["default"].bool,
119
+ grouped: _propTypes["default"].bool,
83
120
  error: _propTypes["default"].string,
84
121
  tooltip: _propTypes["default"].string,
85
122
  mainDivStyle: _propTypes["default"].object,
package/build/FormFields/CustomComponent.js CHANGED
@@ -33,7 +33,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
33
33
  };
34
34
  CustomComponent.propTypes = {
35
35
  name: _propTypes["default"].string,
36
- displayName: _propTypes["default"].string,
36
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
37
37
  component: _propTypes["default"].node,
38
38
  required: _propTypes["default"].bool,
39
39
  error: _propTypes["default"].string,
package/build/FormFields/CustomDatePicker.js CHANGED
@@ -86,7 +86,7 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
86
86
  CustomDatePicker.propTypes = {
87
87
  onChange: _propTypes["default"].func.isRequired,
88
88
  name: _propTypes["default"].string.isRequired,
89
- displayName: _propTypes["default"].string,
89
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
90
90
  value: _propTypes["default"].any,
91
91
  disabled: _propTypes["default"].bool,
92
92
  required: _propTypes["default"].bool,
package/build/FormFields/CustomDropdown.js CHANGED
@@ -97,8 +97,8 @@ var CustomDropdown = function CustomDropdown(_ref) {
97
97
  CustomDropdown.propTypes = {
98
98
  onChange: _propTypes["default"].func.isRequired,
99
99
  name: _propTypes["default"].string.isRequired,
100
- displayName: _propTypes["default"].string,
101
- value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),
100
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
101
+ value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array]),
102
102
  options: _propTypes["default"].array,
103
103
  placeholder: _propTypes["default"].string,
104
104
  disabled: _propTypes["default"].bool,
package/build/FormFields/CustomInput.js CHANGED
@@ -68,7 +68,7 @@ var CustomInput = function CustomInput(_ref) {
68
68
  CustomInput.propTypes = _defineProperty(_defineProperty({
69
69
  onChange: _propTypes["default"].func.isRequired,
70
70
  name: _propTypes["default"].string.isRequired,
71
- displayName: _propTypes["default"].string,
71
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
72
72
  value: _propTypes["default"].string,
73
73
  type: _propTypes["default"].string,
74
74
  disabled: _propTypes["default"].bool,
package/build/FormFields/CustomJson.js CHANGED
@@ -130,7 +130,7 @@ CustomJson.propTypes = {
130
130
  onChange: _propTypes["default"].func.isRequired,
131
131
  onValidate: _propTypes["default"].func,
132
132
  name: _propTypes["default"].string.isRequired,
133
- displayName: _propTypes["default"].string,
133
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
134
134
  value: _propTypes["default"].any,
135
135
  disabled: _propTypes["default"].bool,
136
136
  required: _propTypes["default"].bool,
package/build/FormFields/CustomLabel.js CHANGED
@@ -27,7 +27,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
27
27
  };
28
28
  CustomLabel.propTypes = {
29
29
  name: _propTypes["default"].string.isRequired,
30
- displayName: _propTypes["default"].string,
30
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
31
31
  mainDivStyle: _propTypes["default"].object,
32
32
  labelStyle: _propTypes["default"].object
33
33
  };
package/build/FormFields/CustomMultiDropdown.js CHANGED
@@ -70,7 +70,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
70
70
  CustomMultiDropdown.propTypes = {
71
71
  onChange: _propTypes["default"].func.isRequired,
72
72
  name: _propTypes["default"].string.isRequired,
73
- displayName: _propTypes["default"].string,
73
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
74
74
  value: _propTypes["default"].array,
75
75
  options: _propTypes["default"].array.isRequired,
76
76
  placeholder: _propTypes["default"].string,
package/build/FormFields/CustomNumberInput.js CHANGED
@@ -67,7 +67,7 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
67
67
  CustomNumberInput.propTypes = {
68
68
  onChange: _propTypes["default"].func.isRequired,
69
69
  name: _propTypes["default"].string.isRequired,
70
- displayName: _propTypes["default"].string,
70
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
71
71
  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
72
72
  disabled: _propTypes["default"].bool,
73
73
  required: _propTypes["default"].bool,
package/build/FormFields/CustomRadioGroup.js CHANGED
@@ -76,7 +76,7 @@ CustomRadioGroup.propTypes = {
76
76
  onOptionChange: _propTypes["default"].func,
77
77
  formData: _propTypes["default"].object,
78
78
  name: _propTypes["default"].string.isRequired,
79
- displayName: _propTypes["default"].string,
79
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
80
80
  value: _propTypes["default"].string,
81
81
  options: _propTypes["default"].array.isRequired,
82
82
  inline: _propTypes["default"].bool,
package/build/FormFields/CustomSearch.js CHANGED
@@ -71,7 +71,7 @@ CustomSearch.propTypes = {
71
71
  handleResultSelect: _propTypes["default"].func.isRequired,
72
72
  resultRenderer: _propTypes["default"].func,
73
73
  name: _propTypes["default"].string.isRequired,
74
- displayName: _propTypes["default"].string,
74
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
75
75
  value: _propTypes["default"].string,
76
76
  options: _propTypes["default"].array.isRequired,
77
77
  isLoading: _propTypes["default"].bool,
package/build/FormFields/CustomTextArea.js CHANGED
@@ -72,7 +72,7 @@ var CustomTextArea = function CustomTextArea(_ref) {
72
72
  CustomTextArea.propTypes = {
73
73
  onChange: _propTypes["default"].func.isRequired,
74
74
  name: _propTypes["default"].string.isRequired,
75
- displayName: _propTypes["default"].string,
75
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
76
76
  value: _propTypes["default"].string,
77
77
  disabled: _propTypes["default"].bool,
78
78
  required: _propTypes["default"].bool,
package/build/FormFields/CustomToggle.js CHANGED
@@ -59,7 +59,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
59
59
  CustomToggle.propTypes = {
60
60
  onChange: _propTypes["default"].func.isRequired,
61
61
  name: _propTypes["default"].string.isRequired,
62
- displayName: _propTypes["default"].string,
62
+ displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
63
63
  value: _propTypes["default"].bool,
64
64
  disabled: _propTypes["default"].bool,
65
65
  required: _propTypes["default"].bool,
package/build/index.css CHANGED
@@ -75,7 +75,6 @@
75
75
  font-size: 24px;
76
76
  font-weight: 700;
77
77
  color: var(--ufg-text);
78
- margin-bottom: 24px;
79
78
  display: flex;
80
79
  align-items: center;
81
80
  gap: 12px;
@@ -224,7 +223,7 @@
224
223
  .ufg-radio-group {
225
224
  display: flex;
226
225
  flex-direction: column;
227
- gap: 10px;
226
+ gap: 0.5em;
228
227
  }
229
228
 
230
229
  .ufg-radio-group-inline {
@@ -238,7 +237,7 @@
238
237
  .ufg-radio-item {
239
238
  display: flex;
240
239
  align-items: center;
241
- gap: 8px;
240
+ gap: 1em;
242
241
  margin: 0;
243
242
  }
244
243
 
@@ -308,11 +307,7 @@
308
307
  -------------------------------------------------------------------------- */
309
308
  .ufg-actions {
310
309
  display: flex;
311
- flex-direction: row;
312
- align-items: center;
313
- justify-content: center;
314
- gap: 2rem;
315
- margin-top: 24px;
310
+ gap: 1em;
316
311
  flex-wrap: wrap;
317
312
  }
318
313
 
package/build/index.js CHANGED
@@ -34,6 +34,7 @@ var _CustomSearch = _interopRequireDefault(require("./FormFields/CustomSearch"))
34
34
  var _CustomSeparator = _interopRequireDefault(require("./FormFields/CustomSeparator"));
35
35
  var _CustomTextArea = _interopRequireDefault(require("./FormFields/CustomTextArea"));
36
36
  var _CustomToggle = _interopRequireDefault(require("./FormFields/CustomToggle"));
37
+ var _semanticUiReact = require("semantic-ui-react");
37
38
  var _Demo = _interopRequireDefault(require("./Demo"));
38
39
  var _Demo2 = _interopRequireDefault(require("./Demo2"));
39
40
  require("./index.css");
@@ -103,15 +104,17 @@ var groupByInline = function groupByInline(fields) {
103
104
 
104
105
  // #region GenericForm Props
105
106
  var GenericForm = function GenericForm(_ref) {
106
- var _ref$externalData = _ref.externalData,
107
- externalData = _ref$externalData === void 0 ? {} : _ref$externalData,
108
- _ref$fields = _ref.fields,
107
+ var _submitButton$icon, _cancelButton$icon;
108
+ var _ref$fields = _ref.fields,
109
109
  fields = _ref$fields === void 0 ? [] : _ref$fields,
110
110
  title = _ref.title,
111
111
  titleIcon = _ref.titleIcon,
112
+ titleStyle = _ref.titleStyle,
112
113
  _ref$containerStyle = _ref.containerStyle,
113
114
  containerStyle = _ref$containerStyle === void 0 ? {} : _ref$containerStyle,
114
115
  formStyle = _ref.formStyle,
116
+ actionsDivStyle = _ref.actionsDivStyle,
117
+ actionsStyle = _ref.actionsStyle,
115
118
  _ref$splitForm = _ref.splitForm,
116
119
  splitForm = _ref$splitForm === void 0 ? false : _ref$splitForm,
117
120
  splitField = _ref.splitField,
@@ -128,9 +131,13 @@ var GenericForm = function GenericForm(_ref) {
128
131
  _ref$showCancel = _ref.showCancel,
129
132
  showCancel = _ref$showCancel === void 0 ? true : _ref$showCancel,
130
133
  _ref$submitText = _ref.submitText,
131
- submitText = _ref$submitText === void 0 ? 'Save' : _ref$submitText,
134
+ submitText = _ref$submitText === void 0 ? 'Submit' : _ref$submitText,
132
135
  _ref$cancelText = _ref.cancelText,
133
136
  cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
137
+ _ref$submitButton = _ref.submitButton,
138
+ submitButton = _ref$submitButton === void 0 ? {} : _ref$submitButton,
139
+ _ref$cancelButton = _ref.cancelButton,
140
+ cancelButton = _ref$cancelButton === void 0 ? {} : _ref$cancelButton,
134
141
  _ref$validateOnChange = _ref.validateOnChange,
135
142
  validateOnChange = _ref$validateOnChange === void 0 ? true : _ref$validateOnChange,
136
143
  _ref$validateOnSubmit = _ref.validateOnSubmit,
@@ -577,6 +584,7 @@ var GenericForm = function GenericForm(_ref) {
577
584
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomCheckboxGroup["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
578
585
  checked: value !== null && value !== void 0 ? value : [],
579
586
  options: field.options,
587
+ grouped: field.grouped,
580
588
  onChange: fieldHandler(field),
581
589
  onOptionChange: field.onOptionChange
582
590
  }), field.name);
@@ -722,25 +730,35 @@ var GenericForm = function GenericForm(_ref) {
722
730
  var hasErrors = Object.values(errors).some(Boolean);
723
731
  var actionsBar = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
724
732
  className: "ufg-actions",
733
+ style: actionsDivStyle,
725
734
  children: [customActions.map(function (action, idx) {
726
735
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
727
736
  type: "button",
728
737
  className: "ufg-button ".concat(action.className || 'ufg-button-secondary'),
729
738
  onClick: action.onClick,
730
739
  disabled: !!action.disabled,
731
- style: action.style,
740
+ style: _objectSpread(_objectSpread({}, actionsStyle), action.style),
732
741
  children: [action.icon, action.label]
733
742
  }, idx);
734
743
  }), showSubmit && haveSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
735
744
  type: "submit",
736
- className: "ufg-button ufg-button-primary",
745
+ className: "ufg-button ".concat(submitButton.className || 'ufg-button-primary'),
737
746
  disabled: isSubmitting || hasErrors,
738
- children: isSubmitting ? 'Saving…' : submitText
739
- }), onCancel && showCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
747
+ style: _objectSpread(_objectSpread({}, actionsStyle), submitButton.style),
748
+ children: isSubmitting ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
749
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Icon, {
750
+ name: "spinner",
751
+ loading: true
752
+ }), " ", submitText]
753
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
754
+ children: [(_submitButton$icon = submitButton.icon) !== null && _submitButton$icon !== void 0 ? _submitButton$icon : '', submitText]
755
+ })
756
+ }), onCancel && showCancel && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
740
757
  type: "button",
741
- className: "ufg-button ufg-button-secondary",
758
+ className: "ufg-button ".concat(cancelButton.className || 'ufg-button-secondary'),
742
759
  onClick: onCancel,
743
- children: cancelText
760
+ style: _objectSpread(_objectSpread({}, actionsStyle), cancelButton.style),
761
+ children: [(_cancelButton$icon = cancelButton.icon) !== null && _cancelButton$icon !== void 0 ? _cancelButton$icon : '', cancelText]
744
762
  })]
745
763
  });
746
764
 
@@ -748,7 +766,7 @@ var GenericForm = function GenericForm(_ref) {
748
766
  // #region Form JSX
749
767
  var formJSX = /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
750
768
  className: "ufg-form",
751
- style: formStyle || {
769
+ style: {
752
770
  margin: 'auto'
753
771
  },
754
772
  onSubmit: onFormSubmit,
@@ -763,6 +781,7 @@ var GenericForm = function GenericForm(_ref) {
763
781
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Modal.Header, {
764
782
  closeButton: true,
765
783
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Modal.Title, {
784
+ style: titleStyle,
766
785
  children: [titleIcon, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
767
786
  children: title
768
787
  })]
@@ -777,6 +796,7 @@ var GenericForm = function GenericForm(_ref) {
777
796
  style: containerStyle,
778
797
  children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
779
798
  className: "ufg-title",
799
+ style: titleStyle,
780
800
  children: [titleIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
781
801
  children: title
782
802
  })]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insticc/genericform",
3
- "version": "2.0.2",
3
+ "version": "2.0.3",
4
4
  "description": "A generic form with a comprehensive set of field types, validation, and external state management",
5
5
  "main": "build/index.js",
6
6
  "scripts": {