@trackunit/custom-field-components 0.0.695 → 0.0.698

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.
Files changed (4) hide show
  1. package/index.cjs.js +51 -52
  2. package/index.esm.js +51 -52
  3. package/package.json +1 -1
  4. package/src/CustomField.d.ts +7 -3
package/index.cjs.js CHANGED
@@ -408,12 +408,12 @@ const useUnitTranslation = () => {
408
408
  * and functions for form registration and state management.
409
409
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
410
410
  */
411
- const useCustomFieldResolver = ({ field, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
412
- var _a, _b, _c, _d, _e, _f, _g;
411
+ const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
412
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
413
413
  const validation = { register, setValue, formState };
414
414
  const { unitTranslation } = useUnitTranslation();
415
415
  const [numberValue, setNumberValue] = React.useState(() => {
416
- if (field.definition && field.__typename === "NumberFieldValueAndDefinition") {
416
+ if ((field === null || field === void 0 ? void 0 : field.definition) && field.__typename === "NumberFieldValueAndDefinition") {
417
417
  const fieldValue = field.numberValue;
418
418
  const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
419
419
  ? field.definition.unitUs
@@ -425,91 +425,90 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, formValu
425
425
  return "";
426
426
  }
427
427
  });
428
- if ((field === null || field === void 0 ? void 0 : field.definition) === undefined) {
428
+ const def = (_a = field === null || field === void 0 ? void 0 : field.definition) !== null && _a !== void 0 ? _a : definition;
429
+ if (def === undefined || def.__typename === undefined) {
429
430
  return null;
430
431
  }
431
- const key = (_a = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.key) !== null && _a !== void 0 ? _a : "";
432
- const uniqueIdentifier = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.id;
432
+ const uniqueIdentifier = (_b = fieldId !== null && fieldId !== void 0 ? fieldId : def === null || def === void 0 ? void 0 : def.id) !== null && _b !== void 0 ? _b : "";
433
+ const key = (_c = def === null || def === void 0 ? void 0 : def.key) !== null && _c !== void 0 ? _c : uniqueIdentifier;
433
434
  const fieldError = key ? validation.formState.errors[key] : undefined;
434
435
  const errorMessage = fieldError ? fieldError.message + "" : undefined;
435
- const { description, title } = field.definition;
436
- const isEditableCombined = isEditable !== null && isEditable !== void 0 ? isEditable : field.definition.uiEditable;
437
- switch (field.__typename) {
438
- case "WebAddressFieldValueAndDefinition": {
439
- const value = field.stringValue;
440
- const rules = getWebAddressValidationRules(field.definition);
441
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
436
+ const { description, title } = def !== null && def !== void 0 ? def : {};
437
+ const isEditableCombined = isEditable !== null && isEditable !== void 0 ? isEditable : def === null || def === void 0 ? void 0 : def.uiEditable;
438
+ switch (def.__typename) {
439
+ case "WebAddressFieldDefinition": {
440
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "WebAddressFieldValueAndDefinition" ? field.stringValue : undefined;
441
+ const rules = getWebAddressValidationRules(def);
442
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
442
443
  }
443
- case "EmailFieldValueAndDefinition": {
444
- const value = field.stringValue;
445
- const rules = getEmailValidationRules(field.definition);
446
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
444
+ case "EmailFieldDefinition": {
445
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "EmailFieldValueAndDefinition" ? field.stringValue : undefined;
446
+ const rules = getEmailValidationRules(def);
447
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
447
448
  }
448
- case "PhoneNumberFieldValueAndDefinition": {
449
- const value = field.stringValue;
450
- const rules = getPhoneNumberValidationRules(field.definition);
451
- return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
452
- validation.setValue(key, props.phone, {
449
+ case "PhoneNumberFieldDefinition": {
450
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "PhoneNumberFieldValueAndDefinition" ? field.stringValue : undefined;
451
+ const rules = getPhoneNumberValidationRules(def);
452
+ return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
453
+ validation.setValue(uniqueIdentifier, props.phone, {
453
454
  shouldDirty: true,
454
455
  shouldValidate: true,
455
456
  });
456
457
  } })));
457
458
  }
458
- case "StringFieldValueAndDefinition": {
459
- const value = field.stringValue;
460
- const rules = getStringValidationRules(field.definition);
461
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
459
+ case "StringFieldDefinition": {
460
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "StringFieldValueAndDefinition" ? field.stringValue : undefined;
461
+ const rules = getStringValidationRules(def);
462
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
462
463
  }
463
- case "NumberFieldValueAndDefinition": {
464
- const value = field.numberValue;
465
- const rules = getNumberValidationRules(field.definition);
466
- const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
467
- ? field.definition.unitUs
468
- : field.definition.unitSi;
464
+ case "NumberFieldDefinition": {
465
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "NumberFieldValueAndDefinition" ? field.numberValue : undefined;
466
+ const rules = getNumberValidationRules(def);
467
+ const unit = unitPreference === "US_CUSTOMARY" && def.unitUs ? def.unitUs : def.unitSi;
469
468
  const numberProps = {
470
469
  placeholder: title !== null && title !== void 0 ? title : "",
471
470
  addonAfter: unitTranslation(unit),
472
471
  };
473
- return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), numberProps)));
472
+ return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_d = def.maximumNumber) !== null && _d !== void 0 ? _d : undefined, min: (_e = def.minimumNumber) !== null && _e !== void 0 ? _e : undefined, readOnly: !isEditableCombined, step: def.isInteger ? 1 : "any" }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })), numberProps)));
474
473
  }
475
- case "BooleanFieldValueAndDefinition": {
476
- const value = field.booleanValue;
477
- const rules = getBooleanValidationRules(field.definition);
478
- return (jsxRuntime.jsx(BooleanCustomField, { dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
474
+ case "BooleanFieldDefinition": {
475
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "BooleanFieldValueAndDefinition" ? field.booleanValue : undefined;
476
+ const rules = getBooleanValidationRules();
477
+ return (jsxRuntime.jsx(BooleanCustomField, { dataTestId: `${key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
479
478
  }
480
- case "DropDownFieldValueAndDefinition": {
481
- const value = field.stringArrayValue;
482
- const rules = getDropdownValidationRules(field.definition);
483
- return (jsxRuntime.jsx(DropdownCustomField, { allValues: (_d = field.definition.allValues) !== null && _d !== void 0 ? _d : undefined, dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_e = field.definition.multiSelect) !== null && _e !== void 0 ? _e : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
479
+ case "DropDownFieldDefinition": {
480
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DropDownFieldValueAndDefinition" ? field.stringArrayValue : undefined;
481
+ const rules = getDropdownValidationRules();
482
+ return (jsxRuntime.jsx(DropdownCustomField, { allValues: (_f = def.allValues) !== null && _f !== void 0 ? _f : undefined, dataTestId: `${key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_g = def.multiSelect) !== null && _g !== void 0 ? _g : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
484
483
  }
485
- case "DateFieldValueAndDefinition": {
486
- const value = field.dateValue;
487
- const rules = getDateValidationRules(field.definition);
484
+ case "DateFieldDefinition": {
485
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DateFieldValueAndDefinition" ? field.dateValue : undefined;
486
+ const rules = getDateValidationRules();
488
487
  let defaultValue;
489
488
  if (value !== undefined && value !== null) {
490
489
  defaultValue = new Date(value);
491
490
  }
492
- return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${field.definition.key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
491
+ return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
493
492
  }
494
- case "JsonFieldValueAndDefinition": {
493
+ case "JsonFieldDefinition": {
495
494
  return null;
496
495
  }
497
- case "MonetaryFieldValueAndDefinition": {
498
- const rules = getNumberValidationRules(field.definition);
496
+ case "MonetaryFieldDefinition": {
497
+ const rules = getNumberValidationRules(def);
499
498
  const numberProps = {
500
499
  placeholder: title !== null && title !== void 0 ? title : "",
501
- addonAfter: field.definition.currency,
500
+ addonAfter: def.currency,
502
501
  };
503
502
  const value = numberValue === undefined || numberValue === null || numberValue === ""
504
503
  ? ""
505
504
  : parseFloat(Number(numberValue).toPrecision(4));
506
- return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_f = field.definition.maximumNumber) !== null && _f !== void 0 ? _f : undefined, min: (_g = field.definition.minimumNumber) !== null && _g !== void 0 ? _g : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(key, rules), { onChange: e => {
505
+ return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_h = def.maximumNumber) !== null && _h !== void 0 ? _h : undefined, min: (_j = def.minimumNumber) !== null && _j !== void 0 ? _j : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(uniqueIdentifier, rules), { onChange: e => {
507
506
  setNumberValue(e.target.value === "" ? null : e.target.value);
508
- validation.register(key, rules).onChange(e);
507
+ validation.register(uniqueIdentifier, rules).onChange(e);
509
508
  } }, numberProps)));
510
509
  }
511
510
  default:
512
- return sharedUtils.exhaustiveCheck(field);
511
+ return sharedUtils.exhaustiveCheck(def.__typename);
513
512
  }
514
513
  };
515
514
  /**
package/index.esm.js CHANGED
@@ -385,12 +385,12 @@ const useUnitTranslation = () => {
385
385
  * and functions for form registration and state management.
386
386
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
387
387
  */
388
- const useCustomFieldResolver = ({ field, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
389
- var _a, _b, _c, _d, _e, _f, _g;
388
+ const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
389
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
390
390
  const validation = { register, setValue, formState };
391
391
  const { unitTranslation } = useUnitTranslation();
392
392
  const [numberValue, setNumberValue] = useState(() => {
393
- if (field.definition && field.__typename === "NumberFieldValueAndDefinition") {
393
+ if ((field === null || field === void 0 ? void 0 : field.definition) && field.__typename === "NumberFieldValueAndDefinition") {
394
394
  const fieldValue = field.numberValue;
395
395
  const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
396
396
  ? field.definition.unitUs
@@ -402,91 +402,90 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, formValu
402
402
  return "";
403
403
  }
404
404
  });
405
- if ((field === null || field === void 0 ? void 0 : field.definition) === undefined) {
405
+ const def = (_a = field === null || field === void 0 ? void 0 : field.definition) !== null && _a !== void 0 ? _a : definition;
406
+ if (def === undefined || def.__typename === undefined) {
406
407
  return null;
407
408
  }
408
- const key = (_a = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.key) !== null && _a !== void 0 ? _a : "";
409
- const uniqueIdentifier = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.id;
409
+ const uniqueIdentifier = (_b = fieldId !== null && fieldId !== void 0 ? fieldId : def === null || def === void 0 ? void 0 : def.id) !== null && _b !== void 0 ? _b : "";
410
+ const key = (_c = def === null || def === void 0 ? void 0 : def.key) !== null && _c !== void 0 ? _c : uniqueIdentifier;
410
411
  const fieldError = key ? validation.formState.errors[key] : undefined;
411
412
  const errorMessage = fieldError ? fieldError.message + "" : undefined;
412
- const { description, title } = field.definition;
413
- const isEditableCombined = isEditable !== null && isEditable !== void 0 ? isEditable : field.definition.uiEditable;
414
- switch (field.__typename) {
415
- case "WebAddressFieldValueAndDefinition": {
416
- const value = field.stringValue;
417
- const rules = getWebAddressValidationRules(field.definition);
418
- return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
413
+ const { description, title } = def !== null && def !== void 0 ? def : {};
414
+ const isEditableCombined = isEditable !== null && isEditable !== void 0 ? isEditable : def === null || def === void 0 ? void 0 : def.uiEditable;
415
+ switch (def.__typename) {
416
+ case "WebAddressFieldDefinition": {
417
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "WebAddressFieldValueAndDefinition" ? field.stringValue : undefined;
418
+ const rules = getWebAddressValidationRules(def);
419
+ return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
419
420
  }
420
- case "EmailFieldValueAndDefinition": {
421
- const value = field.stringValue;
422
- const rules = getEmailValidationRules(field.definition);
423
- return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
421
+ case "EmailFieldDefinition": {
422
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "EmailFieldValueAndDefinition" ? field.stringValue : undefined;
423
+ const rules = getEmailValidationRules(def);
424
+ return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
424
425
  }
425
- case "PhoneNumberFieldValueAndDefinition": {
426
- const value = field.stringValue;
427
- const rules = getPhoneNumberValidationRules(field.definition);
428
- return (jsx(PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
429
- validation.setValue(key, props.phone, {
426
+ case "PhoneNumberFieldDefinition": {
427
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "PhoneNumberFieldValueAndDefinition" ? field.stringValue : undefined;
428
+ const rules = getPhoneNumberValidationRules(def);
429
+ return (jsx(PhoneField, Object.assign({ dataTestId: `${key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
430
+ validation.setValue(uniqueIdentifier, props.phone, {
430
431
  shouldDirty: true,
431
432
  shouldValidate: true,
432
433
  });
433
434
  } })));
434
435
  }
435
- case "StringFieldValueAndDefinition": {
436
- const value = field.stringValue;
437
- const rules = getStringValidationRules(field.definition);
438
- return (jsx(TextField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
436
+ case "StringFieldDefinition": {
437
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "StringFieldValueAndDefinition" ? field.stringValue : undefined;
438
+ const rules = getStringValidationRules(def);
439
+ return (jsx(TextField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
439
440
  }
440
- case "NumberFieldValueAndDefinition": {
441
- const value = field.numberValue;
442
- const rules = getNumberValidationRules(field.definition);
443
- const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
444
- ? field.definition.unitUs
445
- : field.definition.unitSi;
441
+ case "NumberFieldDefinition": {
442
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "NumberFieldValueAndDefinition" ? field.numberValue : undefined;
443
+ const rules = getNumberValidationRules(def);
444
+ const unit = unitPreference === "US_CUSTOMARY" && def.unitUs ? def.unitUs : def.unitSi;
446
445
  const numberProps = {
447
446
  placeholder: title !== null && title !== void 0 ? title : "",
448
447
  addonAfter: unitTranslation(unit),
449
448
  };
450
- return (jsx(NumberField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), numberProps)));
449
+ return (jsx(NumberField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_d = def.maximumNumber) !== null && _d !== void 0 ? _d : undefined, min: (_e = def.minimumNumber) !== null && _e !== void 0 ? _e : undefined, readOnly: !isEditableCombined, step: def.isInteger ? 1 : "any" }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })), numberProps)));
451
450
  }
452
- case "BooleanFieldValueAndDefinition": {
453
- const value = field.booleanValue;
454
- const rules = getBooleanValidationRules(field.definition);
455
- return (jsx(BooleanCustomField, { dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
451
+ case "BooleanFieldDefinition": {
452
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "BooleanFieldValueAndDefinition" ? field.booleanValue : undefined;
453
+ const rules = getBooleanValidationRules();
454
+ return (jsx(BooleanCustomField, { dataTestId: `${key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
456
455
  }
457
- case "DropDownFieldValueAndDefinition": {
458
- const value = field.stringArrayValue;
459
- const rules = getDropdownValidationRules(field.definition);
460
- return (jsx(DropdownCustomField, { allValues: (_d = field.definition.allValues) !== null && _d !== void 0 ? _d : undefined, dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_e = field.definition.multiSelect) !== null && _e !== void 0 ? _e : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
456
+ case "DropDownFieldDefinition": {
457
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DropDownFieldValueAndDefinition" ? field.stringArrayValue : undefined;
458
+ const rules = getDropdownValidationRules();
459
+ return (jsx(DropdownCustomField, { allValues: (_f = def.allValues) !== null && _f !== void 0 ? _f : undefined, dataTestId: `${key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_g = def.multiSelect) !== null && _g !== void 0 ? _g : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
461
460
  }
462
- case "DateFieldValueAndDefinition": {
463
- const value = field.dateValue;
464
- const rules = getDateValidationRules(field.definition);
461
+ case "DateFieldDefinition": {
462
+ const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DateFieldValueAndDefinition" ? field.dateValue : undefined;
463
+ const rules = getDateValidationRules();
465
464
  let defaultValue;
466
465
  if (value !== undefined && value !== null) {
467
466
  defaultValue = new Date(value);
468
467
  }
469
- return (jsx(DateCustomField, { dataTestId: `${field.definition.key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
468
+ return (jsx(DateCustomField, { dataTestId: `${key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
470
469
  }
471
- case "JsonFieldValueAndDefinition": {
470
+ case "JsonFieldDefinition": {
472
471
  return null;
473
472
  }
474
- case "MonetaryFieldValueAndDefinition": {
475
- const rules = getNumberValidationRules(field.definition);
473
+ case "MonetaryFieldDefinition": {
474
+ const rules = getNumberValidationRules(def);
476
475
  const numberProps = {
477
476
  placeholder: title !== null && title !== void 0 ? title : "",
478
- addonAfter: field.definition.currency,
477
+ addonAfter: def.currency,
479
478
  };
480
479
  const value = numberValue === undefined || numberValue === null || numberValue === ""
481
480
  ? ""
482
481
  : parseFloat(Number(numberValue).toPrecision(4));
483
- return (jsx(NumberField, Object.assign({ dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_f = field.definition.maximumNumber) !== null && _f !== void 0 ? _f : undefined, min: (_g = field.definition.minimumNumber) !== null && _g !== void 0 ? _g : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(key, rules), { onChange: e => {
482
+ return (jsx(NumberField, Object.assign({ dataTestId: key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_h = def.maximumNumber) !== null && _h !== void 0 ? _h : undefined, min: (_j = def.minimumNumber) !== null && _j !== void 0 ? _j : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(uniqueIdentifier, rules), { onChange: e => {
484
483
  setNumberValue(e.target.value === "" ? null : e.target.value);
485
- validation.register(key, rules).onChange(e);
484
+ validation.register(uniqueIdentifier, rules).onChange(e);
486
485
  } }, numberProps)));
487
486
  }
488
487
  default:
489
- return exhaustiveCheck(field);
488
+ return exhaustiveCheck(def.__typename);
490
489
  }
491
490
  };
492
491
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/custom-field-components",
3
- "version": "0.0.695",
3
+ "version": "0.0.698",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
package/src/CustomField.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { CustomFieldValueAndDefinition } from "@trackunit/custom-field-api";
2
+ import { CustomFieldDefinition, CustomFieldValueAndDefinition } from "@trackunit/custom-field-api";
3
3
  import { FieldValues, FormState, UseFormRegister, UseFormSetValue } from "react-hook-form";
4
4
  import { UnitPreference } from "./UnitPreference";
5
5
  /**
@@ -10,7 +10,11 @@ interface CustomFieldProps {
10
10
  /**
11
11
  * The value and definition of the custom field to be rendered.
12
12
  */
13
- field: CustomFieldValueAndDefinition;
13
+ field?: CustomFieldValueAndDefinition;
14
+ /**
15
+ * The definition of the custom field to be rendered.
16
+ */
17
+ definition?: CustomFieldDefinition;
14
18
  /**
15
19
  * A function from react-hook-form to register input for validation.
16
20
  */
@@ -53,7 +57,7 @@ interface CustomFieldProps {
53
57
  * and functions for form registration and state management.
54
58
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
55
59
  */
56
- export declare const useCustomFieldResolver: ({ field, register, setValue, formState, formValue, unitPreference, language, fieldId, isEditable, }: CustomFieldProps) => JSX.Element | null;
60
+ export declare const useCustomFieldResolver: ({ field, definition, register, setValue, formState, formValue, unitPreference, language, fieldId, isEditable, }: CustomFieldProps) => JSX.Element | null;
57
61
  /**
58
62
  * CustomField is a React component that takes in the properties of a custom field and renders it.
59
63
  * It utilizes the `useCustomFieldResolver` hook to resolve the field into an input element