@trackunit/custom-field-components 1.0.17 → 1.0.19
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 +29 -32
- package/index.esm.js +29 -32
- package/package.json +5 -5
package/index.cjs.js
CHANGED
|
@@ -185,9 +185,8 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
|
|
|
185
185
|
const DateCustomField = (props) => {
|
|
186
186
|
const { setValue, defaultValue, register, id, validationRules, ...rest } = props;
|
|
187
187
|
const onChangeHandler = React.useCallback((e) => {
|
|
188
|
-
var _a;
|
|
189
188
|
setValue &&
|
|
190
|
-
setValue(id,
|
|
189
|
+
setValue(id, e.target.valueAsDate?.toISOString(), {
|
|
191
190
|
shouldDirty: true,
|
|
192
191
|
shouldValidate: true,
|
|
193
192
|
});
|
|
@@ -213,10 +212,9 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
213
212
|
const htmlForId = id ? id : "dropdown-custom-field-" + sharedUtils.uuidv4();
|
|
214
213
|
const [selectedValue, setSelectedValue] = React__namespace.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
|
|
215
214
|
const onChangeHandler = React__namespace.useCallback((selected) => {
|
|
216
|
-
var _a, _b;
|
|
217
215
|
if (selected) {
|
|
218
216
|
const values = Array.isArray(selected) ? selected : [selected];
|
|
219
|
-
if (selectedValue.length === 1 && values.length === 1 &&
|
|
217
|
+
if (selectedValue.length === 1 && values.length === 1 && values[0]?.value === selectedValue[0]?.value) {
|
|
220
218
|
setSelectedValue([]);
|
|
221
219
|
setValue && setValue(id, [], { shouldDirty: true, shouldValidate: true });
|
|
222
220
|
}
|
|
@@ -510,11 +508,10 @@ const useUnitTranslation = () => {
|
|
|
510
508
|
* @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
|
|
511
509
|
*/
|
|
512
510
|
const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable = true, control, }) => {
|
|
513
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
514
511
|
const validation = { register, setValue, formState };
|
|
515
512
|
const { unitTranslation } = useUnitTranslation();
|
|
516
513
|
const [numberValue, setNumberValue] = React.useState(() => {
|
|
517
|
-
if (
|
|
514
|
+
if (field?.definition && field.__typename === "NumberFieldValueAndDefinition") {
|
|
518
515
|
const fieldValue = field.numberValue;
|
|
519
516
|
const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
|
|
520
517
|
? field.definition.unitUs
|
|
@@ -526,41 +523,41 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
526
523
|
}
|
|
527
524
|
});
|
|
528
525
|
const { getPhoneNumberValidationRules } = reactFormComponents.useGetPhoneValidationRules();
|
|
529
|
-
const def =
|
|
530
|
-
const uniqueIdentifier =
|
|
526
|
+
const def = field?.definition ?? definition;
|
|
527
|
+
const uniqueIdentifier = fieldId ?? def?.id ?? "";
|
|
531
528
|
const value = useValue(uniqueIdentifier, numberValue, control, def, field);
|
|
532
|
-
const key =
|
|
529
|
+
const key = def?.key ?? uniqueIdentifier;
|
|
533
530
|
const fieldError = uniqueIdentifier ? validation.formState.errors[uniqueIdentifier] : undefined;
|
|
534
531
|
const errorMessage = fieldError ? fieldError.message + "" : undefined;
|
|
535
|
-
const { description, title, __typename } = def
|
|
532
|
+
const { description, title, __typename } = def ?? {};
|
|
536
533
|
if (!__typename || !def) {
|
|
537
534
|
return null;
|
|
538
535
|
}
|
|
539
|
-
const isEditableCombined = isEditable && (
|
|
536
|
+
const isEditableCombined = isEditable && (field?.valueEditable ?? true) && def.uiEditable;
|
|
540
537
|
switch (def.__typename) {
|
|
541
538
|
case "WebAddressFieldDefinition": {
|
|
542
539
|
const rules = getWebAddressValidationRules(def);
|
|
543
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title
|
|
540
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
544
541
|
...rules,
|
|
545
542
|
value,
|
|
546
543
|
}) }));
|
|
547
544
|
}
|
|
548
545
|
case "EmailFieldDefinition": {
|
|
549
546
|
const rules = getEmailValidationRules(def);
|
|
550
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }) : null, dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title
|
|
547
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }) : null, dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
551
548
|
...rules,
|
|
552
549
|
value,
|
|
553
550
|
}) }));
|
|
554
551
|
}
|
|
555
552
|
case "PhoneNumberFieldDefinition": {
|
|
556
553
|
const rules = getPhoneNumberValidationRules(!def.uiEditable);
|
|
557
|
-
return (jsxRuntime.jsx(reactFormComponents.PhoneField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title
|
|
554
|
+
return (jsxRuntime.jsx(reactFormComponents.PhoneField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, value: value, ...validation.register(uniqueIdentifier, {
|
|
558
555
|
...rules,
|
|
559
556
|
}) }));
|
|
560
557
|
}
|
|
561
558
|
case "StringFieldDefinition": {
|
|
562
559
|
const rules = getStringValidationRules(def);
|
|
563
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title
|
|
560
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
564
561
|
...rules,
|
|
565
562
|
value,
|
|
566
563
|
}) }));
|
|
@@ -569,21 +566,21 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
569
566
|
const rules = getNumberValidationRules(def);
|
|
570
567
|
const unit = unitPreference === "US_CUSTOMARY" && def.unitUs ? def.unitUs : def.unitSi;
|
|
571
568
|
const numberProps = {
|
|
572
|
-
placeholder: title
|
|
569
|
+
placeholder: title ?? "",
|
|
573
570
|
addonAfter: unitTranslation(unit),
|
|
574
571
|
};
|
|
575
|
-
return (jsxRuntime.jsx(reactFormComponents.NumberField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max:
|
|
572
|
+
return (jsxRuntime.jsx(reactFormComponents.NumberField, { dataTestId: `${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, {
|
|
576
573
|
...rules,
|
|
577
574
|
value,
|
|
578
575
|
}), ...numberProps }));
|
|
579
576
|
}
|
|
580
577
|
case "BooleanFieldDefinition": {
|
|
581
578
|
const rules = getBooleanValidationRules();
|
|
582
|
-
return (jsxRuntime.jsx(BooleanCustomField, { dataTestId: `${key}`, defaultValue: value
|
|
579
|
+
return (jsxRuntime.jsx(BooleanCustomField, { dataTestId: `${key}`, defaultValue: value ?? undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title ?? "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
583
580
|
}
|
|
584
581
|
case "DropDownFieldDefinition": {
|
|
585
582
|
const rules = getDropdownValidationRules();
|
|
586
|
-
return (jsxRuntime.jsx(DropdownCustomField, { allValues:
|
|
583
|
+
return (jsxRuntime.jsx(DropdownCustomField, { allValues: def.allValues ?? undefined, dataTestId: `${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 }));
|
|
587
584
|
}
|
|
588
585
|
case "DateFieldDefinition": {
|
|
589
586
|
const rules = getDateValidationRules();
|
|
@@ -591,7 +588,7 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
591
588
|
}
|
|
592
589
|
case "StringListFieldDefinition": {
|
|
593
590
|
const rules = getStringListValidationRules(def);
|
|
594
|
-
return (jsxRuntime.jsx(StringListField, { control: control, dataTestId: key, defaultValue: value
|
|
591
|
+
return (jsxRuntime.jsx(StringListField, { control: control, dataTestId: key, defaultValue: value ?? undefined, description: description ?? "", disabled: !isEditableCombined, errorMessage: errorMessage, id: uniqueIdentifier, label: title || "", register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
595
592
|
}
|
|
596
593
|
case "JsonFieldDefinition": {
|
|
597
594
|
return null;
|
|
@@ -599,10 +596,10 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
599
596
|
case "MonetaryFieldDefinition": {
|
|
600
597
|
const rules = getNumberValidationRules(def);
|
|
601
598
|
const numberProps = {
|
|
602
|
-
placeholder: title
|
|
599
|
+
placeholder: title ?? "",
|
|
603
600
|
addonAfter: def.currency,
|
|
604
601
|
};
|
|
605
|
-
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:
|
|
602
|
+
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: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, rules), onChange: e => {
|
|
606
603
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
607
604
|
validation.register(uniqueIdentifier, rules).onChange(e);
|
|
608
605
|
}, ...numberProps }));
|
|
@@ -614,42 +611,42 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
614
611
|
const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
|
|
615
612
|
// workaround that ensures the value in the phone number field is updated if the formState changes.
|
|
616
613
|
// Would probably be better to use PhoneFieldWithController, but doing that makes the form dirty on initial load.
|
|
617
|
-
const initialValue =
|
|
614
|
+
const initialValue = field?.__typename === "PhoneNumberFieldValueAndDefinition" ? field.stringValue : null;
|
|
618
615
|
const watchedValue = reactHookForm.useWatch({ name: uniqueIdentifier, defaultValue: initialValue, control });
|
|
619
616
|
if (!def) {
|
|
620
617
|
return null;
|
|
621
618
|
}
|
|
622
619
|
switch (def.__typename) {
|
|
623
620
|
case "WebAddressFieldDefinition": {
|
|
624
|
-
return
|
|
621
|
+
return field?.__typename === "WebAddressFieldValueAndDefinition" ? field.stringValue : null;
|
|
625
622
|
}
|
|
626
623
|
case "EmailFieldDefinition": {
|
|
627
|
-
return
|
|
624
|
+
return field?.__typename === "EmailFieldValueAndDefinition" ? field.stringValue : null;
|
|
628
625
|
}
|
|
629
626
|
case "PhoneNumberFieldDefinition": {
|
|
630
627
|
return watchedValue;
|
|
631
628
|
}
|
|
632
629
|
case "StringFieldDefinition": {
|
|
633
|
-
return
|
|
630
|
+
return field?.__typename === "StringFieldValueAndDefinition" ? field.stringValue : null;
|
|
634
631
|
}
|
|
635
632
|
case "NumberFieldDefinition": {
|
|
636
|
-
return
|
|
633
|
+
return field?.__typename === "NumberFieldValueAndDefinition" ? field.numberValue : null;
|
|
637
634
|
}
|
|
638
635
|
case "BooleanFieldDefinition": {
|
|
639
|
-
return
|
|
636
|
+
return field?.__typename === "BooleanFieldValueAndDefinition" ? field.booleanValue : null;
|
|
640
637
|
}
|
|
641
638
|
case "DropDownFieldDefinition": {
|
|
642
|
-
return
|
|
639
|
+
return field?.__typename === "DropDownFieldValueAndDefinition" ? field.stringArrayValue : null;
|
|
643
640
|
}
|
|
644
641
|
case "DateFieldDefinition": {
|
|
645
|
-
const value =
|
|
646
|
-
return value
|
|
642
|
+
const value = field?.__typename === "DateFieldValueAndDefinition" ? field.dateValue : null;
|
|
643
|
+
return value ?? undefined;
|
|
647
644
|
}
|
|
648
645
|
case "JsonFieldDefinition": {
|
|
649
646
|
return null;
|
|
650
647
|
}
|
|
651
648
|
case "StringListFieldDefinition": {
|
|
652
|
-
return
|
|
649
|
+
return field?.__typename === "StringListFieldValueAndDefinition" ? field.stringArrayValue : null;
|
|
653
650
|
}
|
|
654
651
|
case "MonetaryFieldDefinition": {
|
|
655
652
|
return numberValue === undefined || numberValue === null || numberValue === ""
|
package/index.esm.js
CHANGED
|
@@ -165,9 +165,8 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
|
|
|
165
165
|
const DateCustomField = (props) => {
|
|
166
166
|
const { setValue, defaultValue, register, id, validationRules, ...rest } = props;
|
|
167
167
|
const onChangeHandler = useCallback((e) => {
|
|
168
|
-
var _a;
|
|
169
168
|
setValue &&
|
|
170
|
-
setValue(id,
|
|
169
|
+
setValue(id, e.target.valueAsDate?.toISOString(), {
|
|
171
170
|
shouldDirty: true,
|
|
172
171
|
shouldValidate: true,
|
|
173
172
|
});
|
|
@@ -193,10 +192,9 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
193
192
|
const htmlForId = id ? id : "dropdown-custom-field-" + uuidv4();
|
|
194
193
|
const [selectedValue, setSelectedValue] = React.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
|
|
195
194
|
const onChangeHandler = React.useCallback((selected) => {
|
|
196
|
-
var _a, _b;
|
|
197
195
|
if (selected) {
|
|
198
196
|
const values = Array.isArray(selected) ? selected : [selected];
|
|
199
|
-
if (selectedValue.length === 1 && values.length === 1 &&
|
|
197
|
+
if (selectedValue.length === 1 && values.length === 1 && values[0]?.value === selectedValue[0]?.value) {
|
|
200
198
|
setSelectedValue([]);
|
|
201
199
|
setValue && setValue(id, [], { shouldDirty: true, shouldValidate: true });
|
|
202
200
|
}
|
|
@@ -490,11 +488,10 @@ const useUnitTranslation = () => {
|
|
|
490
488
|
* @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
|
|
491
489
|
*/
|
|
492
490
|
const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable = true, control, }) => {
|
|
493
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
494
491
|
const validation = { register, setValue, formState };
|
|
495
492
|
const { unitTranslation } = useUnitTranslation();
|
|
496
493
|
const [numberValue, setNumberValue] = useState(() => {
|
|
497
|
-
if (
|
|
494
|
+
if (field?.definition && field.__typename === "NumberFieldValueAndDefinition") {
|
|
498
495
|
const fieldValue = field.numberValue;
|
|
499
496
|
const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
|
|
500
497
|
? field.definition.unitUs
|
|
@@ -506,41 +503,41 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
506
503
|
}
|
|
507
504
|
});
|
|
508
505
|
const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
|
|
509
|
-
const def =
|
|
510
|
-
const uniqueIdentifier =
|
|
506
|
+
const def = field?.definition ?? definition;
|
|
507
|
+
const uniqueIdentifier = fieldId ?? def?.id ?? "";
|
|
511
508
|
const value = useValue(uniqueIdentifier, numberValue, control, def, field);
|
|
512
|
-
const key =
|
|
509
|
+
const key = def?.key ?? uniqueIdentifier;
|
|
513
510
|
const fieldError = uniqueIdentifier ? validation.formState.errors[uniqueIdentifier] : undefined;
|
|
514
511
|
const errorMessage = fieldError ? fieldError.message + "" : undefined;
|
|
515
|
-
const { description, title, __typename } = def
|
|
512
|
+
const { description, title, __typename } = def ?? {};
|
|
516
513
|
if (!__typename || !def) {
|
|
517
514
|
return null;
|
|
518
515
|
}
|
|
519
|
-
const isEditableCombined = isEditable && (
|
|
516
|
+
const isEditableCombined = isEditable && (field?.valueEditable ?? true) && def.uiEditable;
|
|
520
517
|
switch (def.__typename) {
|
|
521
518
|
case "WebAddressFieldDefinition": {
|
|
522
519
|
const rules = getWebAddressValidationRules(def);
|
|
523
|
-
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title
|
|
520
|
+
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
524
521
|
...rules,
|
|
525
522
|
value,
|
|
526
523
|
}) }));
|
|
527
524
|
}
|
|
528
525
|
case "EmailFieldDefinition": {
|
|
529
526
|
const rules = getEmailValidationRules(def);
|
|
530
|
-
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "EMAIL", value: formValue }) : null, dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title
|
|
527
|
+
return (jsx(TextField, { actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "EMAIL", value: formValue }) : null, dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
531
528
|
...rules,
|
|
532
529
|
value,
|
|
533
530
|
}) }));
|
|
534
531
|
}
|
|
535
532
|
case "PhoneNumberFieldDefinition": {
|
|
536
533
|
const rules = getPhoneNumberValidationRules(!def.uiEditable);
|
|
537
|
-
return (jsx(PhoneField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title
|
|
534
|
+
return (jsx(PhoneField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, value: value, ...validation.register(uniqueIdentifier, {
|
|
538
535
|
...rules,
|
|
539
536
|
}) }));
|
|
540
537
|
}
|
|
541
538
|
case "StringFieldDefinition": {
|
|
542
539
|
const rules = getStringValidationRules(def);
|
|
543
|
-
return (jsx(TextField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title
|
|
540
|
+
return (jsx(TextField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title ?? "", readOnly: !isEditableCombined, ...validation.register(uniqueIdentifier, {
|
|
544
541
|
...rules,
|
|
545
542
|
value,
|
|
546
543
|
}) }));
|
|
@@ -549,21 +546,21 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
549
546
|
const rules = getNumberValidationRules(def);
|
|
550
547
|
const unit = unitPreference === "US_CUSTOMARY" && def.unitUs ? def.unitUs : def.unitSi;
|
|
551
548
|
const numberProps = {
|
|
552
|
-
placeholder: title
|
|
549
|
+
placeholder: title ?? "",
|
|
553
550
|
addonAfter: unitTranslation(unit),
|
|
554
551
|
};
|
|
555
|
-
return (jsx(NumberField, { dataTestId: `${key}`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max:
|
|
552
|
+
return (jsx(NumberField, { dataTestId: `${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, {
|
|
556
553
|
...rules,
|
|
557
554
|
value,
|
|
558
555
|
}), ...numberProps }));
|
|
559
556
|
}
|
|
560
557
|
case "BooleanFieldDefinition": {
|
|
561
558
|
const rules = getBooleanValidationRules();
|
|
562
|
-
return (jsx(BooleanCustomField, { dataTestId: `${key}`, defaultValue: value
|
|
559
|
+
return (jsx(BooleanCustomField, { dataTestId: `${key}`, defaultValue: value ?? undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title ?? "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
563
560
|
}
|
|
564
561
|
case "DropDownFieldDefinition": {
|
|
565
562
|
const rules = getDropdownValidationRules();
|
|
566
|
-
return (jsx(DropdownCustomField, { allValues:
|
|
563
|
+
return (jsx(DropdownCustomField, { allValues: def.allValues ?? undefined, dataTestId: `${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 }));
|
|
567
564
|
}
|
|
568
565
|
case "DateFieldDefinition": {
|
|
569
566
|
const rules = getDateValidationRules();
|
|
@@ -571,7 +568,7 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
571
568
|
}
|
|
572
569
|
case "StringListFieldDefinition": {
|
|
573
570
|
const rules = getStringListValidationRules(def);
|
|
574
|
-
return (jsx(StringListField, { control: control, dataTestId: key, defaultValue: value
|
|
571
|
+
return (jsx(StringListField, { control: control, dataTestId: key, defaultValue: value ?? undefined, description: description ?? "", disabled: !isEditableCombined, errorMessage: errorMessage, id: uniqueIdentifier, label: title || "", register: validation.register, setValue: validation.setValue, validationRules: rules }));
|
|
575
572
|
}
|
|
576
573
|
case "JsonFieldDefinition": {
|
|
577
574
|
return null;
|
|
@@ -579,10 +576,10 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
579
576
|
case "MonetaryFieldDefinition": {
|
|
580
577
|
const rules = getNumberValidationRules(def);
|
|
581
578
|
const numberProps = {
|
|
582
|
-
placeholder: title
|
|
579
|
+
placeholder: title ?? "",
|
|
583
580
|
addonAfter: def.currency,
|
|
584
581
|
};
|
|
585
|
-
return (jsx(NumberField, { dataTestId: key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max:
|
|
582
|
+
return (jsx(NumberField, { dataTestId: 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 => {
|
|
586
583
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
587
584
|
validation.register(uniqueIdentifier, rules).onChange(e);
|
|
588
585
|
}, ...numberProps }));
|
|
@@ -594,42 +591,42 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
594
591
|
const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
|
|
595
592
|
// workaround that ensures the value in the phone number field is updated if the formState changes.
|
|
596
593
|
// Would probably be better to use PhoneFieldWithController, but doing that makes the form dirty on initial load.
|
|
597
|
-
const initialValue =
|
|
594
|
+
const initialValue = field?.__typename === "PhoneNumberFieldValueAndDefinition" ? field.stringValue : null;
|
|
598
595
|
const watchedValue = useWatch({ name: uniqueIdentifier, defaultValue: initialValue, control });
|
|
599
596
|
if (!def) {
|
|
600
597
|
return null;
|
|
601
598
|
}
|
|
602
599
|
switch (def.__typename) {
|
|
603
600
|
case "WebAddressFieldDefinition": {
|
|
604
|
-
return
|
|
601
|
+
return field?.__typename === "WebAddressFieldValueAndDefinition" ? field.stringValue : null;
|
|
605
602
|
}
|
|
606
603
|
case "EmailFieldDefinition": {
|
|
607
|
-
return
|
|
604
|
+
return field?.__typename === "EmailFieldValueAndDefinition" ? field.stringValue : null;
|
|
608
605
|
}
|
|
609
606
|
case "PhoneNumberFieldDefinition": {
|
|
610
607
|
return watchedValue;
|
|
611
608
|
}
|
|
612
609
|
case "StringFieldDefinition": {
|
|
613
|
-
return
|
|
610
|
+
return field?.__typename === "StringFieldValueAndDefinition" ? field.stringValue : null;
|
|
614
611
|
}
|
|
615
612
|
case "NumberFieldDefinition": {
|
|
616
|
-
return
|
|
613
|
+
return field?.__typename === "NumberFieldValueAndDefinition" ? field.numberValue : null;
|
|
617
614
|
}
|
|
618
615
|
case "BooleanFieldDefinition": {
|
|
619
|
-
return
|
|
616
|
+
return field?.__typename === "BooleanFieldValueAndDefinition" ? field.booleanValue : null;
|
|
620
617
|
}
|
|
621
618
|
case "DropDownFieldDefinition": {
|
|
622
|
-
return
|
|
619
|
+
return field?.__typename === "DropDownFieldValueAndDefinition" ? field.stringArrayValue : null;
|
|
623
620
|
}
|
|
624
621
|
case "DateFieldDefinition": {
|
|
625
|
-
const value =
|
|
626
|
-
return value
|
|
622
|
+
const value = field?.__typename === "DateFieldValueAndDefinition" ? field.dateValue : null;
|
|
623
|
+
return value ?? undefined;
|
|
627
624
|
}
|
|
628
625
|
case "JsonFieldDefinition": {
|
|
629
626
|
return null;
|
|
630
627
|
}
|
|
631
628
|
case "StringListFieldDefinition": {
|
|
632
|
-
return
|
|
629
|
+
return field?.__typename === "StringListFieldValueAndDefinition" ? field.stringArrayValue : null;
|
|
633
630
|
}
|
|
634
631
|
case "MonetaryFieldDefinition": {
|
|
635
632
|
return numberValue === undefined || numberValue === null || numberValue === ""
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/custom-field-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
"react-select": "^5.8.0",
|
|
13
13
|
"@testing-library/react": "15.0.6",
|
|
14
14
|
"jest-fetch-mock": "^3.0.3",
|
|
15
|
-
"@trackunit/react-form-components": "^1.0.
|
|
15
|
+
"@trackunit/react-form-components": "^1.0.17",
|
|
16
16
|
"@trackunit/shared-utils": "^1.0.3",
|
|
17
|
-
"@trackunit/custom-field-api": "^1.0.
|
|
17
|
+
"@trackunit/custom-field-api": "^1.0.8",
|
|
18
18
|
"@trackunit/iris-app-runtime-core": "^1.0.5",
|
|
19
|
-
"@trackunit/react-components": "^1.0
|
|
20
|
-
"@trackunit/react-modal": "^1.0.
|
|
19
|
+
"@trackunit/react-components": "^1.1.0",
|
|
20
|
+
"@trackunit/react-modal": "^1.0.17",
|
|
21
21
|
"@trackunit/react-core-hooks": "^1.0.5",
|
|
22
22
|
"@trackunit/i18n-library-translation": "^1.0.7",
|
|
23
23
|
"@trackunit/iris-app-runtime-core-api": "^1.0.5"
|