@trackunit/custom-field-components 0.0.669 → 0.0.672
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 +18 -11
- package/index.esm.js +18 -11
- package/package.json +1 -1
- package/src/CustomField.d.ts +5 -1
package/index.cjs.js
CHANGED
|
@@ -183,9 +183,13 @@ const BooleanCustomField = (_a) => {
|
|
|
183
183
|
const DateCustomField = (props) => {
|
|
184
184
|
const { setValue, defaultValue, register, id, validationRules } = props, rest = __rest(props, ["setValue", "defaultValue", "register", "id", "validationRules"]);
|
|
185
185
|
const onChangeHandler = React.useCallback((e) => {
|
|
186
|
-
var _a, _b
|
|
187
|
-
if (
|
|
188
|
-
setValue &&
|
|
186
|
+
var _a, _b;
|
|
187
|
+
if (e.target) {
|
|
188
|
+
setValue &&
|
|
189
|
+
setValue(id, (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.valueAsDate) === null || _b === void 0 ? void 0 : _b.toISOString(), {
|
|
190
|
+
shouldDirty: true,
|
|
191
|
+
shouldValidate: true,
|
|
192
|
+
});
|
|
189
193
|
}
|
|
190
194
|
}, [setValue, id]);
|
|
191
195
|
React.useEffect(() => {
|
|
@@ -212,7 +216,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
212
216
|
if (selected) {
|
|
213
217
|
const values = Array.isArray(selected) ? selected : [selected];
|
|
214
218
|
setSelectedValue(values);
|
|
215
|
-
setValue && setValue(id, values);
|
|
219
|
+
setValue && setValue(id, values, { shouldDirty: true, shouldValidate: true });
|
|
216
220
|
}
|
|
217
221
|
else {
|
|
218
222
|
setSelectedValue([]);
|
|
@@ -395,7 +399,7 @@ const useUnitTranslation = () => {
|
|
|
395
399
|
* and functions for form registration and state management.
|
|
396
400
|
* @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
|
|
397
401
|
*/
|
|
398
|
-
const useCustomFieldResolver = ({ field, register, setValue, formState, unitPreference = "SI", language, fieldId, isEditable, }) => {
|
|
402
|
+
const useCustomFieldResolver = ({ field, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
|
|
399
403
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
400
404
|
const validation = { register, setValue, formState };
|
|
401
405
|
const { unitTranslation } = useUnitTranslation();
|
|
@@ -425,24 +429,27 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
425
429
|
case "WebAddressFieldValueAndDefinition": {
|
|
426
430
|
const value = field.stringValue;
|
|
427
431
|
const rules = getWebAddressValidationRules(field.definition);
|
|
428
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined &&
|
|
432
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
|
|
429
433
|
}
|
|
430
434
|
case "EmailFieldValueAndDefinition": {
|
|
431
435
|
const value = field.stringValue;
|
|
432
436
|
const rules = getEmailValidationRules(field.definition);
|
|
433
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined &&
|
|
437
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
|
|
434
438
|
}
|
|
435
439
|
case "PhoneNumberFieldValueAndDefinition": {
|
|
436
440
|
const value = field.stringValue;
|
|
437
441
|
const rules = getPhoneNumberValidationRules(field.definition);
|
|
438
|
-
return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${field.definition.key}`,
|
|
439
|
-
validation.setValue(key, props.phone
|
|
442
|
+
return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
|
|
443
|
+
validation.setValue(key, props.phone, {
|
|
444
|
+
shouldDirty: true,
|
|
445
|
+
shouldValidate: true,
|
|
446
|
+
});
|
|
440
447
|
} })));
|
|
441
448
|
}
|
|
442
449
|
case "StringFieldValueAndDefinition": {
|
|
443
450
|
const value = field.stringValue;
|
|
444
451
|
const rules = getStringValidationRules(field.definition);
|
|
445
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${field.definition.key}`,
|
|
452
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
|
|
446
453
|
}
|
|
447
454
|
case "NumberFieldValueAndDefinition": {
|
|
448
455
|
const value = field.numberValue;
|
|
@@ -454,7 +461,7 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
454
461
|
placeholder: title !== null && title !== void 0 ? title : "",
|
|
455
462
|
addonAfter: unitTranslation(unit),
|
|
456
463
|
};
|
|
457
|
-
return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${field.definition.key}`,
|
|
464
|
+
return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), numberProps)));
|
|
458
465
|
}
|
|
459
466
|
case "BooleanFieldValueAndDefinition": {
|
|
460
467
|
const value = field.booleanValue;
|
package/index.esm.js
CHANGED
|
@@ -160,9 +160,13 @@ const BooleanCustomField = (_a) => {
|
|
|
160
160
|
const DateCustomField = (props) => {
|
|
161
161
|
const { setValue, defaultValue, register, id, validationRules } = props, rest = __rest(props, ["setValue", "defaultValue", "register", "id", "validationRules"]);
|
|
162
162
|
const onChangeHandler = useCallback((e) => {
|
|
163
|
-
var _a, _b
|
|
164
|
-
if (
|
|
165
|
-
setValue &&
|
|
163
|
+
var _a, _b;
|
|
164
|
+
if (e.target) {
|
|
165
|
+
setValue &&
|
|
166
|
+
setValue(id, (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.valueAsDate) === null || _b === void 0 ? void 0 : _b.toISOString(), {
|
|
167
|
+
shouldDirty: true,
|
|
168
|
+
shouldValidate: true,
|
|
169
|
+
});
|
|
166
170
|
}
|
|
167
171
|
}, [setValue, id]);
|
|
168
172
|
useEffect(() => {
|
|
@@ -189,7 +193,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
189
193
|
if (selected) {
|
|
190
194
|
const values = Array.isArray(selected) ? selected : [selected];
|
|
191
195
|
setSelectedValue(values);
|
|
192
|
-
setValue && setValue(id, values);
|
|
196
|
+
setValue && setValue(id, values, { shouldDirty: true, shouldValidate: true });
|
|
193
197
|
}
|
|
194
198
|
else {
|
|
195
199
|
setSelectedValue([]);
|
|
@@ -372,7 +376,7 @@ const useUnitTranslation = () => {
|
|
|
372
376
|
* and functions for form registration and state management.
|
|
373
377
|
* @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
|
|
374
378
|
*/
|
|
375
|
-
const useCustomFieldResolver = ({ field, register, setValue, formState, unitPreference = "SI", language, fieldId, isEditable, }) => {
|
|
379
|
+
const useCustomFieldResolver = ({ field, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
|
|
376
380
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
377
381
|
const validation = { register, setValue, formState };
|
|
378
382
|
const { unitTranslation } = useUnitTranslation();
|
|
@@ -402,24 +406,27 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
402
406
|
case "WebAddressFieldValueAndDefinition": {
|
|
403
407
|
const value = field.stringValue;
|
|
404
408
|
const rules = getWebAddressValidationRules(field.definition);
|
|
405
|
-
return (jsx(TextField, Object.assign({ actions: !isEditableCombined &&
|
|
409
|
+
return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
|
|
406
410
|
}
|
|
407
411
|
case "EmailFieldValueAndDefinition": {
|
|
408
412
|
const value = field.stringValue;
|
|
409
413
|
const rules = getEmailValidationRules(field.definition);
|
|
410
|
-
return (jsx(TextField, Object.assign({ actions: !isEditableCombined &&
|
|
414
|
+
return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
|
|
411
415
|
}
|
|
412
416
|
case "PhoneNumberFieldValueAndDefinition": {
|
|
413
417
|
const value = field.stringValue;
|
|
414
418
|
const rules = getPhoneNumberValidationRules(field.definition);
|
|
415
|
-
return (jsx(PhoneField, Object.assign({ dataTestId: `${field.definition.key}`,
|
|
416
|
-
validation.setValue(key, props.phone
|
|
419
|
+
return (jsx(PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
|
|
420
|
+
validation.setValue(key, props.phone, {
|
|
421
|
+
shouldDirty: true,
|
|
422
|
+
shouldValidate: true,
|
|
423
|
+
});
|
|
417
424
|
} })));
|
|
418
425
|
}
|
|
419
426
|
case "StringFieldValueAndDefinition": {
|
|
420
427
|
const value = field.stringValue;
|
|
421
428
|
const rules = getStringValidationRules(field.definition);
|
|
422
|
-
return (jsx(TextField, Object.assign({ dataTestId: `${field.definition.key}`,
|
|
429
|
+
return (jsx(TextField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
|
|
423
430
|
}
|
|
424
431
|
case "NumberFieldValueAndDefinition": {
|
|
425
432
|
const value = field.numberValue;
|
|
@@ -431,7 +438,7 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
431
438
|
placeholder: title !== null && title !== void 0 ? title : "",
|
|
432
439
|
addonAfter: unitTranslation(unit),
|
|
433
440
|
};
|
|
434
|
-
return (jsx(NumberField, Object.assign({ dataTestId: `${field.definition.key}`,
|
|
441
|
+
return (jsx(NumberField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), numberProps)));
|
|
435
442
|
}
|
|
436
443
|
case "BooleanFieldValueAndDefinition": {
|
|
437
444
|
const value = field.booleanValue;
|
package/package.json
CHANGED
package/src/CustomField.d.ts
CHANGED
|
@@ -19,6 +19,10 @@ interface CustomFieldProps {
|
|
|
19
19
|
* The current state of the form from react-hook-form, including any validation errors.
|
|
20
20
|
*/
|
|
21
21
|
formState: FormState<FieldValues>;
|
|
22
|
+
/**
|
|
23
|
+
* The current value of the form field.
|
|
24
|
+
*/
|
|
25
|
+
formValue?: string;
|
|
22
26
|
/**
|
|
23
27
|
* A function from react-hook-form to update the value of a registered field.
|
|
24
28
|
*/
|
|
@@ -49,7 +53,7 @@ interface CustomFieldProps {
|
|
|
49
53
|
* and functions for form registration and state management.
|
|
50
54
|
* @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
|
|
51
55
|
*/
|
|
52
|
-
export declare const useCustomFieldResolver: ({ field, register, setValue, formState, unitPreference, language, fieldId, isEditable, }: CustomFieldProps) => JSX.Element | null;
|
|
56
|
+
export declare const useCustomFieldResolver: ({ field, register, setValue, formState, formValue, unitPreference, language, fieldId, isEditable, }: CustomFieldProps) => JSX.Element | null;
|
|
53
57
|
/**
|
|
54
58
|
* CustomField is a React component that takes in the properties of a custom field and renders it.
|
|
55
59
|
* It utilizes the `useCustomFieldResolver` hook to resolve the field into an input element
|