@trackunit/custom-field-components 0.0.463 → 0.0.464
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 +31 -26
- package/index.esm.js +31 -26
- package/package.json +5 -4
- package/src/CustomField.d.ts +3 -2
package/index.cjs.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
|
|
6
7
|
var irisAppRuntimeCoreApi = require('@trackunit/iris-app-runtime-core-api');
|
|
7
8
|
var reactComponents = require('@trackunit/react-components');
|
|
8
9
|
var reactFormComponents = require('@trackunit/react-form-components');
|
|
@@ -3448,13 +3449,19 @@ const getPhoneNumberValidationRules = (definition) => {
|
|
|
3448
3449
|
* @param fieldId An optional Id to override the definition.key
|
|
3449
3450
|
* @returns { JSX.Element } A JSX.Element or null if the field definition is undefined
|
|
3450
3451
|
*/
|
|
3451
|
-
const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldId) => {
|
|
3452
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w
|
|
3452
|
+
const useCustomFieldResolver = (field, validation, unitPreference = "SI", language, fieldId) => {
|
|
3453
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
3453
3454
|
const [isEditing, setIsEditing] = React.useState(false);
|
|
3454
3455
|
const [numberValue, setNumberValue] = React.useState(() => {
|
|
3455
3456
|
if ((field === null || field === void 0 ? void 0 : field.definition) && field.definition.type === irisAppRuntimeCoreApi.CustomFieldType.NUMBER) {
|
|
3456
3457
|
const typedValue = field.value;
|
|
3457
|
-
|
|
3458
|
+
const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
|
|
3459
|
+
? `${field.definition.unitUs}`
|
|
3460
|
+
: field.definition.unitSi
|
|
3461
|
+
? `${field.definition.unitSi}`
|
|
3462
|
+
: null;
|
|
3463
|
+
const value = irisAppRuntimeCore.CustomFieldRuntime.getCustomFieldValueForDisplayInUI(typedValue.numberValue, unit, unitPreference, language);
|
|
3464
|
+
return value;
|
|
3458
3465
|
}
|
|
3459
3466
|
else {
|
|
3460
3467
|
return "";
|
|
@@ -3472,56 +3479,57 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
3472
3479
|
const typedDefinition = field.definition;
|
|
3473
3480
|
const typedValue = field.value;
|
|
3474
3481
|
const rules = getWebAddressValidationRules(typedDefinition);
|
|
3475
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (
|
|
3476
|
-
|
|
3482
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (_d = typedValue.stringValue) !== null && _d !== void 0 ? _d : "", dataTestId: `${typedDefinition.key}`, actions: !typedDefinition.uiEditable &&
|
|
3483
|
+
typedValue.stringValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { value: typedValue.stringValue, type: "WEB_ADDRESS" }), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
|
|
3477
3484
|
}
|
|
3478
3485
|
case irisAppRuntimeCoreApi.CustomFieldType.EMAIL: {
|
|
3479
3486
|
const typedDefinition = field.definition;
|
|
3480
3487
|
const typedValue = field.value;
|
|
3481
3488
|
const rules = getEmailValidationRules(typedDefinition);
|
|
3482
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (
|
|
3483
|
-
|
|
3489
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_e = typedDefinition.title) !== null && _e !== void 0 ? _e : "", defaultValue: (_f = typedValue.stringValue) !== null && _f !== void 0 ? _f : "", dataTestId: `${typedDefinition.key}`, actions: !typedDefinition.uiEditable &&
|
|
3490
|
+
typedValue.stringValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { value: typedValue.stringValue, type: "EMAIL" }), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
|
|
3484
3491
|
}
|
|
3485
3492
|
case irisAppRuntimeCoreApi.CustomFieldType.PHONE_NUMBER: {
|
|
3486
3493
|
const typedDefinition = field.definition;
|
|
3487
3494
|
const typedValue = field.value;
|
|
3488
3495
|
const rules = getPhoneNumberValidationRules(typedDefinition);
|
|
3489
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key, placeholder: (
|
|
3490
|
-
|
|
3496
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key, placeholder: (_g = typedDefinition.title) !== null && _g !== void 0 ? _g : "", defaultValue: (_h = typedValue.stringValue) !== null && _h !== void 0 ? _h : "", dataTestId: `${typedDefinition.key}`, actions: !typedDefinition.uiEditable &&
|
|
3497
|
+
typedValue.stringValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { value: typedValue.stringValue, type: "PHONE_NUMBER" }), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage === "" ? "Must be a phone number" : undefined }, validation.register(key, rules))));
|
|
3491
3498
|
}
|
|
3492
3499
|
case irisAppRuntimeCoreApi.CustomFieldType.STRING: {
|
|
3493
3500
|
const typedDefinition = field.definition;
|
|
3494
3501
|
const typedValue = field.value;
|
|
3495
3502
|
const rules = getStringValidationRules(typedDefinition);
|
|
3496
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (
|
|
3503
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (_j = typedDefinition.title) !== null && _j !== void 0 ? _j : "", defaultValue: (_k = typedValue.stringValue) !== null && _k !== void 0 ? _k : "", readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage, dataTestId: `${typedDefinition.key}` }, validation.register(key, rules))));
|
|
3497
3504
|
}
|
|
3498
3505
|
case irisAppRuntimeCoreApi.CustomFieldType.NUMBER: {
|
|
3499
3506
|
const typedDefinition = field.definition;
|
|
3500
3507
|
const rules = getNumberValidationRules(typedDefinition);
|
|
3501
|
-
const unit = unitPreference === "US_CUSTOMARY" && typedDefinition.unitUs
|
|
3508
|
+
const unit = unitPreference === "US_CUSTOMARY" && typedDefinition.unitUs
|
|
3509
|
+
? `${typedDefinition.unitUs}`
|
|
3510
|
+
: typedDefinition.unitSi
|
|
3511
|
+
? `${typedDefinition.unitSi}`
|
|
3512
|
+
: null;
|
|
3502
3513
|
const numberProps = {
|
|
3503
|
-
placeholder: (
|
|
3514
|
+
placeholder: (_l = typedDefinition.title) !== null && _l !== void 0 ? _l : "",
|
|
3504
3515
|
addonAfter: unit,
|
|
3505
3516
|
};
|
|
3506
|
-
|
|
3507
|
-
? ""
|
|
3508
|
-
: parseFloat(Number(numberValue).toPrecision(4));
|
|
3509
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${typedDefinition.key}-FormGroup`, disabled: !typedDefinition.uiEditable, children: isEditing ? (jsxRuntime.jsx(reactFormComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: typedDefinition.key ? typedDefinition.key : `numberField`, defaultValue: value, readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_u = typedDefinition.minimumNumber) !== null && _u !== void 0 ? _u : undefined, max: (_v = typedDefinition.maximumNumber) !== null && _v !== void 0 ? _v : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
|
|
3517
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${typedDefinition.key}-FormGroup`, disabled: !typedDefinition.uiEditable, children: isEditing ? (jsxRuntime.jsx(reactFormComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: typedDefinition.key ? typedDefinition.key : `numberField`, defaultValue: numberValue === null ? undefined : numberValue, readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_m = typedDefinition.minimumNumber) !== null && _m !== void 0 ? _m : undefined, max: (_o = typedDefinition.maximumNumber) !== null && _o !== void 0 ? _o : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
|
|
3510
3518
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
3511
3519
|
validation.register(key, rules).onChange(e);
|
|
3512
|
-
} }, numberProps))) : (jsxRuntime.jsx(reactFormComponents.BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: `${typedDefinition.key}`, defaultValue:
|
|
3520
|
+
} }, numberProps))) : (jsxRuntime.jsx(reactFormComponents.BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: `${typedDefinition.key}`, defaultValue: numberValue === null ? undefined : numberValue, readOnly: true, actions: jsxRuntime.jsx("div", { className: "tu-action-container", children: jsxRuntime.jsx(reactComponents.IconButton, { className: "tu-action-button", dataTestId: `${typedDefinition.key}-editIconButtonId`, size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) }));
|
|
3513
3521
|
}
|
|
3514
3522
|
case irisAppRuntimeCoreApi.CustomFieldType.BOOLEAN: {
|
|
3515
3523
|
const typedDefinition = field.definition;
|
|
3516
3524
|
const typedValue = field.value;
|
|
3517
3525
|
const rules = getBooleanValidationRules();
|
|
3518
|
-
return (jsxRuntime.jsx(BooleanCustomField, { label: (
|
|
3526
|
+
return (jsxRuntime.jsx(BooleanCustomField, { label: (_p = typedDefinition.title) !== null && _p !== void 0 ? _p : "", id: key || "boolean-field", defaultValue: (_q = typedValue.booleanValue) !== null && _q !== void 0 ? _q : undefined, readOnly: !typedDefinition.uiEditable, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.key}` }, key));
|
|
3519
3527
|
}
|
|
3520
3528
|
case irisAppRuntimeCoreApi.CustomFieldType.DROPDOWN: {
|
|
3521
3529
|
const typedDefinition = field.definition;
|
|
3522
3530
|
const typedValue = field.value;
|
|
3523
3531
|
const rules = getDropdownValidationRules();
|
|
3524
|
-
return (jsxRuntime.jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (
|
|
3532
|
+
return (jsxRuntime.jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (_r = typedValue.stringArrayValue) !== null && _r !== void 0 ? _r : undefined, disabled: !typedDefinition.uiEditable, allValues: (_s = typedDefinition.allValues) !== null && _s !== void 0 ? _s : undefined, multiSelect: (_t = typedDefinition.multiSelect) !== null && _t !== void 0 ? _t : false, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.key}` }, key));
|
|
3525
3533
|
}
|
|
3526
3534
|
case irisAppRuntimeCoreApi.CustomFieldType.DATE: {
|
|
3527
3535
|
const typedDefinition = field.definition;
|
|
@@ -3531,9 +3539,6 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
3531
3539
|
if (typedValue.dateValue !== undefined && typedValue.dateValue !== null) {
|
|
3532
3540
|
defaultValue = new Date(typedValue.dateValue);
|
|
3533
3541
|
}
|
|
3534
|
-
else if (typedDefinition.defaultDateValue !== undefined && typedDefinition.defaultDateValue !== null) {
|
|
3535
|
-
defaultValue = new Date(typedDefinition.defaultDateValue);
|
|
3536
|
-
}
|
|
3537
3542
|
return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${typedDefinition.key}`, id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
|
|
3538
3543
|
}
|
|
3539
3544
|
case irisAppRuntimeCoreApi.CustomFieldType.JSON: {
|
|
@@ -3542,13 +3547,13 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
3542
3547
|
case irisAppRuntimeCoreApi.CustomFieldType.MONETARY: {
|
|
3543
3548
|
const rules = getNumberValidationRules(field.definition);
|
|
3544
3549
|
const numberProps = {
|
|
3545
|
-
placeholder: (
|
|
3550
|
+
placeholder: (_u = field.definition.title) !== null && _u !== void 0 ? _u : "",
|
|
3546
3551
|
addonAfter: field.definition.currency,
|
|
3547
3552
|
};
|
|
3548
3553
|
const value = numberValue === undefined || numberValue === null || numberValue === ""
|
|
3549
3554
|
? ""
|
|
3550
3555
|
: parseFloat(Number(numberValue).toPrecision(4));
|
|
3551
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${field.definition.key}-FormGroup`, disabled: !field.definition.uiEditable, children: isEditing ? (jsxRuntime.jsx(reactFormComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, readOnly: !field.definition.uiEditable, step: "any", min: (
|
|
3556
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${field.definition.key}-FormGroup`, disabled: !field.definition.uiEditable, children: isEditing ? (jsxRuntime.jsx(reactFormComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, readOnly: !field.definition.uiEditable, step: "any", min: (_v = field.definition.minimumNumber) !== null && _v !== void 0 ? _v : undefined, max: (_w = field.definition.maximumNumber) !== null && _w !== void 0 ? _w : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
|
|
3552
3557
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
3553
3558
|
validation.register(key, rules).onChange(e);
|
|
3554
3559
|
} }, numberProps))) : (jsxRuntime.jsx(reactFormComponents.BaseInput, Object.assign({ type: "text", id: `${key}-monetary-field`, dataTestId: `${field.definition.key}`, defaultValue: value, readOnly: true, actions: jsxRuntime.jsx("div", { className: "tu-action-container", children: jsxRuntime.jsx(reactComponents.IconButton, { className: "tu-action-button", dataTestId: `${field.definition.key}-editIconButtonId`, size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) }));
|
|
@@ -3560,8 +3565,8 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
3560
3565
|
/**
|
|
3561
3566
|
*
|
|
3562
3567
|
*/
|
|
3563
|
-
const CustomField = ({ field, register, formState, setValue, unitPreference, fieldId }) => {
|
|
3564
|
-
const fieldComponent = useCustomFieldResolver(field, { register, setValue, formState }, unitPreference, fieldId);
|
|
3568
|
+
const CustomField = ({ field, register, formState, setValue, unitPreference, fieldId, language, }) => {
|
|
3569
|
+
const fieldComponent = useCustomFieldResolver(field, { register, setValue, formState }, unitPreference, language, fieldId);
|
|
3565
3570
|
return fieldComponent;
|
|
3566
3571
|
};
|
|
3567
3572
|
|
package/index.esm.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { CustomFieldRuntime } from '@trackunit/iris-app-runtime-core';
|
|
2
3
|
import { CustomFieldType } from '@trackunit/iris-app-runtime-core-api';
|
|
3
4
|
import { IconButton, Icon } from '@trackunit/react-components';
|
|
4
5
|
import { FormGroup, Checkbox, DateField, Select, NumberInput, BaseInput, TextField, ActionButton } from '@trackunit/react-form-components';
|
|
@@ -3425,13 +3426,19 @@ const getPhoneNumberValidationRules = (definition) => {
|
|
|
3425
3426
|
* @param fieldId An optional Id to override the definition.key
|
|
3426
3427
|
* @returns { JSX.Element } A JSX.Element or null if the field definition is undefined
|
|
3427
3428
|
*/
|
|
3428
|
-
const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldId) => {
|
|
3429
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w
|
|
3429
|
+
const useCustomFieldResolver = (field, validation, unitPreference = "SI", language, fieldId) => {
|
|
3430
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
3430
3431
|
const [isEditing, setIsEditing] = useState(false);
|
|
3431
3432
|
const [numberValue, setNumberValue] = useState(() => {
|
|
3432
3433
|
if ((field === null || field === void 0 ? void 0 : field.definition) && field.definition.type === CustomFieldType.NUMBER) {
|
|
3433
3434
|
const typedValue = field.value;
|
|
3434
|
-
|
|
3435
|
+
const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
|
|
3436
|
+
? `${field.definition.unitUs}`
|
|
3437
|
+
: field.definition.unitSi
|
|
3438
|
+
? `${field.definition.unitSi}`
|
|
3439
|
+
: null;
|
|
3440
|
+
const value = CustomFieldRuntime.getCustomFieldValueForDisplayInUI(typedValue.numberValue, unit, unitPreference, language);
|
|
3441
|
+
return value;
|
|
3435
3442
|
}
|
|
3436
3443
|
else {
|
|
3437
3444
|
return "";
|
|
@@ -3449,56 +3456,57 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
3449
3456
|
const typedDefinition = field.definition;
|
|
3450
3457
|
const typedValue = field.value;
|
|
3451
3458
|
const rules = getWebAddressValidationRules(typedDefinition);
|
|
3452
|
-
return (jsx(TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (
|
|
3453
|
-
|
|
3459
|
+
return (jsx(TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (_d = typedValue.stringValue) !== null && _d !== void 0 ? _d : "", dataTestId: `${typedDefinition.key}`, actions: !typedDefinition.uiEditable &&
|
|
3460
|
+
typedValue.stringValue && jsx(ActionButton, { value: typedValue.stringValue, type: "WEB_ADDRESS" }), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
|
|
3454
3461
|
}
|
|
3455
3462
|
case CustomFieldType.EMAIL: {
|
|
3456
3463
|
const typedDefinition = field.definition;
|
|
3457
3464
|
const typedValue = field.value;
|
|
3458
3465
|
const rules = getEmailValidationRules(typedDefinition);
|
|
3459
|
-
return (jsx(TextField, Object.assign({ id: key, label: title, placeholder: (
|
|
3460
|
-
|
|
3466
|
+
return (jsx(TextField, Object.assign({ id: key, label: title, placeholder: (_e = typedDefinition.title) !== null && _e !== void 0 ? _e : "", defaultValue: (_f = typedValue.stringValue) !== null && _f !== void 0 ? _f : "", dataTestId: `${typedDefinition.key}`, actions: !typedDefinition.uiEditable &&
|
|
3467
|
+
typedValue.stringValue && jsx(ActionButton, { value: typedValue.stringValue, type: "EMAIL" }), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
|
|
3461
3468
|
}
|
|
3462
3469
|
case CustomFieldType.PHONE_NUMBER: {
|
|
3463
3470
|
const typedDefinition = field.definition;
|
|
3464
3471
|
const typedValue = field.value;
|
|
3465
3472
|
const rules = getPhoneNumberValidationRules(typedDefinition);
|
|
3466
|
-
return (jsx(TextField, Object.assign({ label: title, id: key, placeholder: (
|
|
3467
|
-
|
|
3473
|
+
return (jsx(TextField, Object.assign({ label: title, id: key, placeholder: (_g = typedDefinition.title) !== null && _g !== void 0 ? _g : "", defaultValue: (_h = typedValue.stringValue) !== null && _h !== void 0 ? _h : "", dataTestId: `${typedDefinition.key}`, actions: !typedDefinition.uiEditable &&
|
|
3474
|
+
typedValue.stringValue && jsx(ActionButton, { value: typedValue.stringValue, type: "PHONE_NUMBER" }), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage === "" ? "Must be a phone number" : undefined }, validation.register(key, rules))));
|
|
3468
3475
|
}
|
|
3469
3476
|
case CustomFieldType.STRING: {
|
|
3470
3477
|
const typedDefinition = field.definition;
|
|
3471
3478
|
const typedValue = field.value;
|
|
3472
3479
|
const rules = getStringValidationRules(typedDefinition);
|
|
3473
|
-
return (jsx(TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (
|
|
3480
|
+
return (jsx(TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (_j = typedDefinition.title) !== null && _j !== void 0 ? _j : "", defaultValue: (_k = typedValue.stringValue) !== null && _k !== void 0 ? _k : "", readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage, dataTestId: `${typedDefinition.key}` }, validation.register(key, rules))));
|
|
3474
3481
|
}
|
|
3475
3482
|
case CustomFieldType.NUMBER: {
|
|
3476
3483
|
const typedDefinition = field.definition;
|
|
3477
3484
|
const rules = getNumberValidationRules(typedDefinition);
|
|
3478
|
-
const unit = unitPreference === "US_CUSTOMARY" && typedDefinition.unitUs
|
|
3485
|
+
const unit = unitPreference === "US_CUSTOMARY" && typedDefinition.unitUs
|
|
3486
|
+
? `${typedDefinition.unitUs}`
|
|
3487
|
+
: typedDefinition.unitSi
|
|
3488
|
+
? `${typedDefinition.unitSi}`
|
|
3489
|
+
: null;
|
|
3479
3490
|
const numberProps = {
|
|
3480
|
-
placeholder: (
|
|
3491
|
+
placeholder: (_l = typedDefinition.title) !== null && _l !== void 0 ? _l : "",
|
|
3481
3492
|
addonAfter: unit,
|
|
3482
3493
|
};
|
|
3483
|
-
|
|
3484
|
-
? ""
|
|
3485
|
-
: parseFloat(Number(numberValue).toPrecision(4));
|
|
3486
|
-
return (jsx(FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${typedDefinition.key}-FormGroup`, disabled: !typedDefinition.uiEditable, children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: typedDefinition.key ? typedDefinition.key : `numberField`, defaultValue: value, readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_u = typedDefinition.minimumNumber) !== null && _u !== void 0 ? _u : undefined, max: (_v = typedDefinition.maximumNumber) !== null && _v !== void 0 ? _v : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
|
|
3494
|
+
return (jsx(FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${typedDefinition.key}-FormGroup`, disabled: !typedDefinition.uiEditable, children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: typedDefinition.key ? typedDefinition.key : `numberField`, defaultValue: numberValue === null ? undefined : numberValue, readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_m = typedDefinition.minimumNumber) !== null && _m !== void 0 ? _m : undefined, max: (_o = typedDefinition.maximumNumber) !== null && _o !== void 0 ? _o : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
|
|
3487
3495
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
3488
3496
|
validation.register(key, rules).onChange(e);
|
|
3489
|
-
} }, numberProps))) : (jsx(BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: `${typedDefinition.key}`, defaultValue:
|
|
3497
|
+
} }, numberProps))) : (jsx(BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: `${typedDefinition.key}`, defaultValue: numberValue === null ? undefined : numberValue, readOnly: true, actions: jsx("div", { className: "tu-action-container", children: jsx(IconButton, { className: "tu-action-button", dataTestId: `${typedDefinition.key}-editIconButtonId`, size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) }));
|
|
3490
3498
|
}
|
|
3491
3499
|
case CustomFieldType.BOOLEAN: {
|
|
3492
3500
|
const typedDefinition = field.definition;
|
|
3493
3501
|
const typedValue = field.value;
|
|
3494
3502
|
const rules = getBooleanValidationRules();
|
|
3495
|
-
return (jsx(BooleanCustomField, { label: (
|
|
3503
|
+
return (jsx(BooleanCustomField, { label: (_p = typedDefinition.title) !== null && _p !== void 0 ? _p : "", id: key || "boolean-field", defaultValue: (_q = typedValue.booleanValue) !== null && _q !== void 0 ? _q : undefined, readOnly: !typedDefinition.uiEditable, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.key}` }, key));
|
|
3496
3504
|
}
|
|
3497
3505
|
case CustomFieldType.DROPDOWN: {
|
|
3498
3506
|
const typedDefinition = field.definition;
|
|
3499
3507
|
const typedValue = field.value;
|
|
3500
3508
|
const rules = getDropdownValidationRules();
|
|
3501
|
-
return (jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (
|
|
3509
|
+
return (jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (_r = typedValue.stringArrayValue) !== null && _r !== void 0 ? _r : undefined, disabled: !typedDefinition.uiEditable, allValues: (_s = typedDefinition.allValues) !== null && _s !== void 0 ? _s : undefined, multiSelect: (_t = typedDefinition.multiSelect) !== null && _t !== void 0 ? _t : false, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.key}` }, key));
|
|
3502
3510
|
}
|
|
3503
3511
|
case CustomFieldType.DATE: {
|
|
3504
3512
|
const typedDefinition = field.definition;
|
|
@@ -3508,9 +3516,6 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
3508
3516
|
if (typedValue.dateValue !== undefined && typedValue.dateValue !== null) {
|
|
3509
3517
|
defaultValue = new Date(typedValue.dateValue);
|
|
3510
3518
|
}
|
|
3511
|
-
else if (typedDefinition.defaultDateValue !== undefined && typedDefinition.defaultDateValue !== null) {
|
|
3512
|
-
defaultValue = new Date(typedDefinition.defaultDateValue);
|
|
3513
|
-
}
|
|
3514
3519
|
return (jsx(DateCustomField, { dataTestId: `${typedDefinition.key}`, id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
|
|
3515
3520
|
}
|
|
3516
3521
|
case CustomFieldType.JSON: {
|
|
@@ -3519,13 +3524,13 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
3519
3524
|
case CustomFieldType.MONETARY: {
|
|
3520
3525
|
const rules = getNumberValidationRules(field.definition);
|
|
3521
3526
|
const numberProps = {
|
|
3522
|
-
placeholder: (
|
|
3527
|
+
placeholder: (_u = field.definition.title) !== null && _u !== void 0 ? _u : "",
|
|
3523
3528
|
addonAfter: field.definition.currency,
|
|
3524
3529
|
};
|
|
3525
3530
|
const value = numberValue === undefined || numberValue === null || numberValue === ""
|
|
3526
3531
|
? ""
|
|
3527
3532
|
: parseFloat(Number(numberValue).toPrecision(4));
|
|
3528
|
-
return (jsx(FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${field.definition.key}-FormGroup`, disabled: !field.definition.uiEditable, children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, readOnly: !field.definition.uiEditable, step: "any", min: (
|
|
3533
|
+
return (jsx(FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${field.definition.key}-FormGroup`, disabled: !field.definition.uiEditable, children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, readOnly: !field.definition.uiEditable, step: "any", min: (_v = field.definition.minimumNumber) !== null && _v !== void 0 ? _v : undefined, max: (_w = field.definition.maximumNumber) !== null && _w !== void 0 ? _w : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
|
|
3529
3534
|
setNumberValue(e.target.value === "" ? null : e.target.value);
|
|
3530
3535
|
validation.register(key, rules).onChange(e);
|
|
3531
3536
|
} }, numberProps))) : (jsx(BaseInput, Object.assign({ type: "text", id: `${key}-monetary-field`, dataTestId: `${field.definition.key}`, defaultValue: value, readOnly: true, actions: jsx("div", { className: "tu-action-container", children: jsx(IconButton, { className: "tu-action-button", dataTestId: `${field.definition.key}-editIconButtonId`, size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) }));
|
|
@@ -3537,8 +3542,8 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
3537
3542
|
/**
|
|
3538
3543
|
*
|
|
3539
3544
|
*/
|
|
3540
|
-
const CustomField = ({ field, register, formState, setValue, unitPreference, fieldId }) => {
|
|
3541
|
-
const fieldComponent = useCustomFieldResolver(field, { register, setValue, formState }, unitPreference, fieldId);
|
|
3545
|
+
const CustomField = ({ field, register, formState, setValue, unitPreference, fieldId, language, }) => {
|
|
3546
|
+
const fieldComponent = useCustomFieldResolver(field, { register, setValue, formState }, unitPreference, language, fieldId);
|
|
3542
3547
|
return fieldComponent;
|
|
3543
3548
|
};
|
|
3544
3549
|
|
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/custom-field-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.464",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
7
7
|
"node": ">=18.x"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@trackunit/iris-app-runtime-core
|
|
10
|
+
"@trackunit/iris-app-runtime-core": "0.3.71",
|
|
11
|
+
"@trackunit/iris-app-runtime-core-api": "0.3.64",
|
|
11
12
|
"@trackunit/react-components": "0.1.155",
|
|
12
|
-
"@trackunit/react-core-contexts-test": "0.1.
|
|
13
|
-
"@trackunit/react-form-components": "0.0.
|
|
13
|
+
"@trackunit/react-core-contexts-test": "0.1.103",
|
|
14
|
+
"@trackunit/react-form-components": "0.0.136",
|
|
14
15
|
"libphonenumber-js": "1.10.36",
|
|
15
16
|
"react": "18.2.0",
|
|
16
17
|
"react-hook-form": "7.40.0",
|
package/src/CustomField.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ interface ICustomFieldProps {
|
|
|
8
8
|
formState: FormState<FieldValues>;
|
|
9
9
|
setValue: UseFormSetValue<FieldValues>;
|
|
10
10
|
unitPreference?: UnitPreference;
|
|
11
|
+
language?: string;
|
|
11
12
|
/**
|
|
12
13
|
* An optional Id to override the definition.key
|
|
13
14
|
*/
|
|
@@ -27,9 +28,9 @@ export interface ICustomFieldValidation {
|
|
|
27
28
|
* @param fieldId An optional Id to override the definition.key
|
|
28
29
|
* @returns { JSX.Element } A JSX.Element or null if the field definition is undefined
|
|
29
30
|
*/
|
|
30
|
-
export declare const useCustomFieldResolver: (field: ValueAndDefinition, validation: ICustomFieldValidation, unitPreference?: UnitPreference, fieldId?: string) => JSX.Element | null;
|
|
31
|
+
export declare const useCustomFieldResolver: (field: ValueAndDefinition, validation: ICustomFieldValidation, unitPreference?: UnitPreference, language?: string, fieldId?: string) => JSX.Element | null;
|
|
31
32
|
/**
|
|
32
33
|
*
|
|
33
34
|
*/
|
|
34
|
-
export declare const CustomField: ({ field, register, formState, setValue, unitPreference, fieldId }: ICustomFieldProps) => JSX.Element | null;
|
|
35
|
+
export declare const CustomField: ({ field, register, formState, setValue, unitPreference, fieldId, language, }: ICustomFieldProps) => JSX.Element | null;
|
|
35
36
|
export {};
|