@insticc/genericform 2.0.6 → 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
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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$
|
|
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
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
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
|
-
},
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
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,
|
|
@@ -9,21 +9,28 @@ var _react = require("react");
|
|
|
9
9
|
var _defaults = require("./defaults");
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
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); }
|
|
12
13
|
var CustomDropdown = function CustomDropdown(_ref) {
|
|
14
|
+
var _value$optionProp;
|
|
13
15
|
var onChange = _ref.onChange,
|
|
14
16
|
name = _ref.name,
|
|
15
17
|
displayName = _ref.displayName,
|
|
18
|
+
placeholder = _ref.placeholder,
|
|
16
19
|
_ref$value = _ref.value,
|
|
17
20
|
value = _ref$value === void 0 ? "" : _ref$value,
|
|
18
21
|
_ref$options = _ref.options,
|
|
19
22
|
options = _ref$options === void 0 ? [] : _ref$options,
|
|
20
|
-
|
|
23
|
+
optionProp = _ref.optionProp,
|
|
21
24
|
_ref$disabled = _ref.disabled,
|
|
22
25
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
23
26
|
_ref$required = _ref.required,
|
|
24
27
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
25
28
|
_ref$multiple = _ref.multiple,
|
|
26
29
|
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
|
30
|
+
contentProp = _ref.contentProp,
|
|
31
|
+
contentLabel = _ref.contentLabel,
|
|
32
|
+
_ref$contentStyle = _ref.contentStyle,
|
|
33
|
+
contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
|
|
27
34
|
error = _ref.error,
|
|
28
35
|
_ref$tooltip = _ref.tooltip,
|
|
29
36
|
tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
|
|
@@ -49,61 +56,94 @@ var CustomDropdown = function CustomDropdown(_ref) {
|
|
|
49
56
|
var _ref5, _ref6, _ref7, _opt$text;
|
|
50
57
|
return (_ref5 = (_ref6 = (_ref7 = (_opt$text = opt === null || opt === void 0 ? void 0 : opt.text) !== null && _opt$text !== void 0 ? _opt$text : opt === null || opt === void 0 ? void 0 : opt.label) !== null && _ref7 !== void 0 ? _ref7 : opt === null || opt === void 0 ? void 0 : opt.name) !== null && _ref6 !== void 0 ? _ref6 : opt === null || opt === void 0 ? void 0 : opt.key) !== null && _ref5 !== void 0 ? _ref5 : opt;
|
|
51
58
|
};
|
|
59
|
+
|
|
60
|
+
// In object mode the <select> needs a scalar to match against <option value>
|
|
61
|
+
var selectValue = optionProp ? (_value$optionProp = value === null || value === void 0 ? void 0 : value[optionProp]) !== null && _value$optionProp !== void 0 ? _value$optionProp : "" : value;
|
|
52
62
|
var handleChange = (0, _react.useCallback)(function (e) {
|
|
53
|
-
var _options$find;
|
|
54
63
|
var raw = e.target.value;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
64
|
+
if (optionProp) {
|
|
65
|
+
var _options$find;
|
|
66
|
+
var full = (_options$find = options.find(function (opt) {
|
|
67
|
+
return String(opt[optionProp]) === raw;
|
|
68
|
+
})) !== null && _options$find !== void 0 ? _options$find : null;
|
|
69
|
+
onChange === null || onChange === void 0 || onChange(name, full, full);
|
|
70
|
+
} else {
|
|
71
|
+
var _options$find2;
|
|
72
|
+
var _full = (_options$find2 = options.find(function (opt) {
|
|
73
|
+
return String(resolveValue(opt)) === raw;
|
|
74
|
+
})) !== null && _options$find2 !== void 0 ? _options$find2 : null;
|
|
75
|
+
onChange === null || onChange === void 0 || onChange(name, raw, _full);
|
|
76
|
+
}
|
|
77
|
+
}, [onChange, name, options, optionProp]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
78
|
+
|
|
60
79
|
var handleMultiChange = (0, _react.useCallback)(function (e) {
|
|
61
80
|
var selected = Array.from(e.target.selectedOptions).map(function (o) {
|
|
62
81
|
return o.value;
|
|
63
82
|
});
|
|
64
83
|
var fulls = selected.map(function (v) {
|
|
65
|
-
var _options$
|
|
66
|
-
return (_options$
|
|
84
|
+
var _options$find3, _options$find4;
|
|
85
|
+
return optionProp ? (_options$find3 = options.find(function (opt) {
|
|
86
|
+
return String(opt[optionProp]) === v;
|
|
87
|
+
})) !== null && _options$find3 !== void 0 ? _options$find3 : null : (_options$find4 = options.find(function (opt) {
|
|
67
88
|
return String(resolveValue(opt)) === v;
|
|
68
|
-
})) !== null && _options$
|
|
89
|
+
})) !== null && _options$find4 !== void 0 ? _options$find4 : null;
|
|
69
90
|
});
|
|
70
|
-
onChange === null || onChange === void 0 || onChange(name, selected, fulls);
|
|
71
|
-
}, [onChange, name, options]);
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
id:
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
onChange === null || onChange === void 0 || onChange(name, optionProp ? fulls : selected, fulls);
|
|
92
|
+
}, [onChange, name, options, optionProp]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
93
|
+
|
|
94
|
+
var contentValue = contentProp && value && _typeof(value) === "object" ? value[contentProp] : null;
|
|
95
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
96
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
97
|
+
className: "ufg-field-group",
|
|
98
|
+
id: name,
|
|
99
|
+
style: mainDivStyle,
|
|
100
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
|
|
101
|
+
id: "form-input-".concat(name),
|
|
102
|
+
name: name,
|
|
103
|
+
value: selectValue,
|
|
104
|
+
disabled: disabled,
|
|
105
|
+
multiple: multiple,
|
|
106
|
+
className: "ufg-select".concat(error ? " error" : ""),
|
|
107
|
+
style: inputStyle,
|
|
108
|
+
onChange: multiple ? handleMultiChange : handleChange,
|
|
109
|
+
children: [!multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
|
|
110
|
+
value: "",
|
|
111
|
+
children: placeholder || "Select..."
|
|
112
|
+
}), (options || []).map(function (opt, idx) {
|
|
113
|
+
var v = optionProp ? opt[optionProp] : resolveValue(opt);
|
|
114
|
+
var l = resolveLabel(opt);
|
|
115
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
|
|
116
|
+
value: v,
|
|
117
|
+
children: l
|
|
118
|
+
}, idx);
|
|
119
|
+
})]
|
|
120
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
121
|
+
}), contentValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
122
|
+
className: "ufg-field-group",
|
|
123
|
+
id: "".concat(name, "_content"),
|
|
124
|
+
style: mainDivStyle,
|
|
125
|
+
children: [contentLabel && (0, _defaults.labelJsx)("".concat(name, "_content"), labelStyle, contentLabel, false, spanStyle), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
|
|
126
|
+
className: "ufg-select-content",
|
|
127
|
+
style: contentStyle,
|
|
128
|
+
children: contentValue
|
|
93
129
|
})]
|
|
94
|
-
})
|
|
130
|
+
})]
|
|
95
131
|
});
|
|
96
132
|
};
|
|
97
133
|
CustomDropdown.propTypes = {
|
|
98
134
|
onChange: _propTypes["default"].func.isRequired,
|
|
99
135
|
name: _propTypes["default"].string.isRequired,
|
|
100
136
|
displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
101
|
-
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array]),
|
|
137
|
+
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array, _propTypes["default"].object]),
|
|
102
138
|
options: _propTypes["default"].array,
|
|
103
139
|
placeholder: _propTypes["default"].string,
|
|
104
140
|
disabled: _propTypes["default"].bool,
|
|
105
141
|
required: _propTypes["default"].bool,
|
|
106
142
|
multiple: _propTypes["default"].bool,
|
|
143
|
+
optionProp: _propTypes["default"].string,
|
|
144
|
+
contentProp: _propTypes["default"].string,
|
|
145
|
+
contentLabel: _propTypes["default"].string,
|
|
146
|
+
contentStyle: _propTypes["default"].object,
|
|
107
147
|
error: _propTypes["default"].string,
|
|
108
148
|
tooltip: _propTypes["default"].string,
|
|
109
149
|
showHelp: _propTypes["default"].bool,
|
package/build/index.css
CHANGED
|
@@ -189,6 +189,16 @@
|
|
|
189
189
|
padding: 6px 8px;
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
+
.ufg-select-content {
|
|
193
|
+
margin-top: 8px;
|
|
194
|
+
white-space: pre-wrap;
|
|
195
|
+
background: #f8f9fa;
|
|
196
|
+
padding: 12px;
|
|
197
|
+
border-radius: var(--ufg-radius);
|
|
198
|
+
border: 1px solid #ddd;
|
|
199
|
+
font-family: inherit;
|
|
200
|
+
}
|
|
201
|
+
|
|
192
202
|
/* --------------------------------------------------------------------------
|
|
193
203
|
Textarea
|
|
194
204
|
-------------------------------------------------------------------------- */
|
|
@@ -325,14 +335,13 @@
|
|
|
325
335
|
font-weight: 600;
|
|
326
336
|
font-size: 15px;
|
|
327
337
|
cursor: pointer;
|
|
328
|
-
border: 2px solid
|
|
338
|
+
border: 2px solid var(--ufg-border);
|
|
329
339
|
transition: all 0.12s ease;
|
|
330
340
|
display: flex;
|
|
331
341
|
align-items: center;
|
|
332
342
|
gap: 8px;
|
|
333
343
|
min-width: 120px;
|
|
334
344
|
justify-content: center;
|
|
335
|
-
background: none;
|
|
336
345
|
}
|
|
337
346
|
|
|
338
347
|
.ufg-button-primary {
|
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);
|
|
@@ -532,9 +533,13 @@ var GenericForm = function GenericForm(_ref) {
|
|
|
532
533
|
case 'select':
|
|
533
534
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomDropdown["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
|
|
534
535
|
value: value,
|
|
536
|
+
optionProp: field.optionProp,
|
|
535
537
|
options: field.options,
|
|
536
538
|
placeholder: field.placeholder,
|
|
537
539
|
multiple: field.multiple,
|
|
540
|
+
contentProp: field.contentProp,
|
|
541
|
+
contentLabel: field.contentLabel,
|
|
542
|
+
contentStyle: field.contentStyle,
|
|
538
543
|
onChange: function onChange(name, val, fullOption) {
|
|
539
544
|
handleFieldChange(name, val, field);
|
|
540
545
|
onFieldChange === null || onFieldChange === void 0 || onFieldChange({
|
|
@@ -584,10 +589,14 @@ var GenericForm = function GenericForm(_ref) {
|
|
|
584
589
|
case 'checkboxGroup':
|
|
585
590
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomCheckboxGroup["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
|
|
586
591
|
checked: value !== null && value !== void 0 ? value : [],
|
|
592
|
+
onChange: fieldHandler(field),
|
|
593
|
+
onOptionChange: field.onOptionChange,
|
|
594
|
+
groupInputStyle: field.groupInputStyle,
|
|
587
595
|
options: field.options,
|
|
588
596
|
grouped: field.grouped,
|
|
589
|
-
|
|
590
|
-
|
|
597
|
+
collapsible: field.collapsible,
|
|
598
|
+
defaultCollapsed: field.defaultCollapsed,
|
|
599
|
+
enableParent: field.enableParent
|
|
591
600
|
}), field.name);
|
|
592
601
|
case 'radioGroup':
|
|
593
602
|
case 'radioGroupInline':
|
|
@@ -626,9 +635,10 @@ var GenericForm = function GenericForm(_ref) {
|
|
|
626
635
|
}
|
|
627
636
|
}), field.name);
|
|
628
637
|
default:
|
|
629
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
638
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
639
|
+
type: field.type
|
|
640
|
+
}, cp), sp), fp), {}, {
|
|
630
641
|
value: value,
|
|
631
|
-
type: "text",
|
|
632
642
|
placeholder: field.placeholder,
|
|
633
643
|
onChange: fieldHandler(field),
|
|
634
644
|
className: field.className
|
|
@@ -739,7 +749,7 @@ var GenericForm = function GenericForm(_ref) {
|
|
|
739
749
|
onClick: action.onClick,
|
|
740
750
|
disabled: !!action.disabled,
|
|
741
751
|
style: _objectSpread(_objectSpread({}, actionsStyle), action.style),
|
|
742
|
-
children: [action.icon, action.label]
|
|
752
|
+
children: [action.icon, action.label || action.name]
|
|
743
753
|
}, idx);
|
|
744
754
|
}), showSubmit && haveSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
745
755
|
type: "submit",
|
package/package.json
CHANGED