@insticc/genericform 2.0.0 → 2.0.2
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.
- package/build/Demo.js +95 -83
- package/build/Demo2.js +230 -192
- package/build/FormFields/CustomAccordion.js +44 -35
- package/build/FormFields/CustomCheckbox.js +14 -12
- package/build/FormFields/CustomCheckboxGroup.js +25 -21
- package/build/FormFields/CustomComponent.js +11 -9
- package/build/FormFields/CustomDatePicker.js +35 -29
- package/build/FormFields/CustomDropdown.js +23 -19
- package/build/FormFields/CustomInput.js +16 -14
- package/build/FormFields/CustomJson.js +42 -38
- package/build/FormFields/CustomLabel.js +8 -7
- package/build/FormFields/CustomMultiDropdown.js +23 -22
- package/build/FormFields/CustomNumberInput.js +19 -17
- package/build/FormFields/CustomRadioGroup.js +28 -24
- package/build/FormFields/CustomSearch.js +22 -21
- package/build/FormFields/CustomSeparator.js +5 -5
- package/build/FormFields/CustomTextArea.js +18 -16
- package/build/FormFields/CustomToggle.js +16 -13
- package/build/FormFields/defaults.js +21 -15
- package/build/index.js +123 -128
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
8
|
var _defaults = require("./defaults");
|
|
9
9
|
var _react = require("react");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
12
|
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
12
13
|
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."); }
|
|
@@ -45,29 +46,32 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
|
|
|
45
46
|
onChange === null || onChange === void 0 || onChange(name, data);
|
|
46
47
|
onOptionChange === null || onOptionChange === void 0 || onOptionChange(data);
|
|
47
48
|
}, [onChange, onOptionChange, name, checked]);
|
|
48
|
-
return /*#__PURE__*/
|
|
49
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
49
50
|
className: "ufg-field-group",
|
|
50
51
|
id: name,
|
|
51
|
-
style: mainDivStyle
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
52
|
+
style: mainDivStyle,
|
|
53
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
54
|
+
className: "ufg-checkbox-group",
|
|
55
|
+
children: options.map(function (opt, idx) {
|
|
56
|
+
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);
|
|
66
|
+
}
|
|
67
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
68
|
+
htmlFor: "".concat(name, "-").concat(idx),
|
|
69
|
+
children: opt.label || opt.text
|
|
70
|
+
})]
|
|
71
|
+
}, opt.name || opt.value);
|
|
72
|
+
})
|
|
73
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
74
|
+
});
|
|
71
75
|
};
|
|
72
76
|
CustomCheckboxGroup.propTypes = {
|
|
73
77
|
onChange: _propTypes["default"].func.isRequired,
|
|
@@ -4,37 +4,39 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
8
|
var _defaults = require("./defaults");
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
-
/**
|
|
12
|
-
* Pass-through wrapper for arbitrary React nodes.
|
|
13
|
-
* No onChange / value — purely structural.
|
|
14
|
-
*/
|
|
15
|
-
var CustomComponent = function CustomComponent(_ref) {
|
|
11
|
+
/**
|
|
12
|
+
* Pass-through wrapper for arbitrary React nodes.
|
|
13
|
+
* No onChange / value — purely structural.
|
|
14
|
+
*/var CustomComponent = function CustomComponent(_ref) {
|
|
16
15
|
var name = _ref.name,
|
|
17
16
|
displayName = _ref.displayName,
|
|
18
17
|
component = _ref.component,
|
|
19
18
|
_ref$required = _ref.required,
|
|
20
19
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
20
|
+
error = _ref.error,
|
|
21
21
|
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
22
22
|
mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
|
|
23
23
|
_ref$labelStyle = _ref.labelStyle,
|
|
24
24
|
labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
|
|
25
25
|
_ref$spanStyle = _ref.spanStyle,
|
|
26
26
|
spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle;
|
|
27
|
-
return /*#__PURE__*/
|
|
27
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
28
28
|
className: "ufg-component-wrapper",
|
|
29
29
|
id: name,
|
|
30
|
-
style: mainDivStyle
|
|
31
|
-
|
|
30
|
+
style: mainDivStyle,
|
|
31
|
+
children: [displayName && (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), component, (0, _defaults.errorJsx)(error)]
|
|
32
|
+
});
|
|
32
33
|
};
|
|
33
34
|
CustomComponent.propTypes = {
|
|
34
35
|
name: _propTypes["default"].string,
|
|
35
36
|
displayName: _propTypes["default"].string,
|
|
36
37
|
component: _propTypes["default"].node,
|
|
37
38
|
required: _propTypes["default"].bool,
|
|
39
|
+
error: _propTypes["default"].string,
|
|
38
40
|
mainDivStyle: _propTypes["default"].object,
|
|
39
41
|
labelStyle: _propTypes["default"].object,
|
|
40
42
|
spanStyle: _propTypes["default"].object
|
|
@@ -8,13 +8,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _reactDatetime = _interopRequireDefault(require("react-datetime"));
|
|
10
10
|
var _defaults = require("./defaults");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
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); }
|
|
14
|
+
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; }
|
|
15
|
+
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; }
|
|
16
|
+
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; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
18
|
+
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); } /**
|
|
19
|
+
* Date / datetime / time picker.
|
|
20
|
+
* onChange(date, name) — keeps the existing signature that parent onChangeTime expects.
|
|
21
|
+
* Set dateFormat=false + timeFormat="HH:mm" for time-only mode.
|
|
22
|
+
* Set timeFormat="HH:mm" alongside dateFormat for datetime mode.
|
|
18
23
|
*/
|
|
19
24
|
var CustomDatePicker = function CustomDatePicker(_ref) {
|
|
20
25
|
var onChange = _ref.onChange,
|
|
@@ -51,31 +56,32 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
|
|
|
51
56
|
var handleChange = (0, _react.useCallback)(function (date) {
|
|
52
57
|
return onChange === null || onChange === void 0 ? void 0 : onChange(date, name);
|
|
53
58
|
}, [onChange, name]);
|
|
54
|
-
return /*#__PURE__*/
|
|
59
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
55
60
|
className: "ufg-field-group",
|
|
56
61
|
id: "form-dateDiv-".concat(name),
|
|
57
|
-
style: mainDivStyle
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
62
|
+
style: mainDivStyle,
|
|
63
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatetime["default"], {
|
|
64
|
+
id: "form-date-".concat(name),
|
|
65
|
+
value: value,
|
|
66
|
+
dateFormat: dateFormat,
|
|
67
|
+
timeFormat: timeFormat,
|
|
68
|
+
input: true,
|
|
69
|
+
disabled: disabled,
|
|
70
|
+
required: required,
|
|
71
|
+
style: inputStyle,
|
|
72
|
+
renderInput: function renderInput(props, openCalendar) {
|
|
73
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
|
|
74
|
+
readOnly: true
|
|
75
|
+
}, props), {}, {
|
|
76
|
+
placeholder: placeholder,
|
|
77
|
+
onClick: !disabled ? openCalendar : undefined,
|
|
78
|
+
disabled: disabled,
|
|
79
|
+
className: "ufg-input".concat(error ? " error" : "")
|
|
80
|
+
}));
|
|
81
|
+
},
|
|
82
|
+
onChange: handleChange
|
|
83
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
84
|
+
});
|
|
79
85
|
};
|
|
80
86
|
CustomDatePicker.propTypes = {
|
|
81
87
|
onChange: _propTypes["default"].func.isRequired,
|
|
@@ -7,6 +7,7 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _defaults = require("./defaults");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
12
|
var CustomDropdown = function CustomDropdown(_ref) {
|
|
12
13
|
var onChange = _ref.onChange,
|
|
@@ -68,27 +69,30 @@ var CustomDropdown = function CustomDropdown(_ref) {
|
|
|
68
69
|
});
|
|
69
70
|
onChange === null || onChange === void 0 || onChange(name, selected, fulls);
|
|
70
71
|
}, [onChange, name, options]);
|
|
71
|
-
return /*#__PURE__*/
|
|
72
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
72
73
|
className: "ufg-field-group",
|
|
73
74
|
id: name,
|
|
74
|
-
style: mainDivStyle
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
75
|
+
style: mainDivStyle,
|
|
76
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
|
|
77
|
+
id: "form-input-".concat(name),
|
|
78
|
+
name: name,
|
|
79
|
+
value: value,
|
|
80
|
+
disabled: disabled,
|
|
81
|
+
multiple: multiple,
|
|
82
|
+
className: "ufg-select".concat(error ? " error" : ""),
|
|
83
|
+
style: inputStyle,
|
|
84
|
+
onChange: multiple ? handleMultiChange : handleChange,
|
|
85
|
+
children: [!multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
|
|
86
|
+
value: "",
|
|
87
|
+
children: placeholder || "Select..."
|
|
88
|
+
}), (options || []).map(function (opt, idx) {
|
|
89
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
|
|
90
|
+
value: resolveValue(opt),
|
|
91
|
+
children: resolveLabel(opt)
|
|
92
|
+
}, idx);
|
|
93
|
+
})]
|
|
94
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
95
|
+
});
|
|
92
96
|
};
|
|
93
97
|
CustomDropdown.propTypes = {
|
|
94
98
|
onChange: _propTypes["default"].func.isRequired,
|
|
@@ -7,6 +7,7 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _defaults = require("./defaults");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
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
|
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; }
|
|
@@ -46,22 +47,23 @@ var CustomInput = function CustomInput(_ref) {
|
|
|
46
47
|
var handleChange = (0, _react.useCallback)(function (e) {
|
|
47
48
|
return onChange === null || onChange === void 0 ? void 0 : onChange(name, e.target.value);
|
|
48
49
|
}, [onChange, name]);
|
|
49
|
-
return /*#__PURE__*/
|
|
50
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
50
51
|
className: "ufg-field-group",
|
|
51
52
|
id: name,
|
|
52
|
-
style: mainDivStyle
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
53
|
+
style: mainDivStyle,
|
|
54
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
55
|
+
id: "form-input-".concat(name),
|
|
56
|
+
type: type,
|
|
57
|
+
name: name,
|
|
58
|
+
value: value,
|
|
59
|
+
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
|
|
60
|
+
disabled: disabled,
|
|
61
|
+
required: required,
|
|
62
|
+
className: "ufg-input".concat(error ? " error" : "").concat(className ? " ".concat(className) : ""),
|
|
63
|
+
style: inputStyle,
|
|
64
|
+
onChange: handleChange
|
|
65
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
66
|
+
});
|
|
65
67
|
};
|
|
66
68
|
CustomInput.propTypes = _defineProperty(_defineProperty({
|
|
67
69
|
onChange: _propTypes["default"].func.isRequired,
|
|
@@ -8,6 +8,7 @@ exports["default"] = void 0;
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _defaults = require("./defaults");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
13
|
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; }
|
|
13
14
|
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; }
|
|
@@ -80,47 +81,50 @@ var CustomJson = function CustomJson(_ref) {
|
|
|
80
81
|
var isMulti = mode === "multiple";
|
|
81
82
|
var ph = placeholder || (isMulti ? PLACEHOLDERS.multiple : PLACEHOLDERS.single)[datatype] || '{"key": "value"}';
|
|
82
83
|
var displayValue = typeof value === "string" ? value : value !== undefined && value !== "" ? JSON.stringify(value, null, 2) : "";
|
|
83
|
-
return /*#__PURE__*/
|
|
84
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
84
85
|
className: "ufg-field-group",
|
|
85
86
|
id: name,
|
|
86
|
-
style: mainDivStyle
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
87
|
+
style: mainDivStyle,
|
|
88
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), allowModeSwitch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
89
|
+
className: "ufg-json-mode-selector",
|
|
90
|
+
children: ["single", "multiple"].map(function (m) {
|
|
91
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
92
|
+
style: {
|
|
93
|
+
marginRight: "1rem"
|
|
94
|
+
},
|
|
95
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
96
|
+
type: "radio",
|
|
97
|
+
name: "".concat(name, "_mode"),
|
|
98
|
+
value: m,
|
|
99
|
+
checked: mode === m,
|
|
100
|
+
onChange: function onChange() {
|
|
101
|
+
return setMode(m);
|
|
102
|
+
}
|
|
103
|
+
}), " ", m.charAt(0).toUpperCase() + m.slice(1)]
|
|
104
|
+
}, m);
|
|
105
|
+
})
|
|
106
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
|
|
107
|
+
className: "ufg-textarea ufg-json-textarea".concat(error ? " error" : ""),
|
|
108
|
+
name: name,
|
|
109
|
+
value: displayValue,
|
|
110
|
+
placeholder: ph,
|
|
111
|
+
disabled: disabled,
|
|
112
|
+
rows: rows || (isMulti ? 12 : 8),
|
|
113
|
+
style: _objectSpread({
|
|
114
|
+
fontFamily: "monospace",
|
|
115
|
+
fontSize: "0.9em"
|
|
116
|
+
}, inputStyle),
|
|
117
|
+
onChange: function onChange(e) {
|
|
118
|
+
return _onChange === null || _onChange === void 0 ? void 0 : _onChange(name, e.target.value, isMulti);
|
|
119
|
+
},
|
|
120
|
+
onBlur: function onBlur(e) {
|
|
121
|
+
if (e.target.value.trim()) onValidate === null || onValidate === void 0 || onValidate(name, e.target.value, isMulti);
|
|
94
122
|
}
|
|
95
|
-
}, /*#__PURE__*/
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
onChange: function onChange() {
|
|
101
|
-
return setMode(m);
|
|
102
|
-
}
|
|
103
|
-
}), " ", m.charAt(0).toUpperCase() + m.slice(1));
|
|
104
|
-
})), /*#__PURE__*/React.createElement("textarea", {
|
|
105
|
-
className: "ufg-textarea ufg-json-textarea".concat(error ? " error" : ""),
|
|
106
|
-
name: name,
|
|
107
|
-
value: displayValue,
|
|
108
|
-
placeholder: ph,
|
|
109
|
-
disabled: disabled,
|
|
110
|
-
rows: rows || (isMulti ? 12 : 8),
|
|
111
|
-
style: _objectSpread({
|
|
112
|
-
fontFamily: "monospace",
|
|
113
|
-
fontSize: "0.9em"
|
|
114
|
-
}, inputStyle),
|
|
115
|
-
onChange: function onChange(e) {
|
|
116
|
-
return _onChange === null || _onChange === void 0 ? void 0 : _onChange(name, e.target.value, isMulti);
|
|
117
|
-
},
|
|
118
|
-
onBlur: function onBlur(e) {
|
|
119
|
-
if (e.target.value.trim()) onValidate === null || onValidate === void 0 || onValidate(name, e.target.value, isMulti);
|
|
120
|
-
}
|
|
121
|
-
}), isMulti && /*#__PURE__*/React.createElement("div", {
|
|
122
|
-
className: "ufg-json-hint"
|
|
123
|
-
}, "Enter a ", datatype, " array: ", ph), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
|
|
123
|
+
}), isMulti && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
124
|
+
className: "ufg-json-hint",
|
|
125
|
+
children: ["Enter a ", datatype, " array: ", ph]
|
|
126
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
127
|
+
});
|
|
124
128
|
};
|
|
125
129
|
CustomJson.propTypes = {
|
|
126
130
|
onChange: _propTypes["default"].func.isRequired,
|
|
@@ -7,22 +7,23 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _defaults = require("./defaults");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
-
/**
|
|
12
|
-
* Static label — no onChange / value / validation.
|
|
13
|
-
*/
|
|
14
|
-
var CustomLabel = function CustomLabel(_ref) {
|
|
12
|
+
/**
|
|
13
|
+
* Static label — no onChange / value / validation.
|
|
14
|
+
*/var CustomLabel = function CustomLabel(_ref) {
|
|
15
15
|
var name = _ref.name,
|
|
16
16
|
displayName = _ref.displayName,
|
|
17
17
|
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
18
18
|
mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
|
|
19
19
|
_ref$labelStyle = _ref.labelStyle,
|
|
20
20
|
labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle;
|
|
21
|
-
return /*#__PURE__*/
|
|
21
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
22
22
|
className: "ufg-field-group",
|
|
23
23
|
id: name,
|
|
24
|
-
style: mainDivStyle
|
|
25
|
-
|
|
24
|
+
style: mainDivStyle,
|
|
25
|
+
children: (0, _defaults.labelJsx)(name, labelStyle, displayName)
|
|
26
|
+
});
|
|
26
27
|
};
|
|
27
28
|
CustomLabel.propTypes = {
|
|
28
29
|
name: _propTypes["default"].string.isRequired,
|
|
@@ -8,12 +8,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _semanticUiReact = require("semantic-ui-react");
|
|
10
10
|
var _defaults = require("./defaults");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
-
/**
|
|
13
|
-
* Multi-select dropdown. Semantic UI Dropdown is kept — native <select multiple>
|
|
14
|
-
* provides significantly inferior UX. onChange is normalised to (name, value[]).
|
|
15
|
-
*/
|
|
16
|
-
var CustomMultiDropdown = function CustomMultiDropdown(_ref) {
|
|
13
|
+
/**
|
|
14
|
+
* Multi-select dropdown. Semantic UI Dropdown is kept — native <select multiple>
|
|
15
|
+
* provides significantly inferior UX. onChange is normalised to (name, value[]).
|
|
16
|
+
*/var CustomMultiDropdown = function CustomMultiDropdown(_ref) {
|
|
17
17
|
var onChange = _ref.onChange,
|
|
18
18
|
name = _ref.name,
|
|
19
19
|
displayName = _ref.displayName,
|
|
@@ -46,25 +46,26 @@ var CustomMultiDropdown = function CustomMultiDropdown(_ref) {
|
|
|
46
46
|
var handleChange = (0, _react.useCallback)(function (_, data) {
|
|
47
47
|
return onChange === null || onChange === void 0 ? void 0 : onChange(name, data.value);
|
|
48
48
|
}, [onChange, name]);
|
|
49
|
-
return /*#__PURE__*/
|
|
49
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
50
50
|
className: "ufg-field-group",
|
|
51
51
|
id: name,
|
|
52
|
-
style: mainDivStyle
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
52
|
+
style: mainDivStyle,
|
|
53
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Dropdown, {
|
|
54
|
+
id: "form-input-".concat(name),
|
|
55
|
+
name: name,
|
|
56
|
+
style: inputStyle,
|
|
57
|
+
placeholder: placeholder || "Select ".concat(displayName || name),
|
|
58
|
+
fluid: true,
|
|
59
|
+
multiple: true,
|
|
60
|
+
selection: true,
|
|
61
|
+
search: true,
|
|
62
|
+
value: value,
|
|
63
|
+
options: options,
|
|
64
|
+
onChange: handleChange,
|
|
65
|
+
disabled: disabled,
|
|
66
|
+
className: error ? "error" : undefined
|
|
67
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
68
|
+
});
|
|
68
69
|
};
|
|
69
70
|
CustomMultiDropdown.propTypes = {
|
|
70
71
|
onChange: _propTypes["default"].func.isRequired,
|
|
@@ -7,6 +7,7 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _defaults = require("./defaults");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
12
|
var CustomNumberInput = function CustomNumberInput(_ref) {
|
|
12
13
|
var onChange = _ref.onChange,
|
|
@@ -42,25 +43,26 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
|
|
|
42
43
|
var handleChange = (0, _react.useCallback)(function (e) {
|
|
43
44
|
return onChange === null || onChange === void 0 ? void 0 : onChange(name, Number(e.target.value));
|
|
44
45
|
}, [onChange, name]);
|
|
45
|
-
return /*#__PURE__*/
|
|
46
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
46
47
|
className: "ufg-field-group",
|
|
47
48
|
id: name,
|
|
48
|
-
style: mainDivStyle
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
49
|
+
style: mainDivStyle,
|
|
50
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
51
|
+
id: "form-input-".concat(name),
|
|
52
|
+
type: "number",
|
|
53
|
+
name: name,
|
|
54
|
+
value: value,
|
|
55
|
+
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
|
|
56
|
+
disabled: disabled,
|
|
57
|
+
required: required,
|
|
58
|
+
min: min,
|
|
59
|
+
max: max,
|
|
60
|
+
step: step,
|
|
61
|
+
className: "ufg-input".concat(error ? " error" : ""),
|
|
62
|
+
style: inputStyle,
|
|
63
|
+
onChange: handleChange
|
|
64
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
65
|
+
});
|
|
64
66
|
};
|
|
65
67
|
CustomNumberInput.propTypes = {
|
|
66
68
|
onChange: _propTypes["default"].func.isRequired,
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
8
|
var _defaults = require("./defaults");
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
11
|
var CustomRadioGroup = function CustomRadioGroup(_ref) {
|
|
11
12
|
var _onChange = _ref.onChange,
|
|
@@ -40,32 +41,35 @@ var CustomRadioGroup = function CustomRadioGroup(_ref) {
|
|
|
40
41
|
inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
|
|
41
42
|
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
42
43
|
tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
|
|
43
|
-
return /*#__PURE__*/
|
|
44
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
44
45
|
className: "ufg-field-group",
|
|
45
46
|
id: name,
|
|
46
|
-
style: mainDivStyle
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
47
|
+
style: mainDivStyle,
|
|
48
|
+
children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
49
|
+
className: inline ? "ufg-radio-group-inline" : "ufg-radio-group",
|
|
50
|
+
children: options.map(function (opt, idx) {
|
|
51
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
52
|
+
className: "ufg-radio-item",
|
|
53
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
54
|
+
id: "".concat(name, "-").concat(idx),
|
|
55
|
+
type: "radio",
|
|
56
|
+
name: name,
|
|
57
|
+
style: inputStyle,
|
|
58
|
+
value: opt.value || opt.name,
|
|
59
|
+
checked: value === (opt.value || opt.name),
|
|
60
|
+
disabled: !!opt.disabled || disabled,
|
|
61
|
+
onChange: function onChange(e) {
|
|
62
|
+
_onChange === null || _onChange === void 0 || _onChange(name, e.target.value);
|
|
63
|
+
onOptionChange === null || onOptionChange === void 0 || onOptionChange(opt.name || opt.value, formData);
|
|
64
|
+
}
|
|
65
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
66
|
+
htmlFor: "".concat(name, "-").concat(idx),
|
|
67
|
+
children: opt.label || opt.text
|
|
68
|
+
})]
|
|
69
|
+
}, idx);
|
|
70
|
+
})
|
|
71
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
72
|
+
});
|
|
69
73
|
};
|
|
70
74
|
CustomRadioGroup.propTypes = {
|
|
71
75
|
onChange: _propTypes["default"].func.isRequired,
|