@insticc/genericform 2.0.2 → 2.0.4

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.
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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
  };
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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
@@ -74,8 +74,8 @@
74
74
  .ufg-title {
75
75
  font-size: 24px;
76
76
  font-weight: 700;
77
- color: var(--ufg-text);
78
77
  margin-bottom: 24px;
78
+ color: var(--ufg-text);
79
79
  display: flex;
80
80
  align-items: center;
81
81
  gap: 12px;
@@ -93,6 +93,12 @@
93
93
  }
94
94
 
95
95
  .ufg-form {
96
+ display: flex;
97
+ flex-direction: column;
98
+ gap: 20px;
99
+ }
100
+
101
+ .ufg-fields {
96
102
  display: flex;
97
103
  flex-direction: column;
98
104
  gap: 10px;
@@ -224,7 +230,7 @@
224
230
  .ufg-radio-group {
225
231
  display: flex;
226
232
  flex-direction: column;
227
- gap: 10px;
233
+ gap: 0.5em;
228
234
  }
229
235
 
230
236
  .ufg-radio-group-inline {
@@ -238,7 +244,7 @@
238
244
  .ufg-radio-item {
239
245
  display: flex;
240
246
  align-items: center;
241
- gap: 8px;
247
+ gap: 1em;
242
248
  margin: 0;
243
249
  }
244
250
 
@@ -308,11 +314,7 @@
308
314
  -------------------------------------------------------------------------- */
309
315
  .ufg-actions {
310
316
  display: flex;
311
- flex-direction: row;
312
- align-items: center;
313
- justify-content: center;
314
- gap: 2rem;
315
- margin-top: 24px;
317
+ gap: 1em;
316
318
  flex-wrap: wrap;
317
319
  }
318
320
 
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,18 @@ 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
+ fieldsStyle = _ref.fieldsStyle,
117
+ actionsDivStyle = _ref.actionsDivStyle,
118
+ actionsStyle = _ref.actionsStyle,
115
119
  _ref$splitForm = _ref.splitForm,
116
120
  splitForm = _ref$splitForm === void 0 ? false : _ref$splitForm,
117
121
  splitField = _ref.splitField,
@@ -128,9 +132,13 @@ var GenericForm = function GenericForm(_ref) {
128
132
  _ref$showCancel = _ref.showCancel,
129
133
  showCancel = _ref$showCancel === void 0 ? true : _ref$showCancel,
130
134
  _ref$submitText = _ref.submitText,
131
- submitText = _ref$submitText === void 0 ? 'Save' : _ref$submitText,
135
+ submitText = _ref$submitText === void 0 ? 'Submit' : _ref$submitText,
132
136
  _ref$cancelText = _ref.cancelText,
133
137
  cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
138
+ _ref$submitButton = _ref.submitButton,
139
+ submitButton = _ref$submitButton === void 0 ? {} : _ref$submitButton,
140
+ _ref$cancelButton = _ref.cancelButton,
141
+ cancelButton = _ref$cancelButton === void 0 ? {} : _ref$cancelButton,
134
142
  _ref$validateOnChange = _ref.validateOnChange,
135
143
  validateOnChange = _ref$validateOnChange === void 0 ? true : _ref$validateOnChange,
136
144
  _ref$validateOnSubmit = _ref.validateOnSubmit,
@@ -577,6 +585,7 @@ var GenericForm = function GenericForm(_ref) {
577
585
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomCheckboxGroup["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
578
586
  checked: value !== null && value !== void 0 ? value : [],
579
587
  options: field.options,
588
+ grouped: field.grouped,
580
589
  onChange: fieldHandler(field),
581
590
  onOptionChange: field.onOptionChange
582
591
  }), field.name);
@@ -652,8 +661,8 @@ var GenericForm = function GenericForm(_ref) {
652
661
  };
653
662
  var renderGroupSection = function renderGroupSection(g, fieldList) {
654
663
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
655
- className: "ufg-form",
656
- style: formStyle,
664
+ className: "ufg-fields",
665
+ style: fieldsStyle,
657
666
  children: [g !== 'ungrouped' && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
658
667
  children: g
659
668
  }), renderFields(fieldList)]
@@ -722,25 +731,35 @@ var GenericForm = function GenericForm(_ref) {
722
731
  var hasErrors = Object.values(errors).some(Boolean);
723
732
  var actionsBar = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
724
733
  className: "ufg-actions",
734
+ style: actionsDivStyle,
725
735
  children: [customActions.map(function (action, idx) {
726
736
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
727
737
  type: "button",
728
738
  className: "ufg-button ".concat(action.className || 'ufg-button-secondary'),
729
739
  onClick: action.onClick,
730
740
  disabled: !!action.disabled,
731
- style: action.style,
741
+ style: _objectSpread(_objectSpread({}, actionsStyle), action.style),
732
742
  children: [action.icon, action.label]
733
743
  }, idx);
734
744
  }), showSubmit && haveSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
735
745
  type: "submit",
736
- className: "ufg-button ufg-button-primary",
746
+ className: "ufg-button ".concat(submitButton.className || 'ufg-button-primary'),
737
747
  disabled: isSubmitting || hasErrors,
738
- children: isSubmitting ? 'Saving…' : submitText
739
- }), onCancel && showCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
748
+ style: _objectSpread(_objectSpread({}, actionsStyle), submitButton.style),
749
+ children: isSubmitting ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
750
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Icon, {
751
+ name: "spinner",
752
+ loading: true
753
+ }), " ", submitText]
754
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
755
+ children: [(_submitButton$icon = submitButton.icon) !== null && _submitButton$icon !== void 0 ? _submitButton$icon : '', submitText]
756
+ })
757
+ }), onCancel && showCancel && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
740
758
  type: "button",
741
- className: "ufg-button ufg-button-secondary",
759
+ className: "ufg-button ".concat(cancelButton.className || 'ufg-button-secondary'),
742
760
  onClick: onCancel,
743
- children: cancelText
761
+ style: _objectSpread(_objectSpread({}, actionsStyle), cancelButton.style),
762
+ children: [(_cancelButton$icon = cancelButton.icon) !== null && _cancelButton$icon !== void 0 ? _cancelButton$icon : '', cancelText]
744
763
  })]
745
764
  });
746
765
 
@@ -763,9 +782,8 @@ var GenericForm = function GenericForm(_ref) {
763
782
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Modal.Header, {
764
783
  closeButton: true,
765
784
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Modal.Title, {
766
- children: [titleIcon, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
767
- children: title
768
- })]
785
+ style: titleStyle,
786
+ children: [titleIcon, " ", title, " "]
769
787
  })
770
788
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Modal.Body, {
771
789
  children: formJSX
@@ -777,9 +795,8 @@ var GenericForm = function GenericForm(_ref) {
777
795
  style: containerStyle,
778
796
  children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
779
797
  className: "ufg-title",
780
- children: [titleIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
781
- children: title
782
- })]
798
+ style: titleStyle,
799
+ children: [titleIcon, " ", title]
783
800
  }), formJSX]
784
801
  });
785
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.4",
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": {