@insticc/genericform 2.0.7 → 2.0.8

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.
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ 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); }
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
@@ -11,36 +12,103 @@ var _jsxRuntime = require("react/jsx-runtime");
11
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
12
13
  function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
13
14
  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."); }
14
- 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; } }
15
15
  function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
16
16
  function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
17
+ 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; }
18
+ 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; }
19
+ 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; }
20
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
21
+ 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); }
22
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
23
+ 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."); }
24
+ 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; } }
17
25
  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; }
18
- var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
19
- var onChange = _ref.onChange,
20
- onOptionChange = _ref.onOptionChange,
21
- name = _ref.name,
22
- _ref$checked = _ref.checked,
23
- checked = _ref$checked === void 0 ? [] : _ref$checked,
24
- displayName = _ref.displayName,
25
- _ref$options = _ref.options,
26
- options = _ref$options === void 0 ? [] : _ref$options,
27
- _ref$required = _ref.required,
28
- required = _ref$required === void 0 ? false : _ref$required,
29
- _ref$grouped = _ref.grouped,
30
- grouped = _ref$grouped === void 0 ? false : _ref$grouped,
31
- error = _ref.error,
32
- _ref$tooltip = _ref.tooltip,
33
- tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
34
- _ref$mainDivStyle = _ref.mainDivStyle,
35
- mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
36
- _ref$labelStyle = _ref.labelStyle,
37
- labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
38
- _ref$spanStyle = _ref.spanStyle,
39
- spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
40
- _ref$inputStyle = _ref.inputStyle,
41
- inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
42
- _ref$tooltipStyle = _ref.tooltipStyle,
43
- tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
26
+ 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; } }
27
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
28
+ var IndeterminateCheckbox = function IndeterminateCheckbox(_ref) {
29
+ var id = _ref.id,
30
+ checked = _ref.checked,
31
+ indeterminate = _ref.indeterminate,
32
+ disabled = _ref.disabled,
33
+ style = _ref.style,
34
+ onChange = _ref.onChange;
35
+ var ref = (0, _react.useRef)(null);
36
+ (0, _react.useEffect)(function () {
37
+ if (ref.current) ref.current.indeterminate = indeterminate;
38
+ }, [indeterminate]);
39
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
40
+ ref: ref,
41
+ id: id,
42
+ type: "checkbox",
43
+ checked: checked,
44
+ disabled: disabled,
45
+ style: style,
46
+ onChange: onChange
47
+ });
48
+ };
49
+ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
50
+ var onChange = _ref2.onChange,
51
+ onOptionChange = _ref2.onOptionChange,
52
+ name = _ref2.name,
53
+ _ref2$checked = _ref2.checked,
54
+ checked = _ref2$checked === void 0 ? [] : _ref2$checked,
55
+ displayName = _ref2.displayName,
56
+ _ref2$options = _ref2.options,
57
+ options = _ref2$options === void 0 ? [] : _ref2$options,
58
+ _ref2$required = _ref2.required,
59
+ required = _ref2$required === void 0 ? false : _ref2$required,
60
+ _ref2$grouped = _ref2.grouped,
61
+ grouped = _ref2$grouped === void 0 ? false : _ref2$grouped,
62
+ _ref2$collapsible = _ref2.collapsible,
63
+ collapsible = _ref2$collapsible === void 0 ? false : _ref2$collapsible,
64
+ _ref2$defaultCollapse = _ref2.defaultCollapsed,
65
+ defaultCollapsed = _ref2$defaultCollapse === void 0 ? true : _ref2$defaultCollapse,
66
+ _ref2$enableParent = _ref2.enableParent,
67
+ enableParent = _ref2$enableParent === void 0 ? false : _ref2$enableParent,
68
+ error = _ref2.error,
69
+ _ref2$tooltip = _ref2.tooltip,
70
+ tooltip = _ref2$tooltip === void 0 ? "" : _ref2$tooltip,
71
+ _ref2$mainDivStyle = _ref2.mainDivStyle,
72
+ mainDivStyle = _ref2$mainDivStyle === void 0 ? {} : _ref2$mainDivStyle,
73
+ _ref2$labelStyle = _ref2.labelStyle,
74
+ labelStyle = _ref2$labelStyle === void 0 ? {} : _ref2$labelStyle,
75
+ _ref2$spanStyle = _ref2.spanStyle,
76
+ spanStyle = _ref2$spanStyle === void 0 ? {} : _ref2$spanStyle,
77
+ _ref2$groupInputStyle = _ref2.groupInputStyle,
78
+ groupInputStyle = _ref2$groupInputStyle === void 0 ? {} : _ref2$groupInputStyle,
79
+ _ref2$inputStyle = _ref2.inputStyle,
80
+ inputStyle = _ref2$inputStyle === void 0 ? {} : _ref2$inputStyle,
81
+ _ref2$tooltipStyle = _ref2.tooltipStyle,
82
+ tooltipStyle = _ref2$tooltipStyle === void 0 ? {} : _ref2$tooltipStyle;
83
+ var _useState = (0, _react.useState)({}),
84
+ _useState2 = _slicedToArray(_useState, 2),
85
+ collapsed = _useState2[0],
86
+ setCollapsed = _useState2[1];
87
+ (0, _react.useEffect)(function () {
88
+ if (!collapsible || !defaultCollapsed || !options.length) return;
89
+ setCollapsed(options.reduce(function (acc, _, idx) {
90
+ return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, idx, true));
91
+ }, {}));
92
+ }, [options.length]);
93
+ var getChildValues = (0, _react.useCallback)(function (opt) {
94
+ var _opt$options$map, _opt$options;
95
+ return (_opt$options$map = (_opt$options = opt.options) === null || _opt$options === void 0 ? void 0 : _opt$options.map(function (s) {
96
+ return s.name || s.value;
97
+ })) !== null && _opt$options$map !== void 0 ? _opt$options$map : [];
98
+ }, []);
99
+ var isAllChecked = (0, _react.useCallback)(function (opt) {
100
+ var parentVal = opt.name || opt.value;
101
+ var children = getChildValues(opt);
102
+ return children.length > 0 && checked.includes(parentVal) && children.every(function (v) {
103
+ return checked.includes(v);
104
+ });
105
+ }, [checked, getChildValues]);
106
+ var isSomeChecked = (0, _react.useCallback)(function (opt) {
107
+ var children = getChildValues(opt);
108
+ return children.some(function (v) {
109
+ return checked.includes(v);
110
+ }) && !isAllChecked(opt);
111
+ }, [checked, getChildValues, isAllChecked]);
44
112
  var handleChange = (0, _react.useCallback)(function (value, state) {
45
113
  var data = state ? checked.includes(value) ? checked : [].concat(_toConsumableArray(checked), [value]) : checked.filter(function (v) {
46
114
  return v !== value;
@@ -48,14 +116,32 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
48
116
  onChange === null || onChange === void 0 || onChange(name, data);
49
117
  onOptionChange === null || onOptionChange === void 0 || onOptionChange(data);
50
118
  }, [onChange, onOptionChange, name, checked]);
119
+ var handleParentChange = (0, _react.useCallback)(function (opt, state) {
120
+ var parentVal = opt.name || opt.value;
121
+ var children = getChildValues(opt);
122
+ var data = state ? _toConsumableArray(new Set([].concat(_toConsumableArray(checked), [parentVal]))) : checked.filter(function (v) {
123
+ return v !== parentVal && !children.includes(v);
124
+ });
125
+ onChange === null || onChange === void 0 || onChange(name, data);
126
+ onOptionChange === null || onOptionChange === void 0 || onOptionChange(data);
127
+ }, [onChange, onOptionChange, name, checked, getChildValues]);
128
+ var toggleCollapse = (0, _react.useCallback)(function (idx) {
129
+ setCollapsed(function (prev) {
130
+ return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, idx, !prev[idx]));
131
+ });
132
+ }, []);
51
133
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
52
134
  className: "ufg-field-group",
53
135
  id: name,
54
136
  style: mainDivStyle,
55
137
  children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
56
138
  className: "ufg-checkbox-group",
139
+ style: groupInputStyle,
57
140
  children: options.map(function (opt, idx) {
58
- var _opt$options;
141
+ var _opt$options2;
142
+ var hasChildren = !!((_opt$options2 = opt.options) !== null && _opt$options2 !== void 0 && _opt$options2.length);
143
+ var isCollapsed = collapsible && !!collapsed[idx];
144
+ var parentVal = opt.name || opt.value;
59
145
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
60
146
  children: [idx > 0 && grouped && /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
61
147
  style: {
@@ -63,27 +149,58 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
63
149
  color: '#888888'
64
150
  }
65
151
  }), /*#__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
152
+ style: {
153
+ display: 'flex',
154
+ alignItems: 'center',
155
+ gap: 4
156
+ },
157
+ children: [collapsible && hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
158
+ type: "button",
159
+ onClick: function onClick() {
160
+ return toggleCollapse(idx);
161
+ },
162
+ style: {
163
+ background: 'none',
164
+ border: 'none',
165
+ cursor: 'pointer',
166
+ padding: '0 2px',
167
+ lineHeight: 1
168
+ },
169
+ "aria-label": isCollapsed ? 'Expand' : 'Collapse',
170
+ children: isCollapsed ? '▶' : '▼'
171
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
172
+ className: "ufg-checkbox-item",
173
+ style: inputStyle,
174
+ children: [enableParent && hasChildren ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IndeterminateCheckbox, {
175
+ id: "".concat(name, "-").concat(idx),
176
+ checked: checked.includes(parentVal),
177
+ indeterminate: isSomeChecked(opt),
178
+ disabled: !!opt.disabled,
179
+ style: opt.inputStyle,
180
+ onChange: function onChange(e) {
181
+ return handleParentChange(opt, e.target.checked);
182
+ }
183
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
184
+ id: "".concat(name, "-").concat(idx),
185
+ type: "checkbox",
186
+ checked: checked.includes(parentVal),
187
+ disabled: !!opt.disabled,
188
+ style: opt.inputStyle,
189
+ onChange: function onChange(e) {
190
+ return handleChange(parentVal, e.target.checked);
191
+ }
192
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
193
+ htmlFor: "".concat(name, "-").concat(idx),
194
+ style: opt.labelStyle,
195
+ children: opt.label || opt.text
196
+ })]
81
197
  })]
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) {
198
+ }), hasChildren && !isCollapsed && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
199
+ className: "ufg-checkbox-group",
200
+ style: {
201
+ paddingLeft: collapsible ? '2rem' : '1.25rem'
202
+ },
203
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), opt.options.map(function (subopt, subidx) {
87
204
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
88
205
  className: "ufg-checkbox-item",
89
206
  style: inputStyle,
@@ -102,7 +219,7 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
102
219
  children: subopt.label || subopt.text
103
220
  })]
104
221
  }, subopt.name || subopt.value);
105
- })
222
+ })]
106
223
  })]
107
224
  }, "".concat(name, "-").concat(idx));
108
225
  })
@@ -117,6 +234,9 @@ CustomCheckboxGroup.propTypes = {
117
234
  options: _propTypes["default"].array.isRequired,
118
235
  required: _propTypes["default"].bool,
119
236
  grouped: _propTypes["default"].bool,
237
+ collapsible: _propTypes["default"].bool,
238
+ defaultCollapsed: _propTypes["default"].bool,
239
+ enableParent: _propTypes["default"].bool,
120
240
  error: _propTypes["default"].string,
121
241
  tooltip: _propTypes["default"].string,
122
242
  mainDivStyle: _propTypes["default"].object,
@@ -36,6 +36,7 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
36
36
  dateFormat = _ref$dateFormat === void 0 ? "DD/MM/YYYY" : _ref$dateFormat,
37
37
  _ref$timeFormat = _ref.timeFormat,
38
38
  timeFormat = _ref$timeFormat === void 0 ? false : _ref$timeFormat,
39
+ isValidDate = _ref.isValidDate,
39
40
  error = _ref.error,
40
41
  _ref$tooltip = _ref.tooltip,
41
42
  tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
@@ -69,6 +70,7 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
69
70
  disabled: disabled,
70
71
  required: required,
71
72
  style: inputStyle,
73
+ isValidDate: isValidDate,
72
74
  renderInput: function renderInput(props, openCalendar) {
73
75
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
74
76
  readOnly: true
@@ -93,6 +95,7 @@ CustomDatePicker.propTypes = {
93
95
  placeholder: _propTypes["default"].string,
94
96
  dateFormat: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),
95
97
  timeFormat: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),
98
+ isValidDate: _propTypes["default"].func,
96
99
  error: _propTypes["default"].string,
97
100
  tooltip: _propTypes["default"].string,
98
101
  showHelp: _propTypes["default"].bool,
package/build/index.js CHANGED
@@ -250,7 +250,7 @@ var GenericForm = function GenericForm(_ref) {
250
250
  if (field.maxLength && value && value.length > field.maxLength) errs.push(field.errorMessage || "Maximum ".concat(field.maxLength, " characters allowed"));
251
251
  if (field.min !== undefined && value !== '' && Number(value) < field.min) errs.push(field.errorMessage || "Minimum value is ".concat(field.min));
252
252
  if (field.max !== undefined && value !== '' && Number(value) > field.max) errs.push(field.errorMessage || "Maximum value is ".concat(field.max));
253
- if (typeof field.validate === 'function') {
253
+ if (!['date', 'datetime', 'year'].includes(field.type) && typeof field.validate === 'function') {
254
254
  var custom = field.validate(value, currentFormData || internalFormData);
255
255
  if (custom) errs.push(custom);
256
256
  }
@@ -524,6 +524,7 @@ var GenericForm = function GenericForm(_ref) {
524
524
  value: value,
525
525
  placeholder: field.placeholder,
526
526
  onChange: dateFieldHandler(field),
527
+ isValidDate: field.validate,
527
528
  dateFormat: field.type === 'time' ? false : field.type === 'year' ? 'YYYY' : 'DD/MM/YYYY',
528
529
  timeFormat: field.type === 'datetime' || field.type === 'time' ? 'HH:mm' : false
529
530
  }), field.name);
@@ -588,10 +589,14 @@ var GenericForm = function GenericForm(_ref) {
588
589
  case 'checkboxGroup':
589
590
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomCheckboxGroup["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
590
591
  checked: value !== null && value !== void 0 ? value : [],
592
+ onChange: fieldHandler(field),
593
+ onOptionChange: field.onOptionChange,
594
+ groupInputStyle: field.groupInputStyle,
591
595
  options: field.options,
592
596
  grouped: field.grouped,
593
- onChange: fieldHandler(field),
594
- onOptionChange: field.onOptionChange
597
+ collapsible: field.collapsible,
598
+ defaultCollapsed: field.defaultCollapsed,
599
+ enableParent: field.enableParent
595
600
  }), field.name);
596
601
  case 'radioGroup':
597
602
  case 'radioGroupInline':
@@ -630,9 +635,10 @@ var GenericForm = function GenericForm(_ref) {
630
635
  }
631
636
  }), field.name);
632
637
  default:
633
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
638
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({
639
+ type: field.type
640
+ }, cp), sp), fp), {}, {
634
641
  value: value,
635
- type: "text",
636
642
  placeholder: field.placeholder,
637
643
  onChange: fieldHandler(field),
638
644
  className: field.className
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insticc/genericform",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
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": {