@insticc/genericform 2.0.8 → 2.1.0
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 +37 -37
- package/build/Demo2.js +15 -15
- package/build/FormFields/CustomAction.js +38 -0
- package/build/FormFields/CustomCheckbox.js +11 -3
- package/build/FormFields/CustomCheckboxGroup.js +10 -3
- package/build/FormFields/CustomComponent.js +10 -3
- package/build/FormFields/CustomDatePicker.js +21 -5
- package/build/FormFields/CustomDropdown.js +18 -4
- package/build/FormFields/CustomFileInput.js +131 -0
- package/build/FormFields/CustomInput.js +12 -4
- package/build/FormFields/CustomJson.js +11 -3
- package/build/FormFields/CustomLabel.js +8 -3
- package/build/FormFields/CustomMobilePhone.js +166 -0
- package/build/FormFields/CustomMultiDropdown.js +12 -4
- package/build/FormFields/CustomNumberInput.js +12 -4
- package/build/FormFields/CustomRadioGroup.js +26 -12
- package/build/FormFields/CustomSearch.js +12 -4
- package/build/FormFields/CustomTextArea.js +12 -4
- package/build/FormFields/CustomToggle.js +11 -3
- package/build/FormFields/defaults.js +22 -6
- package/build/index.css +11 -7
- package/build/index.js +200 -58
- package/package.json +1 -1
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _defaults = require("./defaults");
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
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); }
|
|
11
|
+
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; }
|
|
12
|
+
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; }
|
|
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; }
|
|
14
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
15
|
+
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); }
|
|
16
|
+
var CustomFileInput = function CustomFileInput(_ref) {
|
|
17
|
+
var onChange = _ref.onChange,
|
|
18
|
+
value = _ref.value,
|
|
19
|
+
_ref$accept = _ref.accept,
|
|
20
|
+
accept = _ref$accept === void 0 ? '.pdf' : _ref$accept,
|
|
21
|
+
name = _ref.name,
|
|
22
|
+
label = _ref.label,
|
|
23
|
+
placeholder = _ref.placeholder,
|
|
24
|
+
_ref$disabled = _ref.disabled,
|
|
25
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
26
|
+
_ref$required = _ref.required,
|
|
27
|
+
required = _ref$required === void 0 ? false : _ref$required,
|
|
28
|
+
error = _ref.error,
|
|
29
|
+
_ref$tooltip = _ref.tooltip,
|
|
30
|
+
tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
|
|
31
|
+
_ref$showHelp = _ref.showHelp,
|
|
32
|
+
showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
|
|
33
|
+
_ref$helpText = _ref.helpText,
|
|
34
|
+
helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
|
|
35
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
36
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
|
|
37
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
38
|
+
labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
|
|
39
|
+
_ref$spanStyle = _ref.spanStyle,
|
|
40
|
+
spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
|
|
41
|
+
_ref$inputStyle = _ref.inputStyle,
|
|
42
|
+
inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
|
|
43
|
+
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
44
|
+
tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
|
|
45
|
+
var ref = (0, _react.useRef)();
|
|
46
|
+
var handleChange = function handleChange(e) {
|
|
47
|
+
var _e$target$files$, _e$target$files;
|
|
48
|
+
var file = (_e$target$files$ = (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]) !== null && _e$target$files$ !== void 0 ? _e$target$files$ : null;
|
|
49
|
+
onChange === null || onChange === void 0 || onChange(name, file);
|
|
50
|
+
e.target.value = '';
|
|
51
|
+
};
|
|
52
|
+
var handleRemove = function handleRemove() {
|
|
53
|
+
onChange === null || onChange === void 0 || onChange(name, null);
|
|
54
|
+
};
|
|
55
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
56
|
+
className: "ufg-field-group",
|
|
57
|
+
id: name,
|
|
58
|
+
style: mainDivStyle,
|
|
59
|
+
children: [(0, _defaults.labelJsx)({
|
|
60
|
+
name: name,
|
|
61
|
+
labelStyle: labelStyle,
|
|
62
|
+
label: label,
|
|
63
|
+
required: required,
|
|
64
|
+
spanStyle: spanStyle,
|
|
65
|
+
showHelp: showHelp,
|
|
66
|
+
helpText: helpText
|
|
67
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
68
|
+
style: {
|
|
69
|
+
display: 'flex',
|
|
70
|
+
alignItems: 'center',
|
|
71
|
+
gap: 8
|
|
72
|
+
},
|
|
73
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
74
|
+
type: "button",
|
|
75
|
+
className: "ufg-button ufg-input",
|
|
76
|
+
style: _objectSpread(_objectSpread({
|
|
77
|
+
fontWeight: 'normal',
|
|
78
|
+
width: 'auto'
|
|
79
|
+
}, inputStyle), {}, {
|
|
80
|
+
whiteSpace: 'nowrap'
|
|
81
|
+
}),
|
|
82
|
+
disabled: disabled,
|
|
83
|
+
onClick: function onClick() {
|
|
84
|
+
var _ref$current;
|
|
85
|
+
return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
|
|
86
|
+
},
|
|
87
|
+
children: placeholder || "Select"
|
|
88
|
+
}), value ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
89
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
90
|
+
style: {
|
|
91
|
+
fontSize: '0.85rem',
|
|
92
|
+
color: '#333',
|
|
93
|
+
wordBreak: 'break-all'
|
|
94
|
+
},
|
|
95
|
+
children: value.name
|
|
96
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
97
|
+
type: "button",
|
|
98
|
+
className: "ufg-button ufg-input",
|
|
99
|
+
style: {
|
|
100
|
+
minWidth: '40px',
|
|
101
|
+
width: '40px',
|
|
102
|
+
padding: '2px 8px',
|
|
103
|
+
fontSize: '0.8rem',
|
|
104
|
+
color: '#db2828',
|
|
105
|
+
borderColor: '#db2828'
|
|
106
|
+
},
|
|
107
|
+
onClick: handleRemove,
|
|
108
|
+
title: "Remove file",
|
|
109
|
+
children: "\u2715"
|
|
110
|
+
})]
|
|
111
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
112
|
+
style: {
|
|
113
|
+
fontSize: '0.82rem',
|
|
114
|
+
color: '#aaa'
|
|
115
|
+
},
|
|
116
|
+
children: "No file selected"
|
|
117
|
+
})]
|
|
118
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
119
|
+
id: "form-input-".concat(name),
|
|
120
|
+
ref: ref,
|
|
121
|
+
type: "file",
|
|
122
|
+
accept: accept,
|
|
123
|
+
style: {
|
|
124
|
+
display: 'none'
|
|
125
|
+
},
|
|
126
|
+
disabled: disabled,
|
|
127
|
+
onChange: handleChange
|
|
128
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
129
|
+
});
|
|
130
|
+
};
|
|
131
|
+
var _default = exports["default"] = CustomFileInput;
|
|
@@ -16,7 +16,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
16
16
|
var CustomInput = function CustomInput(_ref) {
|
|
17
17
|
var onChange = _ref.onChange,
|
|
18
18
|
name = _ref.name,
|
|
19
|
-
|
|
19
|
+
label = _ref.label,
|
|
20
20
|
_ref$value = _ref.value,
|
|
21
21
|
value = _ref$value === void 0 ? "" : _ref$value,
|
|
22
22
|
_ref$type = _ref.type,
|
|
@@ -51,12 +51,20 @@ var CustomInput = function CustomInput(_ref) {
|
|
|
51
51
|
className: "ufg-field-group",
|
|
52
52
|
id: name,
|
|
53
53
|
style: mainDivStyle,
|
|
54
|
-
children: [(0, _defaults.labelJsx)(
|
|
54
|
+
children: [(0, _defaults.labelJsx)({
|
|
55
|
+
name: name,
|
|
56
|
+
labelStyle: labelStyle,
|
|
57
|
+
label: label,
|
|
58
|
+
required: required,
|
|
59
|
+
spanStyle: spanStyle,
|
|
60
|
+
showHelp: showHelp,
|
|
61
|
+
helpText: helpText
|
|
62
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
55
63
|
id: "form-input-".concat(name),
|
|
56
64
|
type: type,
|
|
57
65
|
name: name,
|
|
58
66
|
value: value,
|
|
59
|
-
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder :
|
|
67
|
+
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : label,
|
|
60
68
|
disabled: disabled,
|
|
61
69
|
required: required,
|
|
62
70
|
className: "ufg-input".concat(error ? " error" : "").concat(className ? " ".concat(className) : ""),
|
|
@@ -68,7 +76,7 @@ var CustomInput = function CustomInput(_ref) {
|
|
|
68
76
|
CustomInput.propTypes = _defineProperty(_defineProperty({
|
|
69
77
|
onChange: _propTypes["default"].func.isRequired,
|
|
70
78
|
name: _propTypes["default"].string.isRequired,
|
|
71
|
-
|
|
79
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
72
80
|
value: _propTypes["default"].string,
|
|
73
81
|
type: _propTypes["default"].string,
|
|
74
82
|
disabled: _propTypes["default"].bool,
|
|
@@ -43,7 +43,7 @@ var CustomJson = function CustomJson(_ref) {
|
|
|
43
43
|
var _onChange = _ref.onChange,
|
|
44
44
|
onValidate = _ref.onValidate,
|
|
45
45
|
name = _ref.name,
|
|
46
|
-
|
|
46
|
+
label = _ref.label,
|
|
47
47
|
_ref$value = _ref.value,
|
|
48
48
|
value = _ref$value === void 0 ? "" : _ref$value,
|
|
49
49
|
_ref$disabled = _ref.disabled,
|
|
@@ -85,7 +85,15 @@ var CustomJson = function CustomJson(_ref) {
|
|
|
85
85
|
className: "ufg-field-group",
|
|
86
86
|
id: name,
|
|
87
87
|
style: mainDivStyle,
|
|
88
|
-
children: [(0, _defaults.labelJsx)(
|
|
88
|
+
children: [(0, _defaults.labelJsx)({
|
|
89
|
+
name: name,
|
|
90
|
+
labelStyle: labelStyle,
|
|
91
|
+
label: label,
|
|
92
|
+
required: required,
|
|
93
|
+
spanStyle: spanStyle,
|
|
94
|
+
showHelp: showHelp,
|
|
95
|
+
helpText: helpText
|
|
96
|
+
}), allowModeSwitch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
89
97
|
className: "ufg-json-mode-selector",
|
|
90
98
|
children: ["single", "multiple"].map(function (m) {
|
|
91
99
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
@@ -130,7 +138,7 @@ CustomJson.propTypes = {
|
|
|
130
138
|
onChange: _propTypes["default"].func.isRequired,
|
|
131
139
|
onValidate: _propTypes["default"].func,
|
|
132
140
|
name: _propTypes["default"].string.isRequired,
|
|
133
|
-
|
|
141
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
134
142
|
value: _propTypes["default"].any,
|
|
135
143
|
disabled: _propTypes["default"].bool,
|
|
136
144
|
required: _propTypes["default"].bool,
|
|
@@ -13,7 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
13
13
|
* Static label — no onChange / value / validation.
|
|
14
14
|
*/var CustomLabel = function CustomLabel(_ref) {
|
|
15
15
|
var name = _ref.name,
|
|
16
|
-
|
|
16
|
+
label = _ref.label,
|
|
17
17
|
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
18
18
|
mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
|
|
19
19
|
_ref$labelStyle = _ref.labelStyle,
|
|
@@ -22,12 +22,17 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
22
22
|
className: "ufg-field-group",
|
|
23
23
|
id: name,
|
|
24
24
|
style: mainDivStyle,
|
|
25
|
-
children: (0, _defaults.labelJsx)(
|
|
25
|
+
children: (0, _defaults.labelJsx)({
|
|
26
|
+
name: name,
|
|
27
|
+
labelStyle: labelStyle,
|
|
28
|
+
label: label,
|
|
29
|
+
disableHtmlFor: true
|
|
30
|
+
})
|
|
26
31
|
});
|
|
27
32
|
};
|
|
28
33
|
CustomLabel.propTypes = {
|
|
29
34
|
name: _propTypes["default"].string.isRequired,
|
|
30
|
-
|
|
35
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
31
36
|
mainDivStyle: _propTypes["default"].object,
|
|
32
37
|
labelStyle: _propTypes["default"].object
|
|
33
38
|
};
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _defaults = require("./defaults");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
13
|
+
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."); }
|
|
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
|
+
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; }
|
|
16
|
+
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; } }
|
|
17
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
18
|
+
var COUNTRY_CODES = [{
|
|
19
|
+
label: "🇵🇹 +351",
|
|
20
|
+
value: "+351"
|
|
21
|
+
}, {
|
|
22
|
+
label: "🇪🇸 +34",
|
|
23
|
+
value: "+34"
|
|
24
|
+
}, {
|
|
25
|
+
label: "🇬🇧 +44",
|
|
26
|
+
value: "+44"
|
|
27
|
+
}, {
|
|
28
|
+
label: "🇺🇸 +1",
|
|
29
|
+
value: "+1"
|
|
30
|
+
}, {
|
|
31
|
+
label: "🇫🇷 +33",
|
|
32
|
+
value: "+33"
|
|
33
|
+
}, {
|
|
34
|
+
label: "🇩🇪 +49",
|
|
35
|
+
value: "+49"
|
|
36
|
+
}
|
|
37
|
+
// ...
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Mobile phone input with country code selector.
|
|
42
|
+
* value format: "+351 916999999"
|
|
43
|
+
* onChange(value, name) — same signature as other custom inputs.
|
|
44
|
+
*/
|
|
45
|
+
var CustomMobilePhone = function CustomMobilePhone(_ref) {
|
|
46
|
+
var onChange = _ref.onChange,
|
|
47
|
+
name = _ref.name,
|
|
48
|
+
label = _ref.label,
|
|
49
|
+
_ref$value = _ref.value,
|
|
50
|
+
value = _ref$value === void 0 ? "" : _ref$value,
|
|
51
|
+
_ref$disabled = _ref.disabled,
|
|
52
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
53
|
+
_ref$required = _ref.required,
|
|
54
|
+
required = _ref$required === void 0 ? false : _ref$required,
|
|
55
|
+
_ref$placeholder = _ref.placeholder,
|
|
56
|
+
placeholder = _ref$placeholder === void 0 ? "912 345 678" : _ref$placeholder,
|
|
57
|
+
error = _ref.error,
|
|
58
|
+
_ref$tooltip = _ref.tooltip,
|
|
59
|
+
tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
|
|
60
|
+
_ref$showHelp = _ref.showHelp,
|
|
61
|
+
showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
|
|
62
|
+
_ref$helpText = _ref.helpText,
|
|
63
|
+
helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
|
|
64
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
65
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
|
|
66
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
67
|
+
labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
|
|
68
|
+
_ref$spanStyle = _ref.spanStyle,
|
|
69
|
+
spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
|
|
70
|
+
_ref$inputStyle = _ref.inputStyle,
|
|
71
|
+
inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
|
|
72
|
+
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
73
|
+
tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle,
|
|
74
|
+
_ref$countryCodes = _ref.countryCodes,
|
|
75
|
+
countryCodes = _ref$countryCodes === void 0 ? COUNTRY_CODES : _ref$countryCodes,
|
|
76
|
+
_ref$defaultCountryCo = _ref.defaultCountryCode,
|
|
77
|
+
defaultCountryCode = _ref$defaultCountryCo === void 0 ? "+351" : _ref$defaultCountryCo;
|
|
78
|
+
// Split stored value into prefix + local number
|
|
79
|
+
var _ref2 = function () {
|
|
80
|
+
if (!value) return [defaultCountryCode, ""];
|
|
81
|
+
var found = countryCodes.find(function (c) {
|
|
82
|
+
return value.startsWith(c.value);
|
|
83
|
+
});
|
|
84
|
+
if (found) return [found.value, value.slice(found.value.length)];
|
|
85
|
+
return [defaultCountryCode, value];
|
|
86
|
+
}(),
|
|
87
|
+
_ref3 = _slicedToArray(_ref2, 2),
|
|
88
|
+
prefix = _ref3[0],
|
|
89
|
+
localNumber = _ref3[1];
|
|
90
|
+
var handlePrefixChange = (0, _react.useCallback)(function (e) {
|
|
91
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(name, "".concat(e.target.value).concat(localNumber));
|
|
92
|
+
}, [onChange, name, localNumber]);
|
|
93
|
+
var handleNumberChange = (0, _react.useCallback)(function (e) {
|
|
94
|
+
var digits = e.target.value.replace(/[^\d]/g, "");
|
|
95
|
+
onChange === null || onChange === void 0 || onChange(name, "".concat(prefix).concat(digits));
|
|
96
|
+
}, [onChange, name, prefix]);
|
|
97
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
98
|
+
className: "ufg-field-group",
|
|
99
|
+
id: "form-telDiv-".concat(name),
|
|
100
|
+
style: mainDivStyle,
|
|
101
|
+
children: [(0, _defaults.labelJsx)({
|
|
102
|
+
name: name,
|
|
103
|
+
labelStyle: labelStyle,
|
|
104
|
+
label: label,
|
|
105
|
+
required: required,
|
|
106
|
+
spanStyle: spanStyle,
|
|
107
|
+
showHelp: showHelp,
|
|
108
|
+
helpText: helpText
|
|
109
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
110
|
+
style: {
|
|
111
|
+
display: "flex",
|
|
112
|
+
gap: "8px"
|
|
113
|
+
},
|
|
114
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
|
|
115
|
+
value: prefix,
|
|
116
|
+
disabled: disabled,
|
|
117
|
+
onChange: handlePrefixChange,
|
|
118
|
+
className: "ufg-input".concat(error ? " error" : ""),
|
|
119
|
+
style: {
|
|
120
|
+
width: "110px",
|
|
121
|
+
flexShrink: 0
|
|
122
|
+
},
|
|
123
|
+
children: countryCodes.map(function (c) {
|
|
124
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
|
|
125
|
+
value: c.value,
|
|
126
|
+
children: c.label
|
|
127
|
+
}, c.value);
|
|
128
|
+
})
|
|
129
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
130
|
+
id: "form-input-".concat(name),
|
|
131
|
+
type: "tel",
|
|
132
|
+
value: localNumber,
|
|
133
|
+
disabled: disabled,
|
|
134
|
+
required: required,
|
|
135
|
+
placeholder: placeholder,
|
|
136
|
+
onChange: handleNumberChange,
|
|
137
|
+
className: "ufg-input".concat(error ? " error" : ""),
|
|
138
|
+
style: inputStyle
|
|
139
|
+
})]
|
|
140
|
+
}), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
CustomMobilePhone.propTypes = {
|
|
144
|
+
onChange: _propTypes["default"].func.isRequired,
|
|
145
|
+
name: _propTypes["default"].string.isRequired,
|
|
146
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
147
|
+
value: _propTypes["default"].string,
|
|
148
|
+
disabled: _propTypes["default"].bool,
|
|
149
|
+
required: _propTypes["default"].bool,
|
|
150
|
+
placeholder: _propTypes["default"].string,
|
|
151
|
+
error: _propTypes["default"].string,
|
|
152
|
+
tooltip: _propTypes["default"].string,
|
|
153
|
+
showHelp: _propTypes["default"].bool,
|
|
154
|
+
helpText: _propTypes["default"].string,
|
|
155
|
+
mainDivStyle: _propTypes["default"].object,
|
|
156
|
+
labelStyle: _propTypes["default"].object,
|
|
157
|
+
spanStyle: _propTypes["default"].object,
|
|
158
|
+
inputStyle: _propTypes["default"].object,
|
|
159
|
+
tooltipStyle: _propTypes["default"].object,
|
|
160
|
+
countryCodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
161
|
+
label: _propTypes["default"].string.isRequired,
|
|
162
|
+
value: _propTypes["default"].string.isRequired
|
|
163
|
+
})),
|
|
164
|
+
defaultCountryCode: _propTypes["default"].string
|
|
165
|
+
};
|
|
166
|
+
var _default = exports["default"] = CustomMobilePhone;
|
|
@@ -16,7 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
16
16
|
*/var CustomMultiDropdown = function CustomMultiDropdown(_ref) {
|
|
17
17
|
var onChange = _ref.onChange,
|
|
18
18
|
name = _ref.name,
|
|
19
|
-
|
|
19
|
+
label = _ref.label,
|
|
20
20
|
_ref$value = _ref.value,
|
|
21
21
|
value = _ref$value === void 0 ? [] : _ref$value,
|
|
22
22
|
_ref$options = _ref.options,
|
|
@@ -50,11 +50,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
50
50
|
className: "ufg-field-group",
|
|
51
51
|
id: name,
|
|
52
52
|
style: mainDivStyle,
|
|
53
|
-
children: [(0, _defaults.labelJsx)(
|
|
53
|
+
children: [(0, _defaults.labelJsx)({
|
|
54
|
+
name: name,
|
|
55
|
+
labelStyle: labelStyle,
|
|
56
|
+
label: label,
|
|
57
|
+
required: required,
|
|
58
|
+
spanStyle: spanStyle,
|
|
59
|
+
showHelp: showHelp,
|
|
60
|
+
helpText: helpText
|
|
61
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Dropdown, {
|
|
54
62
|
id: "form-input-".concat(name),
|
|
55
63
|
name: name,
|
|
56
64
|
style: inputStyle,
|
|
57
|
-
placeholder: placeholder || "Select ".concat(
|
|
65
|
+
placeholder: placeholder || "Select ".concat(label || name),
|
|
58
66
|
fluid: true,
|
|
59
67
|
multiple: true,
|
|
60
68
|
selection: true,
|
|
@@ -70,7 +78,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
70
78
|
CustomMultiDropdown.propTypes = {
|
|
71
79
|
onChange: _propTypes["default"].func.isRequired,
|
|
72
80
|
name: _propTypes["default"].string.isRequired,
|
|
73
|
-
|
|
81
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
74
82
|
value: _propTypes["default"].array,
|
|
75
83
|
options: _propTypes["default"].array.isRequired,
|
|
76
84
|
placeholder: _propTypes["default"].string,
|
|
@@ -12,7 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
12
12
|
var CustomNumberInput = function CustomNumberInput(_ref) {
|
|
13
13
|
var onChange = _ref.onChange,
|
|
14
14
|
name = _ref.name,
|
|
15
|
-
|
|
15
|
+
label = _ref.label,
|
|
16
16
|
_ref$value = _ref.value,
|
|
17
17
|
value = _ref$value === void 0 ? "" : _ref$value,
|
|
18
18
|
_ref$disabled = _ref.disabled,
|
|
@@ -47,12 +47,20 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
|
|
|
47
47
|
className: "ufg-field-group",
|
|
48
48
|
id: name,
|
|
49
49
|
style: mainDivStyle,
|
|
50
|
-
children: [(0, _defaults.labelJsx)(
|
|
50
|
+
children: [(0, _defaults.labelJsx)({
|
|
51
|
+
name: name,
|
|
52
|
+
labelStyle: labelStyle,
|
|
53
|
+
label: label,
|
|
54
|
+
required: required,
|
|
55
|
+
spanStyle: spanStyle,
|
|
56
|
+
showHelp: showHelp,
|
|
57
|
+
helpText: helpText
|
|
58
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
51
59
|
id: "form-input-".concat(name),
|
|
52
60
|
type: "number",
|
|
53
61
|
name: name,
|
|
54
62
|
value: value,
|
|
55
|
-
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder :
|
|
63
|
+
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : label,
|
|
56
64
|
disabled: disabled,
|
|
57
65
|
required: required,
|
|
58
66
|
min: min,
|
|
@@ -67,7 +75,7 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
|
|
|
67
75
|
CustomNumberInput.propTypes = {
|
|
68
76
|
onChange: _propTypes["default"].func.isRequired,
|
|
69
77
|
name: _propTypes["default"].string.isRequired,
|
|
70
|
-
|
|
78
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
71
79
|
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
72
80
|
disabled: _propTypes["default"].bool,
|
|
73
81
|
required: _propTypes["default"].bool,
|
|
@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _propTypes =
|
|
7
|
+
var _propTypes = _interopRequireWildcard(require("prop-types"));
|
|
8
8
|
var _defaults = require("./defaults");
|
|
9
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
function
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
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); }
|
|
11
13
|
var CustomRadioGroup = function CustomRadioGroup(_ref) {
|
|
12
14
|
var _onChange = _ref.onChange,
|
|
13
15
|
onOptionChange = _ref.onOptionChange,
|
|
14
16
|
formData = _ref.formData,
|
|
15
17
|
name = _ref.name,
|
|
16
|
-
|
|
18
|
+
label = _ref.label,
|
|
17
19
|
_ref$value = _ref.value,
|
|
18
20
|
value = _ref$value === void 0 ? "" : _ref$value,
|
|
19
21
|
_ref$options = _ref.options,
|
|
@@ -41,30 +43,42 @@ var CustomRadioGroup = function CustomRadioGroup(_ref) {
|
|
|
41
43
|
inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
|
|
42
44
|
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
43
45
|
tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
|
|
46
|
+
var isObject = _typeof(options[0]) === "object";
|
|
44
47
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
45
48
|
className: "ufg-field-group",
|
|
46
49
|
id: name,
|
|
47
50
|
style: mainDivStyle,
|
|
48
|
-
children: [(0, _defaults.labelJsx)(
|
|
51
|
+
children: [(0, _defaults.labelJsx)({
|
|
52
|
+
name: name,
|
|
53
|
+
labelStyle: labelStyle,
|
|
54
|
+
label: label,
|
|
55
|
+
required: required,
|
|
56
|
+
spanStyle: spanStyle,
|
|
57
|
+
showHelp: showHelp,
|
|
58
|
+
helpText: helpText,
|
|
59
|
+
disableHtmlFor: true
|
|
60
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
49
61
|
className: inline ? "ufg-radio-group-inline" : "ufg-radio-group",
|
|
50
62
|
children: options.map(function (opt, idx) {
|
|
63
|
+
var optValue = isObject ? opt.value || opt.name : opt;
|
|
64
|
+
var optText = isObject ? opt.label || opt.text : opt;
|
|
51
65
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
52
66
|
className: "ufg-radio-item",
|
|
53
67
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
54
|
-
id: "".concat(name, "-").concat(idx),
|
|
68
|
+
id: "form-input-".concat(name, "-").concat(idx),
|
|
55
69
|
type: "radio",
|
|
56
70
|
name: name,
|
|
57
71
|
style: inputStyle,
|
|
58
|
-
value:
|
|
59
|
-
checked: value ===
|
|
72
|
+
value: optValue,
|
|
73
|
+
checked: value === optValue,
|
|
60
74
|
disabled: !!opt.disabled || disabled,
|
|
61
75
|
onChange: function onChange(e) {
|
|
62
76
|
_onChange === null || _onChange === void 0 || _onChange(name, e.target.value);
|
|
63
|
-
onOptionChange === null || onOptionChange === void 0 || onOptionChange(
|
|
77
|
+
onOptionChange === null || onOptionChange === void 0 || onOptionChange(optValue, formData);
|
|
64
78
|
}
|
|
65
|
-
}),
|
|
66
|
-
|
|
67
|
-
|
|
79
|
+
}), (0, _defaults.labelJsx)({
|
|
80
|
+
name: "".concat(name, "-").concat(idx),
|
|
81
|
+
label: optText
|
|
68
82
|
})]
|
|
69
83
|
}, idx);
|
|
70
84
|
})
|
|
@@ -76,7 +90,7 @@ CustomRadioGroup.propTypes = {
|
|
|
76
90
|
onOptionChange: _propTypes["default"].func,
|
|
77
91
|
formData: _propTypes["default"].object,
|
|
78
92
|
name: _propTypes["default"].string.isRequired,
|
|
79
|
-
|
|
93
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
80
94
|
value: _propTypes["default"].string,
|
|
81
95
|
options: _propTypes["default"].array.isRequired,
|
|
82
96
|
inline: _propTypes["default"].bool,
|
|
@@ -18,7 +18,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
18
18
|
handleResultSelect = _ref.handleResultSelect,
|
|
19
19
|
resultRenderer = _ref.resultRenderer,
|
|
20
20
|
name = _ref.name,
|
|
21
|
-
|
|
21
|
+
label = _ref.label,
|
|
22
22
|
_ref$value = _ref.value,
|
|
23
23
|
value = _ref$value === void 0 ? "" : _ref$value,
|
|
24
24
|
_ref$options = _ref.options,
|
|
@@ -51,11 +51,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
51
51
|
className: "ufg-field-group",
|
|
52
52
|
id: name,
|
|
53
53
|
style: mainDivStyle,
|
|
54
|
-
children: [(0, _defaults.labelJsx)(
|
|
54
|
+
children: [(0, _defaults.labelJsx)({
|
|
55
|
+
name: name,
|
|
56
|
+
labelStyle: labelStyle,
|
|
57
|
+
label: label,
|
|
58
|
+
required: required,
|
|
59
|
+
spanStyle: spanStyle,
|
|
60
|
+
showHelp: showHelp,
|
|
61
|
+
helpText: helpText
|
|
62
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Search, {
|
|
55
63
|
id: "form-input-".concat(name),
|
|
56
64
|
style: inputStyle,
|
|
57
65
|
loading: isLoading,
|
|
58
|
-
placeholder: placeholder ||
|
|
66
|
+
placeholder: placeholder || label,
|
|
59
67
|
value: value,
|
|
60
68
|
results: options,
|
|
61
69
|
resultRenderer: resultRenderer,
|
|
@@ -71,7 +79,7 @@ CustomSearch.propTypes = {
|
|
|
71
79
|
handleResultSelect: _propTypes["default"].func.isRequired,
|
|
72
80
|
resultRenderer: _propTypes["default"].func,
|
|
73
81
|
name: _propTypes["default"].string.isRequired,
|
|
74
|
-
|
|
82
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
75
83
|
value: _propTypes["default"].string,
|
|
76
84
|
options: _propTypes["default"].array.isRequired,
|
|
77
85
|
isLoading: _propTypes["default"].bool,
|
|
@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
18
18
|
var CustomTextArea = function CustomTextArea(_ref) {
|
|
19
19
|
var onChange = _ref.onChange,
|
|
20
20
|
name = _ref.name,
|
|
21
|
-
|
|
21
|
+
label = _ref.label,
|
|
22
22
|
_ref$value = _ref.value,
|
|
23
23
|
value = _ref$value === void 0 ? "" : _ref$value,
|
|
24
24
|
_ref$disabled = _ref.disabled,
|
|
@@ -53,11 +53,19 @@ var CustomTextArea = function CustomTextArea(_ref) {
|
|
|
53
53
|
className: "ufg-field-group",
|
|
54
54
|
id: name,
|
|
55
55
|
style: mainDivStyle,
|
|
56
|
-
children: [(0, _defaults.labelJsx)(
|
|
56
|
+
children: [(0, _defaults.labelJsx)({
|
|
57
|
+
name: name,
|
|
58
|
+
labelStyle: labelStyle,
|
|
59
|
+
label: label,
|
|
60
|
+
required: required,
|
|
61
|
+
spanStyle: spanStyle,
|
|
62
|
+
showHelp: showHelp,
|
|
63
|
+
helpText: helpText
|
|
64
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
|
|
57
65
|
id: "form-input-".concat(name),
|
|
58
66
|
name: name,
|
|
59
67
|
value: value,
|
|
60
|
-
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder :
|
|
68
|
+
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : label,
|
|
61
69
|
disabled: disabled,
|
|
62
70
|
required: required,
|
|
63
71
|
rows: rows,
|
|
@@ -72,7 +80,7 @@ var CustomTextArea = function CustomTextArea(_ref) {
|
|
|
72
80
|
CustomTextArea.propTypes = {
|
|
73
81
|
onChange: _propTypes["default"].func.isRequired,
|
|
74
82
|
name: _propTypes["default"].string.isRequired,
|
|
75
|
-
|
|
83
|
+
label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
|
|
76
84
|
value: _propTypes["default"].string,
|
|
77
85
|
disabled: _propTypes["default"].bool,
|
|
78
86
|
required: _propTypes["default"].bool,
|