@trackunit/custom-field-components 1.7.118 → 1.7.120
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 +16 -16
- package/index.esm.js +16 -16
- package/package.json +10 -10
- package/src/BooleanCustomField.d.ts +2 -2
- package/src/DropdownCustomField.d.ts +2 -2
- package/src/StringListField/StringListField.d.ts +1 -1
package/index.cjs.js
CHANGED
|
@@ -134,7 +134,7 @@ const setupLibraryTranslations = () => {
|
|
|
134
134
|
* @param options BooleanCustomFieldProps - options for the component
|
|
135
135
|
* @returns {ReactElement }ReactElement - a component that can be used to render a boolean field
|
|
136
136
|
*/
|
|
137
|
-
const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }) => {
|
|
137
|
+
const BooleanCustomField = ({ defaultValue, "data-testid": dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }) => {
|
|
138
138
|
const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
|
|
139
139
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
140
140
|
const htmlForId = id ? id : "boolean-custom-field-" + sharedUtils.uuidv4();
|
|
@@ -153,7 +153,7 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
|
|
|
153
153
|
react.useEffect(() => {
|
|
154
154
|
register && register(id, { ...validationRules, value: internalValue.toString() });
|
|
155
155
|
});
|
|
156
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, {
|
|
156
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { "data-testid": 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, "data-testid": dataTestId, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, name: id, onChange: event => (!rest.readOnly ? onChangeHandler(event) : null), ...rest }) }));
|
|
157
157
|
};
|
|
158
158
|
|
|
159
159
|
/**
|
|
@@ -187,7 +187,7 @@ const convertToValueFormat = (value) => {
|
|
|
187
187
|
* @param options DropdownCustomFieldProps - an object with all the props
|
|
188
188
|
* @returns {ReactElement} - a dropdown component
|
|
189
189
|
*/
|
|
190
|
-
const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
|
|
190
|
+
const DropdownCustomField = ({ defaultValue, "data-testid": dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
|
|
191
191
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
192
192
|
const htmlForId = id ? id : "dropdown-custom-field-" + sharedUtils.uuidv4();
|
|
193
193
|
const [selectedValue, setSelectedValue] = react.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
|
|
@@ -214,7 +214,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
214
214
|
react.useEffect(() => {
|
|
215
215
|
register && register(id, { ...validationRules, value: selectedValue });
|
|
216
216
|
}, [register, validationRules, selectedValue, id]);
|
|
217
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, {
|
|
217
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.BaseSelect, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
|
|
218
218
|
};
|
|
219
219
|
|
|
220
220
|
/**
|
|
@@ -237,7 +237,7 @@ const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
|
|
|
237
237
|
setIsEditing(false);
|
|
238
238
|
}
|
|
239
239
|
};
|
|
240
|
-
return (jsxRuntime.jsxs(reactModal.Modal, { ...modal, className: "max-w-lg",
|
|
240
|
+
return (jsxRuntime.jsxs(reactModal.Modal, { ...modal, className: "max-w-lg", "data-testid": `${id}-edit-modal`, children: [jsxRuntime.jsx(reactModal.ModalHeader, { heading: t("customfield.stringlistfield.addField.Heading", { label: label }), onClose: modal.close }), jsxRuntime.jsx(reactModal.ModalBody, { children: jsxRuntime.jsx(reactFormComponents.TextBaseInput, { "data-testid": `${id}-edit-modal-input`, onChange: e => setInputValue(e.target.value), placeholder: t("customfield.stringlistfield.addField.InputPlaceholder", { label: label }), value: inputValue }) }), jsxRuntime.jsx(reactModal.ModalFooter, { cancelLabel: t("customfield.stringlistfield.discard"), "data-testid": `${id}-edit-modal-footer`, onCancel: modal.close, primaryAction: handleAdd, primaryLabel: t("customfield.stringlistfield.add") })] }));
|
|
241
241
|
};
|
|
242
242
|
|
|
243
243
|
const StringListInput = ({ value: initialValue, onSave, onDelete, disabled, id, index }) => {
|
|
@@ -255,7 +255,7 @@ const StringListInput = ({ value: initialValue, onSave, onDelete, disabled, id,
|
|
|
255
255
|
/**
|
|
256
256
|
* A custom field that displays a list of strings.
|
|
257
257
|
*/
|
|
258
|
-
const StringListField = ({ defaultValue = [], label, description, disabled, validationRules, id, control, register, setValue, dataTestId, ...props }) => {
|
|
258
|
+
const StringListField = ({ defaultValue = [], label, description, disabled, validationRules, id, control, register, setValue, "data-testid": dataTestId, ...props }) => {
|
|
259
259
|
const [isEditing, setIsEditing] = react.useState(false);
|
|
260
260
|
const { confirm } = reactCoreHooks.useConfirmationDialog();
|
|
261
261
|
const { t } = useTranslation();
|
|
@@ -531,27 +531,27 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
531
531
|
switch (def.__typename) {
|
|
532
532
|
case "WebAddressFieldDefinition": {
|
|
533
533
|
const rules = getWebAddressValidationRules(def);
|
|
534
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null,
|
|
534
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
535
535
|
...rules,
|
|
536
536
|
value,
|
|
537
537
|
}) }));
|
|
538
538
|
}
|
|
539
539
|
case "EmailFieldDefinition": {
|
|
540
540
|
const rules = getEmailValidationRules(def);
|
|
541
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }) : null,
|
|
541
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }) : null, "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
542
542
|
...rules,
|
|
543
543
|
value,
|
|
544
544
|
}) }));
|
|
545
545
|
}
|
|
546
546
|
case "PhoneNumberFieldDefinition": {
|
|
547
547
|
const rules = getPhoneNumberValidationRules(!def.uiEditable);
|
|
548
|
-
return (jsxRuntime.jsx(reactFormComponents.PhoneField, {
|
|
548
|
+
return (jsxRuntime.jsx(reactFormComponents.PhoneField, { "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, value: value, ...validation.register(uniqueIdentifier, {
|
|
549
549
|
...rules,
|
|
550
550
|
}) }));
|
|
551
551
|
}
|
|
552
552
|
case "StringFieldDefinition": {
|
|
553
553
|
const rules = getStringValidationRules(def);
|
|
554
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, {
|
|
554
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
555
555
|
...rules,
|
|
556
556
|
value,
|
|
557
557
|
}) }));
|
|
@@ -563,26 +563,26 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
563
563
|
placeholder: title ?? "",
|
|
564
564
|
addonAfter: unitTranslation(unit),
|
|
565
565
|
};
|
|
566
|
-
return (jsxRuntime.jsx(reactFormComponents.NumberField, {
|
|
566
|
+
return (jsxRuntime.jsx(reactFormComponents.NumberField, { "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: def.isInteger ? 1 : "any", ...validation.register(uniqueIdentifier, {
|
|
567
567
|
...rules,
|
|
568
568
|
value,
|
|
569
569
|
}), ...numberProps }));
|
|
570
570
|
}
|
|
571
571
|
case "BooleanFieldDefinition": {
|
|
572
572
|
const rules = getBooleanValidationRules();
|
|
573
|
-
return (jsxRuntime.jsx(BooleanCustomField, {
|
|
573
|
+
return (jsxRuntime.jsx(BooleanCustomField, { "data-testid": `${key}`, defaultValue: value ?? undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title ?? "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
574
574
|
}
|
|
575
575
|
case "DropDownFieldDefinition": {
|
|
576
576
|
const rules = getDropdownValidationRules();
|
|
577
|
-
return (jsxRuntime.jsx(DropdownCustomField, { allValues: def.allValues ?? undefined,
|
|
577
|
+
return (jsxRuntime.jsx(DropdownCustomField, { allValues: def.allValues ?? undefined, "data-testid": `${key}`, defaultValue: value ?? undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: def.multiSelect ?? false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
578
578
|
}
|
|
579
579
|
case "DateFieldDefinition": {
|
|
580
580
|
const rules = getDateValidationRules();
|
|
581
|
-
return (jsxRuntime.jsx(DateCustomField, {
|
|
581
|
+
return (jsxRuntime.jsx(DateCustomField, { "data-testid": `${key}`, defaultValue: value, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
|
|
582
582
|
}
|
|
583
583
|
case "StringListFieldDefinition": {
|
|
584
584
|
const rules = getStringListValidationRules(def);
|
|
585
|
-
return (jsxRuntime.jsx(StringListField, { control: control,
|
|
585
|
+
return (jsxRuntime.jsx(StringListField, { control: control, "data-testid": key, defaultValue: value ?? undefined, description: description ?? "", disabled: !isEditableCombined, errorMessage: errorMessage, id: uniqueIdentifier, label: title || "", register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
586
586
|
}
|
|
587
587
|
case "JsonFieldDefinition": {
|
|
588
588
|
return null;
|
|
@@ -593,7 +593,7 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
593
593
|
placeholder: title ?? "",
|
|
594
594
|
addonAfter: def.currency,
|
|
595
595
|
};
|
|
596
|
-
return (jsxRuntime.jsx(reactFormComponents.NumberField, {
|
|
596
|
+
return (jsxRuntime.jsx(reactFormComponents.NumberField, { "data-testid": key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, rules), onChange: e => {
|
|
597
597
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
598
598
|
validation.register(uniqueIdentifier, rules).onChange(e);
|
|
599
599
|
}, ...numberProps }));
|
package/index.esm.js
CHANGED
|
@@ -132,7 +132,7 @@ const setupLibraryTranslations = () => {
|
|
|
132
132
|
* @param options BooleanCustomFieldProps - options for the component
|
|
133
133
|
* @returns {ReactElement }ReactElement - a component that can be used to render a boolean field
|
|
134
134
|
*/
|
|
135
|
-
const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }) => {
|
|
135
|
+
const BooleanCustomField = ({ defaultValue, "data-testid": dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }) => {
|
|
136
136
|
const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
|
|
137
137
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
138
138
|
const htmlForId = id ? id : "boolean-custom-field-" + uuidv4();
|
|
@@ -151,7 +151,7 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
|
|
|
151
151
|
useEffect(() => {
|
|
152
152
|
register && register(id, { ...validationRules, value: internalValue.toString() });
|
|
153
153
|
});
|
|
154
|
-
return (jsx(FormGroup, {
|
|
154
|
+
return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(Checkbox, { checked: internalValue, "data-testid": dataTestId, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, name: id, onChange: event => (!rest.readOnly ? onChangeHandler(event) : null), ...rest }) }));
|
|
155
155
|
};
|
|
156
156
|
|
|
157
157
|
/**
|
|
@@ -185,7 +185,7 @@ const convertToValueFormat = (value) => {
|
|
|
185
185
|
* @param options DropdownCustomFieldProps - an object with all the props
|
|
186
186
|
* @returns {ReactElement} - a dropdown component
|
|
187
187
|
*/
|
|
188
|
-
const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
|
|
188
|
+
const DropdownCustomField = ({ defaultValue, "data-testid": dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
|
|
189
189
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
190
190
|
const htmlForId = id ? id : "dropdown-custom-field-" + uuidv4();
|
|
191
191
|
const [selectedValue, setSelectedValue] = useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
|
|
@@ -212,7 +212,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
212
212
|
useEffect(() => {
|
|
213
213
|
register && register(id, { ...validationRules, value: selectedValue });
|
|
214
214
|
}, [register, validationRules, selectedValue, id]);
|
|
215
|
-
return (jsx(FormGroup, {
|
|
215
|
+
return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(BaseSelect, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
|
|
216
216
|
};
|
|
217
217
|
|
|
218
218
|
/**
|
|
@@ -235,7 +235,7 @@ const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
|
|
|
235
235
|
setIsEditing(false);
|
|
236
236
|
}
|
|
237
237
|
};
|
|
238
|
-
return (jsxs(Modal, { ...modal, className: "max-w-lg",
|
|
238
|
+
return (jsxs(Modal, { ...modal, className: "max-w-lg", "data-testid": `${id}-edit-modal`, children: [jsx(ModalHeader, { heading: t("customfield.stringlistfield.addField.Heading", { label: label }), onClose: modal.close }), jsx(ModalBody, { children: jsx(TextBaseInput, { "data-testid": `${id}-edit-modal-input`, onChange: e => setInputValue(e.target.value), placeholder: t("customfield.stringlistfield.addField.InputPlaceholder", { label: label }), value: inputValue }) }), jsx(ModalFooter, { cancelLabel: t("customfield.stringlistfield.discard"), "data-testid": `${id}-edit-modal-footer`, onCancel: modal.close, primaryAction: handleAdd, primaryLabel: t("customfield.stringlistfield.add") })] }));
|
|
239
239
|
};
|
|
240
240
|
|
|
241
241
|
const StringListInput = ({ value: initialValue, onSave, onDelete, disabled, id, index }) => {
|
|
@@ -253,7 +253,7 @@ const StringListInput = ({ value: initialValue, onSave, onDelete, disabled, id,
|
|
|
253
253
|
/**
|
|
254
254
|
* A custom field that displays a list of strings.
|
|
255
255
|
*/
|
|
256
|
-
const StringListField = ({ defaultValue = [], label, description, disabled, validationRules, id, control, register, setValue, dataTestId, ...props }) => {
|
|
256
|
+
const StringListField = ({ defaultValue = [], label, description, disabled, validationRules, id, control, register, setValue, "data-testid": dataTestId, ...props }) => {
|
|
257
257
|
const [isEditing, setIsEditing] = useState(false);
|
|
258
258
|
const { confirm } = useConfirmationDialog();
|
|
259
259
|
const { t } = useTranslation();
|
|
@@ -529,27 +529,27 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
529
529
|
switch (def.__typename) {
|
|
530
530
|
case "WebAddressFieldDefinition": {
|
|
531
531
|
const rules = getWebAddressValidationRules(def);
|
|
532
|
-
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null,
|
|
532
|
+
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
533
533
|
...rules,
|
|
534
534
|
value,
|
|
535
535
|
}) }));
|
|
536
536
|
}
|
|
537
537
|
case "EmailFieldDefinition": {
|
|
538
538
|
const rules = getEmailValidationRules(def);
|
|
539
|
-
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "EMAIL", value: formValue }) : null,
|
|
539
|
+
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "EMAIL", value: formValue }) : null, "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
540
540
|
...rules,
|
|
541
541
|
value,
|
|
542
542
|
}) }));
|
|
543
543
|
}
|
|
544
544
|
case "PhoneNumberFieldDefinition": {
|
|
545
545
|
const rules = getPhoneNumberValidationRules(!def.uiEditable);
|
|
546
|
-
return (jsx(PhoneField, {
|
|
546
|
+
return (jsx(PhoneField, { "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, value: value, ...validation.register(uniqueIdentifier, {
|
|
547
547
|
...rules,
|
|
548
548
|
}) }));
|
|
549
549
|
}
|
|
550
550
|
case "StringFieldDefinition": {
|
|
551
551
|
const rules = getStringValidationRules(def);
|
|
552
|
-
return (jsx(TextField, {
|
|
552
|
+
return (jsx(TextField, { "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
553
553
|
...rules,
|
|
554
554
|
value,
|
|
555
555
|
}) }));
|
|
@@ -561,26 +561,26 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
561
561
|
placeholder: title ?? "",
|
|
562
562
|
addonAfter: unitTranslation(unit),
|
|
563
563
|
};
|
|
564
|
-
return (jsx(NumberField, {
|
|
564
|
+
return (jsx(NumberField, { "data-testid": `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: def.isInteger ? 1 : "any", ...validation.register(uniqueIdentifier, {
|
|
565
565
|
...rules,
|
|
566
566
|
value,
|
|
567
567
|
}), ...numberProps }));
|
|
568
568
|
}
|
|
569
569
|
case "BooleanFieldDefinition": {
|
|
570
570
|
const rules = getBooleanValidationRules();
|
|
571
|
-
return (jsx(BooleanCustomField, {
|
|
571
|
+
return (jsx(BooleanCustomField, { "data-testid": `${key}`, defaultValue: value ?? undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title ?? "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
572
572
|
}
|
|
573
573
|
case "DropDownFieldDefinition": {
|
|
574
574
|
const rules = getDropdownValidationRules();
|
|
575
|
-
return (jsx(DropdownCustomField, { allValues: def.allValues ?? undefined,
|
|
575
|
+
return (jsx(DropdownCustomField, { allValues: def.allValues ?? undefined, "data-testid": `${key}`, defaultValue: value ?? undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: def.multiSelect ?? false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
576
576
|
}
|
|
577
577
|
case "DateFieldDefinition": {
|
|
578
578
|
const rules = getDateValidationRules();
|
|
579
|
-
return (jsx(DateCustomField, {
|
|
579
|
+
return (jsx(DateCustomField, { "data-testid": `${key}`, defaultValue: value, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
|
|
580
580
|
}
|
|
581
581
|
case "StringListFieldDefinition": {
|
|
582
582
|
const rules = getStringListValidationRules(def);
|
|
583
|
-
return (jsx(StringListField, { control: control,
|
|
583
|
+
return (jsx(StringListField, { control: control, "data-testid": key, defaultValue: value ?? undefined, description: description ?? "", disabled: !isEditableCombined, errorMessage: errorMessage, id: uniqueIdentifier, label: title || "", register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
584
584
|
}
|
|
585
585
|
case "JsonFieldDefinition": {
|
|
586
586
|
return null;
|
|
@@ -591,7 +591,7 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
591
591
|
placeholder: title ?? "",
|
|
592
592
|
addonAfter: def.currency,
|
|
593
593
|
};
|
|
594
|
-
return (jsx(NumberField, {
|
|
594
|
+
return (jsx(NumberField, { "data-testid": key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, rules), onChange: e => {
|
|
595
595
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
596
596
|
validation.register(uniqueIdentifier, rules).onChange(e);
|
|
597
597
|
}, ...numberProps }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/custom-field-components",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.120",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -10,15 +10,15 @@
|
|
|
10
10
|
"react": "19.0.0",
|
|
11
11
|
"react-hook-form": "7.62.0",
|
|
12
12
|
"react-select": "^5.10.0",
|
|
13
|
-
"@trackunit/react-form-components": "1.8.
|
|
14
|
-
"@trackunit/shared-utils": "1.9.
|
|
15
|
-
"@trackunit/custom-field-api": "1.7.
|
|
16
|
-
"@trackunit/iris-app-runtime-core": "1.8.
|
|
17
|
-
"@trackunit/react-components": "1.10.
|
|
18
|
-
"@trackunit/react-modal": "1.8.
|
|
19
|
-
"@trackunit/react-core-hooks": "1.7.
|
|
20
|
-
"@trackunit/i18n-library-translation": "1.7.
|
|
21
|
-
"@trackunit/iris-app-runtime-core-api": "1.7.
|
|
13
|
+
"@trackunit/react-form-components": "1.8.118",
|
|
14
|
+
"@trackunit/shared-utils": "1.9.77",
|
|
15
|
+
"@trackunit/custom-field-api": "1.7.107",
|
|
16
|
+
"@trackunit/iris-app-runtime-core": "1.8.86",
|
|
17
|
+
"@trackunit/react-components": "1.10.51",
|
|
18
|
+
"@trackunit/react-modal": "1.8.112",
|
|
19
|
+
"@trackunit/react-core-hooks": "1.7.90",
|
|
20
|
+
"@trackunit/i18n-library-translation": "1.7.94",
|
|
21
|
+
"@trackunit/iris-app-runtime-core-api": "1.7.86"
|
|
22
22
|
},
|
|
23
23
|
"module": "./index.esm.js",
|
|
24
24
|
"main": "./index.cjs.js",
|
|
@@ -33,7 +33,7 @@ export interface BooleanCustomFieldProps extends Omit<CheckboxProps, "value" | "
|
|
|
33
33
|
*
|
|
34
34
|
* @memberof BooleanCustomFieldProps
|
|
35
35
|
*/
|
|
36
|
-
|
|
36
|
+
"data-testid"?: string;
|
|
37
37
|
/**
|
|
38
38
|
* A custom handler for onChange event
|
|
39
39
|
*
|
|
@@ -77,4 +77,4 @@ export interface BooleanCustomFieldProps extends Omit<CheckboxProps, "value" | "
|
|
|
77
77
|
* @param options BooleanCustomFieldProps - options for the component
|
|
78
78
|
* @returns {ReactElement }ReactElement - a component that can be used to render a boolean field
|
|
79
79
|
*/
|
|
80
|
-
export declare const BooleanCustomField: ({ defaultValue, dataTestId, onChange, value, id, setValue, register, validationRules, disabled, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }: BooleanCustomFieldProps) => ReactElement;
|
|
80
|
+
export declare const BooleanCustomField: ({ defaultValue, "data-testid": dataTestId, onChange, value, id, setValue, register, validationRules, disabled, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }: BooleanCustomFieldProps) => ReactElement;
|
|
@@ -19,7 +19,7 @@ export interface DropdownCustomFieldProps extends FormGroupExposedProps {
|
|
|
19
19
|
*
|
|
20
20
|
* @memberof DropdownCustomFieldProps
|
|
21
21
|
*/
|
|
22
|
-
|
|
22
|
+
"data-testid"?: string;
|
|
23
23
|
/**
|
|
24
24
|
* A custom handler for onChange event
|
|
25
25
|
*
|
|
@@ -90,5 +90,5 @@ type OnBlur = (event: FocusEvent<HTMLDivElement>) => void;
|
|
|
90
90
|
* @param options DropdownCustomFieldProps - an object with all the props
|
|
91
91
|
* @returns {ReactElement} - a dropdown component
|
|
92
92
|
*/
|
|
93
|
-
export declare const DropdownCustomField: ({ defaultValue, dataTestId, onChange, onBlur, id, disabled, allValues, multiSelect, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }: DropdownCustomFieldProps) => ReactElement;
|
|
93
|
+
export declare const DropdownCustomField: ({ defaultValue, "data-testid": dataTestId, onChange, onBlur, id, disabled, allValues, multiSelect, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }: DropdownCustomFieldProps) => ReactElement;
|
|
94
94
|
export {};
|
|
@@ -16,4 +16,4 @@ export interface StringListFieldProps extends CommonProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* A custom field that displays a list of strings.
|
|
18
18
|
*/
|
|
19
|
-
export declare const StringListField: ({ defaultValue, label, description, disabled, validationRules, id, control, register, setValue, dataTestId, ...props }: StringListFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const StringListField: ({ defaultValue, label, description, disabled, validationRules, id, control, register, setValue, "data-testid": dataTestId, ...props }: StringListFieldProps) => import("react/jsx-runtime").JSX.Element;
|