@trackunit/custom-field-components 0.0.658 → 0.0.659
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 +12 -12
- package/index.esm.js +12 -12
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -171,7 +171,7 @@ const BooleanCustomField = (_a) => {
|
|
|
171
171
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: internalValue.toString() }));
|
|
172
172
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
173
173
|
}, []); // register only once
|
|
174
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, {
|
|
174
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, name: id, onChange: event => (!rest.readOnly ? onChangeHandler(event) : null) }, rest)) }));
|
|
175
175
|
};
|
|
176
176
|
|
|
177
177
|
/**
|
|
@@ -192,7 +192,7 @@ const DateCustomField = (props) => {
|
|
|
192
192
|
const value = defaultValue && new Date(defaultValue);
|
|
193
193
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value }));
|
|
194
194
|
}, [register, validationRules, defaultValue, id]);
|
|
195
|
-
return (React.createElement(reactFormComponents.DateField, Object.assign({}, rest, {
|
|
195
|
+
return (React.createElement(reactFormComponents.DateField, Object.assign({}, rest, { defaultValue: defaultValue, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, id: id, key: id, label: props.title, onChange: onChangeHandler })));
|
|
196
196
|
};
|
|
197
197
|
|
|
198
198
|
const convertToValueFormat = (value) => {
|
|
@@ -225,7 +225,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
225
225
|
React__namespace.useEffect(() => {
|
|
226
226
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: selectedValue }));
|
|
227
227
|
}, [register, validationRules, selectedValue, id]);
|
|
228
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, {
|
|
228
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, 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 }) }));
|
|
229
229
|
};
|
|
230
230
|
|
|
231
231
|
/**
|
|
@@ -425,24 +425,24 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
425
425
|
case "WebAddressFieldValueAndDefinition": {
|
|
426
426
|
const value = field.stringValue;
|
|
427
427
|
const rules = getWebAddressValidationRules(field.definition);
|
|
428
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({
|
|
428
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && value && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: value }), dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
|
|
429
429
|
}
|
|
430
430
|
case "EmailFieldValueAndDefinition": {
|
|
431
431
|
const value = field.stringValue;
|
|
432
432
|
const rules = getEmailValidationRules(field.definition);
|
|
433
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({
|
|
433
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && value && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: value }), dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
|
|
434
434
|
}
|
|
435
435
|
case "PhoneNumberFieldValueAndDefinition": {
|
|
436
436
|
const value = field.stringValue;
|
|
437
437
|
const rules = getPhoneNumberValidationRules(field.definition);
|
|
438
|
-
return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({
|
|
438
|
+
return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", 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, rules), { onChangeValue: props => {
|
|
439
439
|
validation.setValue(key, props.phone);
|
|
440
440
|
} })));
|
|
441
441
|
}
|
|
442
442
|
case "StringFieldValueAndDefinition": {
|
|
443
443
|
const value = field.stringValue;
|
|
444
444
|
const rules = getStringValidationRules(field.definition);
|
|
445
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({
|
|
445
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
|
|
446
446
|
}
|
|
447
447
|
case "NumberFieldValueAndDefinition": {
|
|
448
448
|
const value = field.numberValue;
|
|
@@ -454,17 +454,17 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
454
454
|
placeholder: title !== null && title !== void 0 ? title : "",
|
|
455
455
|
addonAfter: unitTranslation(unit),
|
|
456
456
|
};
|
|
457
|
-
return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({
|
|
457
|
+
return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", 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, rules), numberProps)));
|
|
458
458
|
}
|
|
459
459
|
case "BooleanFieldValueAndDefinition": {
|
|
460
460
|
const value = field.booleanValue;
|
|
461
461
|
const rules = getBooleanValidationRules(field.definition);
|
|
462
|
-
return (jsxRuntime.jsx(BooleanCustomField, {
|
|
462
|
+
return (jsxRuntime.jsx(BooleanCustomField, { dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
463
463
|
}
|
|
464
464
|
case "DropDownFieldValueAndDefinition": {
|
|
465
465
|
const value = field.stringArrayValue;
|
|
466
466
|
const rules = getDropdownValidationRules(field.definition);
|
|
467
|
-
return (jsxRuntime.jsx(DropdownCustomField, {
|
|
467
|
+
return (jsxRuntime.jsx(DropdownCustomField, { allValues: (_d = field.definition.allValues) !== null && _d !== void 0 ? _d : undefined, dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_e = field.definition.multiSelect) !== null && _e !== void 0 ? _e : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
468
468
|
}
|
|
469
469
|
case "DateFieldValueAndDefinition": {
|
|
470
470
|
const value = field.dateValue;
|
|
@@ -473,7 +473,7 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
473
473
|
if (value !== undefined && value !== null) {
|
|
474
474
|
defaultValue = new Date(value);
|
|
475
475
|
}
|
|
476
|
-
return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${field.definition.key}`,
|
|
476
|
+
return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${field.definition.key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
|
|
477
477
|
}
|
|
478
478
|
case "JsonFieldValueAndDefinition": {
|
|
479
479
|
return null;
|
|
@@ -487,7 +487,7 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
487
487
|
const value = numberValue === undefined || numberValue === null || numberValue === ""
|
|
488
488
|
? ""
|
|
489
489
|
: parseFloat(Number(numberValue).toPrecision(4));
|
|
490
|
-
return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({
|
|
490
|
+
return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_f = field.definition.maximumNumber) !== null && _f !== void 0 ? _f : undefined, min: (_g = field.definition.minimumNumber) !== null && _g !== void 0 ? _g : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(key, rules), { onChange: e => {
|
|
491
491
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
492
492
|
validation.register(key, rules).onChange(e);
|
|
493
493
|
} }, numberProps)));
|
package/index.esm.js
CHANGED
|
@@ -148,7 +148,7 @@ const BooleanCustomField = (_a) => {
|
|
|
148
148
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: internalValue.toString() }));
|
|
149
149
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
150
150
|
}, []); // register only once
|
|
151
|
-
return (jsx(FormGroup, {
|
|
151
|
+
return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, name: id, onChange: event => (!rest.readOnly ? onChangeHandler(event) : null) }, rest)) }));
|
|
152
152
|
};
|
|
153
153
|
|
|
154
154
|
/**
|
|
@@ -169,7 +169,7 @@ const DateCustomField = (props) => {
|
|
|
169
169
|
const value = defaultValue && new Date(defaultValue);
|
|
170
170
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value }));
|
|
171
171
|
}, [register, validationRules, defaultValue, id]);
|
|
172
|
-
return (createElement(DateField, Object.assign({}, rest, {
|
|
172
|
+
return (createElement(DateField, Object.assign({}, rest, { defaultValue: defaultValue, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, id: id, key: id, label: props.title, onChange: onChangeHandler })));
|
|
173
173
|
};
|
|
174
174
|
|
|
175
175
|
const convertToValueFormat = (value) => {
|
|
@@ -202,7 +202,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
202
202
|
React.useEffect(() => {
|
|
203
203
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: selectedValue }));
|
|
204
204
|
}, [register, validationRules, selectedValue, id]);
|
|
205
|
-
return (jsx(FormGroup, {
|
|
205
|
+
return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, 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 }) }));
|
|
206
206
|
};
|
|
207
207
|
|
|
208
208
|
/**
|
|
@@ -402,24 +402,24 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
402
402
|
case "WebAddressFieldValueAndDefinition": {
|
|
403
403
|
const value = field.stringValue;
|
|
404
404
|
const rules = getWebAddressValidationRules(field.definition);
|
|
405
|
-
return (jsx(TextField, Object.assign({
|
|
405
|
+
return (jsx(TextField, Object.assign({ actions: !isEditableCombined && value && jsx(ActionButton, { type: "WEB_ADDRESS", value: value }), dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
|
|
406
406
|
}
|
|
407
407
|
case "EmailFieldValueAndDefinition": {
|
|
408
408
|
const value = field.stringValue;
|
|
409
409
|
const rules = getEmailValidationRules(field.definition);
|
|
410
|
-
return (jsx(TextField, Object.assign({
|
|
410
|
+
return (jsx(TextField, Object.assign({ actions: !isEditableCombined && value && jsx(ActionButton, { type: "EMAIL", value: value }), dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
|
|
411
411
|
}
|
|
412
412
|
case "PhoneNumberFieldValueAndDefinition": {
|
|
413
413
|
const value = field.stringValue;
|
|
414
414
|
const rules = getPhoneNumberValidationRules(field.definition);
|
|
415
|
-
return (jsx(PhoneField, Object.assign({
|
|
415
|
+
return (jsx(PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", 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, rules), { onChangeValue: props => {
|
|
416
416
|
validation.setValue(key, props.phone);
|
|
417
417
|
} })));
|
|
418
418
|
}
|
|
419
419
|
case "StringFieldValueAndDefinition": {
|
|
420
420
|
const value = field.stringValue;
|
|
421
421
|
const rules = getStringValidationRules(field.definition);
|
|
422
|
-
return (jsx(TextField, Object.assign({
|
|
422
|
+
return (jsx(TextField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
|
|
423
423
|
}
|
|
424
424
|
case "NumberFieldValueAndDefinition": {
|
|
425
425
|
const value = field.numberValue;
|
|
@@ -431,17 +431,17 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
431
431
|
placeholder: title !== null && title !== void 0 ? title : "",
|
|
432
432
|
addonAfter: unitTranslation(unit),
|
|
433
433
|
};
|
|
434
|
-
return (jsx(NumberField, Object.assign({
|
|
434
|
+
return (jsx(NumberField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", 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, rules), numberProps)));
|
|
435
435
|
}
|
|
436
436
|
case "BooleanFieldValueAndDefinition": {
|
|
437
437
|
const value = field.booleanValue;
|
|
438
438
|
const rules = getBooleanValidationRules(field.definition);
|
|
439
|
-
return (jsx(BooleanCustomField, {
|
|
439
|
+
return (jsx(BooleanCustomField, { dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
440
440
|
}
|
|
441
441
|
case "DropDownFieldValueAndDefinition": {
|
|
442
442
|
const value = field.stringArrayValue;
|
|
443
443
|
const rules = getDropdownValidationRules(field.definition);
|
|
444
|
-
return (jsx(DropdownCustomField, {
|
|
444
|
+
return (jsx(DropdownCustomField, { allValues: (_d = field.definition.allValues) !== null && _d !== void 0 ? _d : undefined, dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_e = field.definition.multiSelect) !== null && _e !== void 0 ? _e : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
445
445
|
}
|
|
446
446
|
case "DateFieldValueAndDefinition": {
|
|
447
447
|
const value = field.dateValue;
|
|
@@ -450,7 +450,7 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
450
450
|
if (value !== undefined && value !== null) {
|
|
451
451
|
defaultValue = new Date(value);
|
|
452
452
|
}
|
|
453
|
-
return (jsx(DateCustomField, { dataTestId: `${field.definition.key}`,
|
|
453
|
+
return (jsx(DateCustomField, { dataTestId: `${field.definition.key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
|
|
454
454
|
}
|
|
455
455
|
case "JsonFieldValueAndDefinition": {
|
|
456
456
|
return null;
|
|
@@ -464,7 +464,7 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
|
|
|
464
464
|
const value = numberValue === undefined || numberValue === null || numberValue === ""
|
|
465
465
|
? ""
|
|
466
466
|
: parseFloat(Number(numberValue).toPrecision(4));
|
|
467
|
-
return (jsx(NumberField, Object.assign({
|
|
467
|
+
return (jsx(NumberField, Object.assign({ dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_f = field.definition.maximumNumber) !== null && _f !== void 0 ? _f : undefined, min: (_g = field.definition.minimumNumber) !== null && _g !== void 0 ? _g : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(key, rules), { onChange: e => {
|
|
468
468
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
469
469
|
validation.register(key, rules).onChange(e);
|
|
470
470
|
} }, numberProps)));
|