@trackunit/custom-field-components 0.0.899 → 0.0.902
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/index.cjs.js +54 -57
- package/index.esm.js +51 -51
- package/package.json +6 -5
- package/src/CustomField.d.ts +0 -1
- package/src/DateCustomField.d.ts +0 -1
- package/src/translation.d.ts +1 -2
- package/translation.cjs.js +1 -1
- package/translation.cjs10.js +1 -1
- package/translation.cjs11.js +1 -1
- package/translation.cjs12.js +1 -1
- package/translation.cjs13.js +1 -1
- package/translation.cjs14.js +1 -1
- package/translation.cjs15.js +1 -1
- package/translation.cjs16.js +1 -1
- package/translation.cjs17.js +1 -1
- package/translation.cjs2.js +1 -1
- package/translation.cjs3.js +1 -1
- package/translation.cjs4.js +1 -1
- package/translation.cjs5.js +1 -1
- package/translation.cjs6.js +1 -1
- package/translation.cjs7.js +1 -1
- package/translation.cjs8.js +1 -1
- package/translation.cjs9.js +1 -1
package/index.cjs.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
|
|
7
5
|
var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
|
|
@@ -11,8 +9,7 @@ var React = require('react');
|
|
|
11
9
|
var reactHookForm = require('react-hook-form');
|
|
12
10
|
var uuid = require('uuid');
|
|
13
11
|
|
|
14
|
-
function
|
|
15
|
-
if (e && e.__esModule) return e;
|
|
12
|
+
function _interopNamespaceDefault(e) {
|
|
16
13
|
var n = Object.create(null);
|
|
17
14
|
if (e) {
|
|
18
15
|
Object.keys(e).forEach(function (k) {
|
|
@@ -25,11 +22,11 @@ function _interopNamespace(e) {
|
|
|
25
22
|
}
|
|
26
23
|
});
|
|
27
24
|
}
|
|
28
|
-
n
|
|
25
|
+
n.default = e;
|
|
29
26
|
return Object.freeze(n);
|
|
30
27
|
}
|
|
31
28
|
|
|
32
|
-
var React__namespace = /*#__PURE__*/
|
|
29
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
33
30
|
|
|
34
31
|
var defaultTranslations = {
|
|
35
32
|
"customfield.unit.ACRE": "acre",
|
|
@@ -139,46 +136,13 @@ const setupLibraryTranslations = () => {
|
|
|
139
136
|
i18nLibraryTranslation.registerTranslations(translations);
|
|
140
137
|
};
|
|
141
138
|
|
|
142
|
-
/******************************************************************************
|
|
143
|
-
Copyright (c) Microsoft Corporation.
|
|
144
|
-
|
|
145
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
146
|
-
purpose with or without fee is hereby granted.
|
|
147
|
-
|
|
148
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
149
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
150
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
151
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
152
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
153
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
154
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
155
|
-
***************************************************************************** */
|
|
156
|
-
|
|
157
|
-
function __rest(s, e) {
|
|
158
|
-
var t = {};
|
|
159
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
160
|
-
t[p] = s[p];
|
|
161
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
162
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
163
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
164
|
-
t[p[i]] = s[p[i]];
|
|
165
|
-
}
|
|
166
|
-
return t;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
170
|
-
var e = new Error(message);
|
|
171
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
172
|
-
};
|
|
173
|
-
|
|
174
139
|
/**
|
|
175
140
|
* A component that can be used to render a boolean field
|
|
176
141
|
*
|
|
177
142
|
* @param options BooleanCustomFieldProps - options for the component
|
|
178
143
|
* @returns { JSX.Element } JSX.Element - a component that can be used to render a boolean field
|
|
179
144
|
*/
|
|
180
|
-
const BooleanCustomField = (
|
|
181
|
-
var { defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText } = _a, rest = __rest(_a, ["defaultValue", "dataTestId", "onChange", "value", "id", "setValue", "register", "validationRules", "disabled", "label", "tip", "isInvalid", "errorMessage", "helpAddon", "maxLength", "helpText"]);
|
|
145
|
+
const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }) => {
|
|
182
146
|
const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
|
|
183
147
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
184
148
|
const htmlForId = id ? id : "boolean-custom-field-" + uuid.v4();
|
|
@@ -195,10 +159,10 @@ const BooleanCustomField = (_a) => {
|
|
|
195
159
|
setInternalValue(isChecked);
|
|
196
160
|
}, [setInternalValue, onChange, id, setValue]);
|
|
197
161
|
React__namespace.useEffect(() => {
|
|
198
|
-
register && register(id,
|
|
162
|
+
register && register(id, { ...validationRules, value: internalValue.toString() });
|
|
199
163
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
200
164
|
}, []); // register only once
|
|
201
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.Checkbox,
|
|
165
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: internalValue, dataTestId: dataTestId, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, name: id, onChange: event => (!rest.readOnly ? onChangeHandler(event) : null), ...rest }) }));
|
|
202
166
|
};
|
|
203
167
|
|
|
204
168
|
/**
|
|
@@ -208,7 +172,7 @@ const BooleanCustomField = (_a) => {
|
|
|
208
172
|
* @returns { JSX.Element } JSX.Element - a component that can be used to render a date field
|
|
209
173
|
*/
|
|
210
174
|
const DateCustomField = (props) => {
|
|
211
|
-
const { setValue, defaultValue, register, id, validationRules
|
|
175
|
+
const { setValue, defaultValue, register, id, validationRules, ...rest } = props;
|
|
212
176
|
const onChangeHandler = React.useCallback((e) => {
|
|
213
177
|
var _a;
|
|
214
178
|
setValue &&
|
|
@@ -219,9 +183,9 @@ const DateCustomField = (props) => {
|
|
|
219
183
|
}, [setValue, id]);
|
|
220
184
|
React.useEffect(() => {
|
|
221
185
|
const value = defaultValue && new Date(defaultValue);
|
|
222
|
-
register && register(id,
|
|
186
|
+
register && register(id, { ...validationRules, value });
|
|
223
187
|
}, [register, validationRules, defaultValue, id]);
|
|
224
|
-
return (React.createElement(reactFormComponents.DateField,
|
|
188
|
+
return (React.createElement(reactFormComponents.DateField, { ...rest, defaultValue: defaultValue, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, id: id, key: id, label: props.title, onChange: onChangeHandler }));
|
|
225
189
|
};
|
|
226
190
|
|
|
227
191
|
const convertToValueFormat = (value) => {
|
|
@@ -259,7 +223,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
259
223
|
return allValues ? allValues.map(convertToValueFormat) : [];
|
|
260
224
|
}, [allValues]);
|
|
261
225
|
React__namespace.useEffect(() => {
|
|
262
|
-
register && register(id,
|
|
226
|
+
register && register(id, { ...validationRules, value: selectedValue });
|
|
263
227
|
}, [register, validationRules, selectedValue, id]);
|
|
264
228
|
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.Select, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
|
|
265
229
|
};
|
|
@@ -279,7 +243,11 @@ const getWebAddressValidationRules = (definition) => {
|
|
|
279
243
|
},
|
|
280
244
|
};
|
|
281
245
|
return definition.uiEditable
|
|
282
|
-
?
|
|
246
|
+
? {
|
|
247
|
+
...pattern,
|
|
248
|
+
...defaultRules,
|
|
249
|
+
}
|
|
250
|
+
: defaultRules;
|
|
283
251
|
};
|
|
284
252
|
/**
|
|
285
253
|
* Generates validation rules for a number field.
|
|
@@ -303,7 +271,12 @@ const getNumberValidationRules = (definition) => {
|
|
|
303
271
|
};
|
|
304
272
|
// TODO: Validate if integer if definition requires integer
|
|
305
273
|
return definition.uiEditable
|
|
306
|
-
?
|
|
274
|
+
? {
|
|
275
|
+
...maximum,
|
|
276
|
+
...minimum,
|
|
277
|
+
...defaultRules,
|
|
278
|
+
}
|
|
279
|
+
: defaultRules;
|
|
307
280
|
};
|
|
308
281
|
/**
|
|
309
282
|
* Generates validation rules for a string field.
|
|
@@ -342,7 +315,13 @@ const getStringValidationRules = (definition) => {
|
|
|
342
315
|
}
|
|
343
316
|
: undefined;
|
|
344
317
|
return definition.uiEditable
|
|
345
|
-
?
|
|
318
|
+
? {
|
|
319
|
+
...maxLength,
|
|
320
|
+
...minLength,
|
|
321
|
+
...pattern,
|
|
322
|
+
...defaultRules,
|
|
323
|
+
}
|
|
324
|
+
: defaultRules;
|
|
346
325
|
};
|
|
347
326
|
/**
|
|
348
327
|
* Generates validation rules by default for any type of field
|
|
@@ -396,7 +375,11 @@ const getEmailValidationRules = (definition) => {
|
|
|
396
375
|
},
|
|
397
376
|
};
|
|
398
377
|
return definition.uiEditable
|
|
399
|
-
?
|
|
378
|
+
? {
|
|
379
|
+
...pattern,
|
|
380
|
+
...defaultRules,
|
|
381
|
+
}
|
|
382
|
+
: defaultRules;
|
|
400
383
|
};
|
|
401
384
|
|
|
402
385
|
/**
|
|
@@ -453,19 +436,30 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
453
436
|
switch (def.__typename) {
|
|
454
437
|
case "WebAddressFieldDefinition": {
|
|
455
438
|
const rules = getWebAddressValidationRules(def);
|
|
456
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField,
|
|
439
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
440
|
+
...rules,
|
|
441
|
+
value,
|
|
442
|
+
}) }));
|
|
457
443
|
}
|
|
458
444
|
case "EmailFieldDefinition": {
|
|
459
445
|
const rules = getEmailValidationRules(def);
|
|
460
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField,
|
|
446
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }) : null, dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
447
|
+
...rules,
|
|
448
|
+
value,
|
|
449
|
+
}) }));
|
|
461
450
|
}
|
|
462
451
|
case "PhoneNumberFieldDefinition": {
|
|
463
452
|
const rules = getPhoneNumberValidationRules(!def.uiEditable);
|
|
464
|
-
return (jsxRuntime.jsx(reactFormComponents.PhoneField,
|
|
453
|
+
return (jsxRuntime.jsx(reactFormComponents.PhoneField, { dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value, ...validation.register(uniqueIdentifier, {
|
|
454
|
+
...rules,
|
|
455
|
+
}) }));
|
|
465
456
|
}
|
|
466
457
|
case "StringFieldDefinition": {
|
|
467
458
|
const rules = getStringValidationRules(def);
|
|
468
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField,
|
|
459
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
460
|
+
...rules,
|
|
461
|
+
value,
|
|
462
|
+
}) }));
|
|
469
463
|
}
|
|
470
464
|
case "NumberFieldDefinition": {
|
|
471
465
|
const rules = getNumberValidationRules(def);
|
|
@@ -474,7 +468,10 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
474
468
|
placeholder: title !== null && title !== void 0 ? title : "",
|
|
475
469
|
addonAfter: unitTranslation(unit),
|
|
476
470
|
};
|
|
477
|
-
return (jsxRuntime.jsx(reactFormComponents.NumberField,
|
|
471
|
+
return (jsxRuntime.jsx(reactFormComponents.NumberField, { dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_e = def.maximumNumber) !== null && _e !== void 0 ? _e : undefined, min: (_f = def.minimumNumber) !== null && _f !== void 0 ? _f : undefined, readOnly: !isEditableCombined, step: def.isInteger ? 1 : "any", ...validation.register(uniqueIdentifier, {
|
|
472
|
+
...rules,
|
|
473
|
+
value,
|
|
474
|
+
}), ...numberProps }));
|
|
478
475
|
}
|
|
479
476
|
case "BooleanFieldDefinition": {
|
|
480
477
|
const rules = getBooleanValidationRules();
|
|
@@ -497,10 +494,10 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
497
494
|
placeholder: title !== null && title !== void 0 ? title : "",
|
|
498
495
|
addonAfter: def.currency,
|
|
499
496
|
};
|
|
500
|
-
return (jsxRuntime.jsx(reactFormComponents.NumberField,
|
|
497
|
+
return (jsxRuntime.jsx(reactFormComponents.NumberField, { dataTestId: key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_j = def.maximumNumber) !== null && _j !== void 0 ? _j : undefined, min: (_k = def.minimumNumber) !== null && _k !== void 0 ? _k : undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, rules), onChange: e => {
|
|
501
498
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
502
499
|
validation.register(uniqueIdentifier, rules).onChange(e);
|
|
503
|
-
}
|
|
500
|
+
}, ...numberProps }));
|
|
504
501
|
}
|
|
505
502
|
default:
|
|
506
503
|
return sharedUtils.exhaustiveCheck(def);
|
package/index.esm.js
CHANGED
|
@@ -116,46 +116,13 @@ const setupLibraryTranslations = () => {
|
|
|
116
116
|
registerTranslations(translations);
|
|
117
117
|
};
|
|
118
118
|
|
|
119
|
-
/******************************************************************************
|
|
120
|
-
Copyright (c) Microsoft Corporation.
|
|
121
|
-
|
|
122
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
123
|
-
purpose with or without fee is hereby granted.
|
|
124
|
-
|
|
125
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
126
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
127
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
128
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
129
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
130
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
131
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
132
|
-
***************************************************************************** */
|
|
133
|
-
|
|
134
|
-
function __rest(s, e) {
|
|
135
|
-
var t = {};
|
|
136
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
137
|
-
t[p] = s[p];
|
|
138
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
139
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
140
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
141
|
-
t[p[i]] = s[p[i]];
|
|
142
|
-
}
|
|
143
|
-
return t;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
147
|
-
var e = new Error(message);
|
|
148
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
149
|
-
};
|
|
150
|
-
|
|
151
119
|
/**
|
|
152
120
|
* A component that can be used to render a boolean field
|
|
153
121
|
*
|
|
154
122
|
* @param options BooleanCustomFieldProps - options for the component
|
|
155
123
|
* @returns { JSX.Element } JSX.Element - a component that can be used to render a boolean field
|
|
156
124
|
*/
|
|
157
|
-
const BooleanCustomField = (
|
|
158
|
-
var { defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText } = _a, rest = __rest(_a, ["defaultValue", "dataTestId", "onChange", "value", "id", "setValue", "register", "validationRules", "disabled", "label", "tip", "isInvalid", "errorMessage", "helpAddon", "maxLength", "helpText"]);
|
|
125
|
+
const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }) => {
|
|
159
126
|
const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
|
|
160
127
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
161
128
|
const htmlForId = id ? id : "boolean-custom-field-" + v4();
|
|
@@ -172,10 +139,10 @@ const BooleanCustomField = (_a) => {
|
|
|
172
139
|
setInternalValue(isChecked);
|
|
173
140
|
}, [setInternalValue, onChange, id, setValue]);
|
|
174
141
|
React.useEffect(() => {
|
|
175
|
-
register && register(id,
|
|
142
|
+
register && register(id, { ...validationRules, value: internalValue.toString() });
|
|
176
143
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
177
144
|
}, []); // register only once
|
|
178
|
-
return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(Checkbox,
|
|
145
|
+
return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(Checkbox, { checked: internalValue, dataTestId: dataTestId, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, name: id, onChange: event => (!rest.readOnly ? onChangeHandler(event) : null), ...rest }) }));
|
|
179
146
|
};
|
|
180
147
|
|
|
181
148
|
/**
|
|
@@ -185,7 +152,7 @@ const BooleanCustomField = (_a) => {
|
|
|
185
152
|
* @returns { JSX.Element } JSX.Element - a component that can be used to render a date field
|
|
186
153
|
*/
|
|
187
154
|
const DateCustomField = (props) => {
|
|
188
|
-
const { setValue, defaultValue, register, id, validationRules
|
|
155
|
+
const { setValue, defaultValue, register, id, validationRules, ...rest } = props;
|
|
189
156
|
const onChangeHandler = useCallback((e) => {
|
|
190
157
|
var _a;
|
|
191
158
|
setValue &&
|
|
@@ -196,9 +163,9 @@ const DateCustomField = (props) => {
|
|
|
196
163
|
}, [setValue, id]);
|
|
197
164
|
useEffect(() => {
|
|
198
165
|
const value = defaultValue && new Date(defaultValue);
|
|
199
|
-
register && register(id,
|
|
166
|
+
register && register(id, { ...validationRules, value });
|
|
200
167
|
}, [register, validationRules, defaultValue, id]);
|
|
201
|
-
return (createElement(DateField,
|
|
168
|
+
return (createElement(DateField, { ...rest, defaultValue: defaultValue, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, id: id, key: id, label: props.title, onChange: onChangeHandler }));
|
|
202
169
|
};
|
|
203
170
|
|
|
204
171
|
const convertToValueFormat = (value) => {
|
|
@@ -236,7 +203,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
236
203
|
return allValues ? allValues.map(convertToValueFormat) : [];
|
|
237
204
|
}, [allValues]);
|
|
238
205
|
React.useEffect(() => {
|
|
239
|
-
register && register(id,
|
|
206
|
+
register && register(id, { ...validationRules, value: selectedValue });
|
|
240
207
|
}, [register, validationRules, selectedValue, id]);
|
|
241
208
|
return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(Select, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
|
|
242
209
|
};
|
|
@@ -256,7 +223,11 @@ const getWebAddressValidationRules = (definition) => {
|
|
|
256
223
|
},
|
|
257
224
|
};
|
|
258
225
|
return definition.uiEditable
|
|
259
|
-
?
|
|
226
|
+
? {
|
|
227
|
+
...pattern,
|
|
228
|
+
...defaultRules,
|
|
229
|
+
}
|
|
230
|
+
: defaultRules;
|
|
260
231
|
};
|
|
261
232
|
/**
|
|
262
233
|
* Generates validation rules for a number field.
|
|
@@ -280,7 +251,12 @@ const getNumberValidationRules = (definition) => {
|
|
|
280
251
|
};
|
|
281
252
|
// TODO: Validate if integer if definition requires integer
|
|
282
253
|
return definition.uiEditable
|
|
283
|
-
?
|
|
254
|
+
? {
|
|
255
|
+
...maximum,
|
|
256
|
+
...minimum,
|
|
257
|
+
...defaultRules,
|
|
258
|
+
}
|
|
259
|
+
: defaultRules;
|
|
284
260
|
};
|
|
285
261
|
/**
|
|
286
262
|
* Generates validation rules for a string field.
|
|
@@ -319,7 +295,13 @@ const getStringValidationRules = (definition) => {
|
|
|
319
295
|
}
|
|
320
296
|
: undefined;
|
|
321
297
|
return definition.uiEditable
|
|
322
|
-
?
|
|
298
|
+
? {
|
|
299
|
+
...maxLength,
|
|
300
|
+
...minLength,
|
|
301
|
+
...pattern,
|
|
302
|
+
...defaultRules,
|
|
303
|
+
}
|
|
304
|
+
: defaultRules;
|
|
323
305
|
};
|
|
324
306
|
/**
|
|
325
307
|
* Generates validation rules by default for any type of field
|
|
@@ -373,7 +355,11 @@ const getEmailValidationRules = (definition) => {
|
|
|
373
355
|
},
|
|
374
356
|
};
|
|
375
357
|
return definition.uiEditable
|
|
376
|
-
?
|
|
358
|
+
? {
|
|
359
|
+
...pattern,
|
|
360
|
+
...defaultRules,
|
|
361
|
+
}
|
|
362
|
+
: defaultRules;
|
|
377
363
|
};
|
|
378
364
|
|
|
379
365
|
/**
|
|
@@ -430,19 +416,30 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
430
416
|
switch (def.__typename) {
|
|
431
417
|
case "WebAddressFieldDefinition": {
|
|
432
418
|
const rules = getWebAddressValidationRules(def);
|
|
433
|
-
return (jsx(TextField,
|
|
419
|
+
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
420
|
+
...rules,
|
|
421
|
+
value,
|
|
422
|
+
}) }));
|
|
434
423
|
}
|
|
435
424
|
case "EmailFieldDefinition": {
|
|
436
425
|
const rules = getEmailValidationRules(def);
|
|
437
|
-
return (jsx(TextField,
|
|
426
|
+
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "EMAIL", value: formValue }) : null, dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
427
|
+
...rules,
|
|
428
|
+
value,
|
|
429
|
+
}) }));
|
|
438
430
|
}
|
|
439
431
|
case "PhoneNumberFieldDefinition": {
|
|
440
432
|
const rules = getPhoneNumberValidationRules(!def.uiEditable);
|
|
441
|
-
return (jsx(PhoneField,
|
|
433
|
+
return (jsx(PhoneField, { dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value, ...validation.register(uniqueIdentifier, {
|
|
434
|
+
...rules,
|
|
435
|
+
}) }));
|
|
442
436
|
}
|
|
443
437
|
case "StringFieldDefinition": {
|
|
444
438
|
const rules = getStringValidationRules(def);
|
|
445
|
-
return (jsx(TextField,
|
|
439
|
+
return (jsx(TextField, { dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
440
|
+
...rules,
|
|
441
|
+
value,
|
|
442
|
+
}) }));
|
|
446
443
|
}
|
|
447
444
|
case "NumberFieldDefinition": {
|
|
448
445
|
const rules = getNumberValidationRules(def);
|
|
@@ -451,7 +448,10 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
451
448
|
placeholder: title !== null && title !== void 0 ? title : "",
|
|
452
449
|
addonAfter: unitTranslation(unit),
|
|
453
450
|
};
|
|
454
|
-
return (jsx(NumberField,
|
|
451
|
+
return (jsx(NumberField, { dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_e = def.maximumNumber) !== null && _e !== void 0 ? _e : undefined, min: (_f = def.minimumNumber) !== null && _f !== void 0 ? _f : undefined, readOnly: !isEditableCombined, step: def.isInteger ? 1 : "any", ...validation.register(uniqueIdentifier, {
|
|
452
|
+
...rules,
|
|
453
|
+
value,
|
|
454
|
+
}), ...numberProps }));
|
|
455
455
|
}
|
|
456
456
|
case "BooleanFieldDefinition": {
|
|
457
457
|
const rules = getBooleanValidationRules();
|
|
@@ -474,10 +474,10 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
474
474
|
placeholder: title !== null && title !== void 0 ? title : "",
|
|
475
475
|
addonAfter: def.currency,
|
|
476
476
|
};
|
|
477
|
-
return (jsx(NumberField,
|
|
477
|
+
return (jsx(NumberField, { dataTestId: key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_j = def.maximumNumber) !== null && _j !== void 0 ? _j : undefined, min: (_k = def.minimumNumber) !== null && _k !== void 0 ? _k : undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, rules), onChange: e => {
|
|
478
478
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
479
479
|
validation.register(uniqueIdentifier, rules).onChange(e);
|
|
480
|
-
}
|
|
480
|
+
}, ...numberProps }));
|
|
481
481
|
}
|
|
482
482
|
default:
|
|
483
483
|
return exhaustiveCheck(def);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/custom-field-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.902",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@trackunit/react-form-components": "*",
|
|
11
|
-
"react": "
|
|
11
|
+
"react": "18.3.1",
|
|
12
12
|
"react-hook-form": "7.40.0",
|
|
13
13
|
"@trackunit/custom-field-api": "*",
|
|
14
14
|
"@trackunit/shared-utils": "*",
|
|
@@ -16,10 +16,11 @@
|
|
|
16
16
|
"@trackunit/iris-app-runtime-core": "*",
|
|
17
17
|
"@trackunit/iris-app-runtime-core-api": "*",
|
|
18
18
|
"react-select": "^5.8.0",
|
|
19
|
-
"@testing-library/react": "
|
|
19
|
+
"@testing-library/react": "15.0.6",
|
|
20
20
|
"jest-fetch-mock": "^3.0.3",
|
|
21
21
|
"@trackunit/i18n-library-translation": "*"
|
|
22
22
|
},
|
|
23
23
|
"module": "./index.esm.js",
|
|
24
|
-
"main": "./index.cjs.js"
|
|
25
|
-
|
|
24
|
+
"main": "./index.cjs.js",
|
|
25
|
+
"types": "./index.esm.d.ts"
|
|
26
|
+
}
|
package/src/CustomField.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { CustomFieldDefinition, CustomFieldValueAndDefinition } from "@trackunit/custom-field-api";
|
|
3
2
|
import { Control, FieldValues, FormState, UseFormRegister, UseFormSetValue } from "react-hook-form";
|
|
4
3
|
import { UnitPreference } from "./UnitPreference";
|
package/src/DateCustomField.d.ts
CHANGED
package/src/translation.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
|
|
3
2
|
import defaultTranslations from "./locales/en/translation.json";
|
|
4
3
|
/** A type for all available translation keys in this library */
|
|
@@ -27,7 +26,7 @@ export type TranslationFunction = TransForLibs<TranslationKeys>;
|
|
|
27
26
|
/**
|
|
28
27
|
* Trans for this specific library.
|
|
29
28
|
*/
|
|
30
|
-
export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => JSX.Element;
|
|
29
|
+
export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => import("react/jsx-runtime").JSX.Element;
|
|
31
30
|
/**
|
|
32
31
|
* Registers the translations for this library
|
|
33
32
|
*/
|
package/translation.cjs.js
CHANGED
package/translation.cjs10.js
CHANGED
package/translation.cjs11.js
CHANGED
package/translation.cjs12.js
CHANGED
package/translation.cjs13.js
CHANGED
package/translation.cjs14.js
CHANGED
package/translation.cjs15.js
CHANGED
package/translation.cjs16.js
CHANGED
package/translation.cjs17.js
CHANGED
package/translation.cjs2.js
CHANGED
package/translation.cjs3.js
CHANGED
package/translation.cjs4.js
CHANGED
package/translation.cjs5.js
CHANGED
package/translation.cjs6.js
CHANGED
package/translation.cjs7.js
CHANGED
package/translation.cjs8.js
CHANGED
package/translation.cjs9.js
CHANGED