@trackunit/custom-field-components 0.0.848 → 0.0.849
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 +28 -30
- package/index.esm.js +28 -30
- package/package.json +1 -1
- package/src/DropdownCustomField.d.ts +0 -6
package/index.cjs.js
CHANGED
|
@@ -187,9 +187,8 @@ const BooleanCustomField = (_a) => {
|
|
|
187
187
|
setInternalValue((value === undefined ? defaultValue : value) || false);
|
|
188
188
|
}, [value, setInternalValue, defaultValue]);
|
|
189
189
|
const onChangeHandler = React__namespace.useCallback((event) => {
|
|
190
|
-
var _a;
|
|
191
190
|
onChange && onChange(event);
|
|
192
|
-
const isChecked =
|
|
191
|
+
const isChecked = event.target.checked || false;
|
|
193
192
|
if (setValue) {
|
|
194
193
|
setValue(id, isChecked);
|
|
195
194
|
}
|
|
@@ -199,7 +198,7 @@ const BooleanCustomField = (_a) => {
|
|
|
199
198
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: internalValue.toString() }));
|
|
200
199
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
201
200
|
}, []); // register only once
|
|
202
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId
|
|
201
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, name: id, onChange: event => (!rest.readOnly ? onChangeHandler(event) : null) }, rest)) }));
|
|
203
202
|
};
|
|
204
203
|
|
|
205
204
|
/**
|
|
@@ -211,14 +210,12 @@ const BooleanCustomField = (_a) => {
|
|
|
211
210
|
const DateCustomField = (props) => {
|
|
212
211
|
const { setValue, defaultValue, register, id, validationRules } = props, rest = __rest(props, ["setValue", "defaultValue", "register", "id", "validationRules"]);
|
|
213
212
|
const onChangeHandler = React.useCallback((e) => {
|
|
214
|
-
var _a
|
|
215
|
-
|
|
216
|
-
setValue
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
});
|
|
221
|
-
}
|
|
213
|
+
var _a;
|
|
214
|
+
setValue &&
|
|
215
|
+
setValue(id, (_a = e.target.valueAsDate) === null || _a === void 0 ? void 0 : _a.toISOString(), {
|
|
216
|
+
shouldDirty: true,
|
|
217
|
+
shouldValidate: true,
|
|
218
|
+
});
|
|
222
219
|
}, [setValue, id]);
|
|
223
220
|
React.useEffect(() => {
|
|
224
221
|
const value = defaultValue && new Date(defaultValue);
|
|
@@ -264,7 +261,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
264
261
|
React__namespace.useEffect(() => {
|
|
265
262
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: selectedValue }));
|
|
266
263
|
}, [register, validationRules, selectedValue, id]);
|
|
267
|
-
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId
|
|
264
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.Select, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isDisabled: disabled, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
|
|
268
265
|
};
|
|
269
266
|
|
|
270
267
|
/**
|
|
@@ -347,6 +344,15 @@ const getStringValidationRules = (definition) => {
|
|
|
347
344
|
return definition.uiEditable
|
|
348
345
|
? Object.assign(Object.assign(Object.assign(Object.assign({}, maxLength), minLength), pattern), defaultRules) : defaultRules;
|
|
349
346
|
};
|
|
347
|
+
/**
|
|
348
|
+
* Generates validation rules by default for any type of field
|
|
349
|
+
*
|
|
350
|
+
* @returns {ValidationRules} The generated validation rules.
|
|
351
|
+
*/
|
|
352
|
+
const getDefaultValidationRules = () => {
|
|
353
|
+
const defaultRules = {};
|
|
354
|
+
return defaultRules;
|
|
355
|
+
};
|
|
350
356
|
/**
|
|
351
357
|
* Generates validation rules for a boolean field.
|
|
352
358
|
*
|
|
@@ -354,8 +360,7 @@ const getStringValidationRules = (definition) => {
|
|
|
354
360
|
* @returns {ValidationRules} The generated validation rules.
|
|
355
361
|
*/
|
|
356
362
|
const getBooleanValidationRules = (definition) => {
|
|
357
|
-
|
|
358
|
-
return defaultRules;
|
|
363
|
+
return getDefaultValidationRules();
|
|
359
364
|
};
|
|
360
365
|
/**
|
|
361
366
|
* Generates validation rules for a dropdown field.
|
|
@@ -364,8 +369,7 @@ const getBooleanValidationRules = (definition) => {
|
|
|
364
369
|
* @returns {ValidationRules} The generated validation rules.
|
|
365
370
|
*/
|
|
366
371
|
const getDropdownValidationRules = (definition) => {
|
|
367
|
-
|
|
368
|
-
return defaultRules;
|
|
372
|
+
return getDefaultValidationRules();
|
|
369
373
|
};
|
|
370
374
|
/**
|
|
371
375
|
* Generates validation rules for a date field.
|
|
@@ -428,8 +432,7 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
428
432
|
const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
|
|
429
433
|
? field.definition.unitUs
|
|
430
434
|
: field.definition.unitSi;
|
|
431
|
-
|
|
432
|
-
return value;
|
|
435
|
+
return irisAppRuntimeCore.getCustomFieldValueForDisplayInUI(fieldValue, unit, unitPreference, language);
|
|
433
436
|
}
|
|
434
437
|
else {
|
|
435
438
|
return "";
|
|
@@ -442,22 +445,22 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
442
445
|
const key = (_c = def === null || def === void 0 ? void 0 : def.key) !== null && _c !== void 0 ? _c : uniqueIdentifier;
|
|
443
446
|
const fieldError = uniqueIdentifier ? validation.formState.errors[uniqueIdentifier] : undefined;
|
|
444
447
|
const errorMessage = fieldError ? fieldError.message + "" : undefined;
|
|
445
|
-
const { description, title } = def !== null && def !== void 0 ? def : {};
|
|
446
|
-
if (
|
|
448
|
+
const { description, title, __typename } = def !== null && def !== void 0 ? def : {};
|
|
449
|
+
if (!__typename || !def) {
|
|
447
450
|
return null;
|
|
448
451
|
}
|
|
449
452
|
const isEditableCombined = isEditable && ((_d = field === null || field === void 0 ? void 0 : field.valueEditable) !== null && _d !== void 0 ? _d : true) && def.uiEditable;
|
|
450
453
|
switch (def.__typename) {
|
|
451
454
|
case "WebAddressFieldDefinition": {
|
|
452
455
|
const rules = getWebAddressValidationRules(def);
|
|
453
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue
|
|
456
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, 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 })))));
|
|
454
457
|
}
|
|
455
458
|
case "EmailFieldDefinition": {
|
|
456
459
|
const rules = getEmailValidationRules(def);
|
|
457
|
-
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue
|
|
460
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue ? jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }) : null, 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 })))));
|
|
458
461
|
}
|
|
459
462
|
case "PhoneNumberFieldDefinition": {
|
|
460
|
-
const rules = getPhoneNumberValidationRules(!
|
|
463
|
+
const rules = getPhoneNumberValidationRules(!def.uiEditable);
|
|
461
464
|
return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value }, validation.register(uniqueIdentifier, Object.assign({}, rules)))));
|
|
462
465
|
}
|
|
463
466
|
case "StringFieldDefinition": {
|
|
@@ -535,11 +538,7 @@ const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
|
|
|
535
538
|
}
|
|
536
539
|
case "DateFieldDefinition": {
|
|
537
540
|
const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DateFieldValueAndDefinition" ? field.dateValue : null;
|
|
538
|
-
|
|
539
|
-
if (value !== undefined && value !== null) {
|
|
540
|
-
defaultValue = new Date(value);
|
|
541
|
-
}
|
|
542
|
-
return defaultValue;
|
|
541
|
+
return value !== null && value !== void 0 ? value : undefined;
|
|
543
542
|
}
|
|
544
543
|
case "JsonFieldDefinition": {
|
|
545
544
|
return null;
|
|
@@ -563,8 +562,7 @@ const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
|
|
|
563
562
|
* @returns {JSX.Element | null} - The resolved custom field component or null if the field cannot be resolved.
|
|
564
563
|
*/
|
|
565
564
|
const CustomField = (props) => {
|
|
566
|
-
|
|
567
|
-
return fieldComponent;
|
|
565
|
+
return useCustomFieldResolver(props);
|
|
568
566
|
};
|
|
569
567
|
|
|
570
568
|
/*
|
package/index.esm.js
CHANGED
|
@@ -164,9 +164,8 @@ const BooleanCustomField = (_a) => {
|
|
|
164
164
|
setInternalValue((value === undefined ? defaultValue : value) || false);
|
|
165
165
|
}, [value, setInternalValue, defaultValue]);
|
|
166
166
|
const onChangeHandler = React.useCallback((event) => {
|
|
167
|
-
var _a;
|
|
168
167
|
onChange && onChange(event);
|
|
169
|
-
const isChecked =
|
|
168
|
+
const isChecked = event.target.checked || false;
|
|
170
169
|
if (setValue) {
|
|
171
170
|
setValue(id, isChecked);
|
|
172
171
|
}
|
|
@@ -176,7 +175,7 @@ const BooleanCustomField = (_a) => {
|
|
|
176
175
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: internalValue.toString() }));
|
|
177
176
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
178
177
|
}, []); // register only once
|
|
179
|
-
return (jsx(FormGroup, { dataTestId: dataTestId
|
|
178
|
+
return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, name: id, onChange: event => (!rest.readOnly ? onChangeHandler(event) : null) }, rest)) }));
|
|
180
179
|
};
|
|
181
180
|
|
|
182
181
|
/**
|
|
@@ -188,14 +187,12 @@ const BooleanCustomField = (_a) => {
|
|
|
188
187
|
const DateCustomField = (props) => {
|
|
189
188
|
const { setValue, defaultValue, register, id, validationRules } = props, rest = __rest(props, ["setValue", "defaultValue", "register", "id", "validationRules"]);
|
|
190
189
|
const onChangeHandler = useCallback((e) => {
|
|
191
|
-
var _a
|
|
192
|
-
|
|
193
|
-
setValue
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
});
|
|
198
|
-
}
|
|
190
|
+
var _a;
|
|
191
|
+
setValue &&
|
|
192
|
+
setValue(id, (_a = e.target.valueAsDate) === null || _a === void 0 ? void 0 : _a.toISOString(), {
|
|
193
|
+
shouldDirty: true,
|
|
194
|
+
shouldValidate: true,
|
|
195
|
+
});
|
|
199
196
|
}, [setValue, id]);
|
|
200
197
|
useEffect(() => {
|
|
201
198
|
const value = defaultValue && new Date(defaultValue);
|
|
@@ -241,7 +238,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
241
238
|
React.useEffect(() => {
|
|
242
239
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: selectedValue }));
|
|
243
240
|
}, [register, validationRules, selectedValue, id]);
|
|
244
|
-
return (jsx(FormGroup, { dataTestId: dataTestId
|
|
241
|
+
return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(Select, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isDisabled: disabled, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
|
|
245
242
|
};
|
|
246
243
|
|
|
247
244
|
/**
|
|
@@ -324,6 +321,15 @@ const getStringValidationRules = (definition) => {
|
|
|
324
321
|
return definition.uiEditable
|
|
325
322
|
? Object.assign(Object.assign(Object.assign(Object.assign({}, maxLength), minLength), pattern), defaultRules) : defaultRules;
|
|
326
323
|
};
|
|
324
|
+
/**
|
|
325
|
+
* Generates validation rules by default for any type of field
|
|
326
|
+
*
|
|
327
|
+
* @returns {ValidationRules} The generated validation rules.
|
|
328
|
+
*/
|
|
329
|
+
const getDefaultValidationRules = () => {
|
|
330
|
+
const defaultRules = {};
|
|
331
|
+
return defaultRules;
|
|
332
|
+
};
|
|
327
333
|
/**
|
|
328
334
|
* Generates validation rules for a boolean field.
|
|
329
335
|
*
|
|
@@ -331,8 +337,7 @@ const getStringValidationRules = (definition) => {
|
|
|
331
337
|
* @returns {ValidationRules} The generated validation rules.
|
|
332
338
|
*/
|
|
333
339
|
const getBooleanValidationRules = (definition) => {
|
|
334
|
-
|
|
335
|
-
return defaultRules;
|
|
340
|
+
return getDefaultValidationRules();
|
|
336
341
|
};
|
|
337
342
|
/**
|
|
338
343
|
* Generates validation rules for a dropdown field.
|
|
@@ -341,8 +346,7 @@ const getBooleanValidationRules = (definition) => {
|
|
|
341
346
|
* @returns {ValidationRules} The generated validation rules.
|
|
342
347
|
*/
|
|
343
348
|
const getDropdownValidationRules = (definition) => {
|
|
344
|
-
|
|
345
|
-
return defaultRules;
|
|
349
|
+
return getDefaultValidationRules();
|
|
346
350
|
};
|
|
347
351
|
/**
|
|
348
352
|
* Generates validation rules for a date field.
|
|
@@ -405,8 +409,7 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
405
409
|
const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
|
|
406
410
|
? field.definition.unitUs
|
|
407
411
|
: field.definition.unitSi;
|
|
408
|
-
|
|
409
|
-
return value;
|
|
412
|
+
return getCustomFieldValueForDisplayInUI(fieldValue, unit, unitPreference, language);
|
|
410
413
|
}
|
|
411
414
|
else {
|
|
412
415
|
return "";
|
|
@@ -419,22 +422,22 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
|
|
|
419
422
|
const key = (_c = def === null || def === void 0 ? void 0 : def.key) !== null && _c !== void 0 ? _c : uniqueIdentifier;
|
|
420
423
|
const fieldError = uniqueIdentifier ? validation.formState.errors[uniqueIdentifier] : undefined;
|
|
421
424
|
const errorMessage = fieldError ? fieldError.message + "" : undefined;
|
|
422
|
-
const { description, title } = def !== null && def !== void 0 ? def : {};
|
|
423
|
-
if (
|
|
425
|
+
const { description, title, __typename } = def !== null && def !== void 0 ? def : {};
|
|
426
|
+
if (!__typename || !def) {
|
|
424
427
|
return null;
|
|
425
428
|
}
|
|
426
429
|
const isEditableCombined = isEditable && ((_d = field === null || field === void 0 ? void 0 : field.valueEditable) !== null && _d !== void 0 ? _d : true) && def.uiEditable;
|
|
427
430
|
switch (def.__typename) {
|
|
428
431
|
case "WebAddressFieldDefinition": {
|
|
429
432
|
const rules = getWebAddressValidationRules(def);
|
|
430
|
-
return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue
|
|
433
|
+
return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }) : null, 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 })))));
|
|
431
434
|
}
|
|
432
435
|
case "EmailFieldDefinition": {
|
|
433
436
|
const rules = getEmailValidationRules(def);
|
|
434
|
-
return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue
|
|
437
|
+
return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue ? jsx(ActionButton, { type: "EMAIL", value: formValue }) : null, 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 })))));
|
|
435
438
|
}
|
|
436
439
|
case "PhoneNumberFieldDefinition": {
|
|
437
|
-
const rules = getPhoneNumberValidationRules(!
|
|
440
|
+
const rules = getPhoneNumberValidationRules(!def.uiEditable);
|
|
438
441
|
return (jsx(PhoneField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value }, validation.register(uniqueIdentifier, Object.assign({}, rules)))));
|
|
439
442
|
}
|
|
440
443
|
case "StringFieldDefinition": {
|
|
@@ -512,11 +515,7 @@ const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
|
|
|
512
515
|
}
|
|
513
516
|
case "DateFieldDefinition": {
|
|
514
517
|
const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DateFieldValueAndDefinition" ? field.dateValue : null;
|
|
515
|
-
|
|
516
|
-
if (value !== undefined && value !== null) {
|
|
517
|
-
defaultValue = new Date(value);
|
|
518
|
-
}
|
|
519
|
-
return defaultValue;
|
|
518
|
+
return value !== null && value !== void 0 ? value : undefined;
|
|
520
519
|
}
|
|
521
520
|
case "JsonFieldDefinition": {
|
|
522
521
|
return null;
|
|
@@ -540,8 +539,7 @@ const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
|
|
|
540
539
|
* @returns {JSX.Element | null} - The resolved custom field component or null if the field cannot be resolved.
|
|
541
540
|
*/
|
|
542
541
|
const CustomField = (props) => {
|
|
543
|
-
|
|
544
|
-
return fieldComponent;
|
|
542
|
+
return useCustomFieldResolver(props);
|
|
545
543
|
};
|
|
546
544
|
|
|
547
545
|
/*
|
package/package.json
CHANGED
|
@@ -8,12 +8,6 @@ export interface DropdownCustomFieldProps extends FormGroupExposedProps {
|
|
|
8
8
|
* @memberof DropdownCustomFieldProps
|
|
9
9
|
*/
|
|
10
10
|
id: string;
|
|
11
|
-
/**
|
|
12
|
-
* A text to be displayed under the input with a short description of field purpose
|
|
13
|
-
*
|
|
14
|
-
* @memberof DropdownCustomFieldProps
|
|
15
|
-
*/
|
|
16
|
-
description?: string;
|
|
17
11
|
/**
|
|
18
12
|
* A default value to be displayed by a input field
|
|
19
13
|
*
|