@trackunit/custom-field-components 0.0.278 → 0.0.279

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.js CHANGED
@@ -33,6 +33,12 @@ function __rest(s, e) {
33
33
  return t;
34
34
  }
35
35
 
36
+ /**
37
+ * A component that can be used to render a boolean field
38
+ *
39
+ * @param options BooleanCustomFieldProps - options for the component
40
+ * @returns { JSX.Element } JSX.Element - a component that can be used to render a boolean field
41
+ */
36
42
  const BooleanCustomField = (_a) => {
37
43
  var { defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText } = _a, rest = __rest(_a, ["defaultValue", "dataTestId", "onChange", "value", "id", "setValue", "register", "validationRules", "disabled", "label", "tip", "isInvalid", "errorMessage", "helpAddon", "maxLength", "helpText"]);
38
44
  const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
@@ -57,6 +63,12 @@ const BooleanCustomField = (_a) => {
57
63
  return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, id: id, disabled: disabled, name: id, onChange: onChangeHandler, isInvalid: renderAsInvalid }, rest)) })));
58
64
  };
59
65
 
66
+ /**
67
+ * A component that can be used to render a date field
68
+ *
69
+ * @param props DateCustomFieldProps - options for the component
70
+ * @returns { JSX.Element } JSX.Element - a component that can be used to render a date field
71
+ */
60
72
  const DateCustomField = (props) => {
61
73
  const { setValue, defaultValue, register, id, validationRules } = props, rest = __rest(props, ["setValue", "defaultValue", "register", "id", "validationRules"]);
62
74
  const onChangeHandler = useCallback((e) => {
@@ -75,6 +87,12 @@ const DateCustomField = (props) => {
75
87
  const convertToValueFormat = (value) => {
76
88
  return { label: value, value };
77
89
  };
90
+ /**
91
+ * A custom field that can be used to render a dropdown
92
+ *
93
+ * @param options DropdownCustomFieldProps - an object with all the props
94
+ * @returns {JSX.Element} - a dropdown component
95
+ */
78
96
  const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
79
97
  const renderAsInvalid = isInvalid || Boolean(errorMessage);
80
98
  const [selectedValue, setSelectedValue] = React.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
@@ -98,6 +116,12 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
98
116
  return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(Select, { disabled: disabled, dataTestId: dataTestId, onChange: onChangeHandler, hasError: renderAsInvalid, options: options, value: selectedValue, isMulti: multiSelect, isClearable: true }) })));
99
117
  };
100
118
 
119
+ /**
120
+ * Get validation rules for a field
121
+ *
122
+ * @param { WebAddressFieldDefinition } definition the field definition
123
+ * @returns { ValidationRules} the validation rules
124
+ */
101
125
  const getWebAddressValidationRules = (definition) => {
102
126
  const defaultRules = {};
103
127
  const pattern = {
@@ -109,6 +133,12 @@ const getWebAddressValidationRules = (definition) => {
109
133
  return definition.uiEditable
110
134
  ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
111
135
  };
136
+ /**
137
+ * Get validation rules for a field.
138
+ *
139
+ * @param { NumberFieldDefinition } definition the field definition
140
+ * @returns { ValidationRules} the validation rules
141
+ */
112
142
  const getNumberValidationRules = (definition) => {
113
143
  const defaultRules = { valueAsNumber: true };
114
144
  const minimum = definition.minimumNumber && {
@@ -127,6 +157,12 @@ const getNumberValidationRules = (definition) => {
127
157
  return definition.uiEditable
128
158
  ? Object.assign(Object.assign(Object.assign({}, maximum), minimum), defaultRules) : defaultRules;
129
159
  };
160
+ /**
161
+ * Get validation rules for a string field.
162
+ *
163
+ * @param { StringFieldDefinition } definition the field definition
164
+ * @returns { ValidationRules} the validation rules
165
+ */
130
166
  const getStringValidationRules = (definition) => {
131
167
  const defaultRules = {};
132
168
  const minLength = definition.minimumLength
@@ -160,18 +196,42 @@ const getStringValidationRules = (definition) => {
160
196
  return definition.uiEditable
161
197
  ? Object.assign(Object.assign(Object.assign(Object.assign({}, maxLength), minLength), pattern), defaultRules) : defaultRules;
162
198
  };
199
+ /**
200
+ * Get validation rules for a boolean field.
201
+ *
202
+ * @param { BooleanFieldDefinition } definition the field definition
203
+ * @returns { ValidationRules} the validation rules
204
+ */
163
205
  const getBooleanValidationRules = (definition) => {
164
206
  const defaultRules = {};
165
207
  return defaultRules;
166
208
  };
209
+ /**
210
+ * Get validation rules for a dropdown field.
211
+ *
212
+ * @param { DropDownFieldDefinition } definition the field definition
213
+ * @returns { ValidationRules} the validation rules
214
+ */
167
215
  const getDropdownValidationRules = (definition) => {
168
216
  const defaultRules = {};
169
217
  return defaultRules;
170
218
  };
219
+ /**
220
+ * Get validation rules for a date field.
221
+ *
222
+ * @param { DateFieldDefinition } definition the field definition
223
+ * @returns { ValidationRules} the validation rules
224
+ */
171
225
  const getDateValidationRules = (definition) => {
172
226
  const defaultRules = {};
173
227
  return defaultRules;
174
228
  };
229
+ /**
230
+ * Get validation rules for an email field.
231
+ *
232
+ * @param { EmailFieldDefinition } definition the field definition
233
+ * @returns { ValidationRules} the validation rules
234
+ */
175
235
  const getEmailValidationRules = (definition) => {
176
236
  const defaultRules = {};
177
237
  const pattern = {
@@ -183,6 +243,12 @@ const getEmailValidationRules = (definition) => {
183
243
  return definition.uiEditable
184
244
  ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
185
245
  };
246
+ /**
247
+ * Get validation rules for a phonenumber field.
248
+ *
249
+ * @param { PhoneNumberFieldDefinition } definition the field definition
250
+ * @returns { ValidationRules} the validation rules
251
+ */
186
252
  const getPhoneNumberValidationRules = (definition) => {
187
253
  const defaultRules = {};
188
254
  const pattern = {
@@ -192,6 +258,15 @@ const getPhoneNumberValidationRules = (definition) => {
192
258
  ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
193
259
  };
194
260
 
261
+ /**
262
+ * A component that renders a custom field based on the field definition
263
+ *
264
+ * @param field A field definition and value
265
+ * @param validation A validation object that contains the register, setValue and formState
266
+ * @param unitPreference A unit preference that can be used to override the default unit preference
267
+ * @param fieldId An optional Id to override the definition.key
268
+ * @returns { JSX.Element } A JSX.Element or null if the field definition is undefined
269
+ */
195
270
  const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldId) => {
196
271
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
197
272
  const [isEditing, setIsEditing] = useState(false);
@@ -283,6 +358,9 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
283
358
  throw new Error(`Type not supported: ${type}`);
284
359
  }
285
360
  };
361
+ /**
362
+ *
363
+ */
286
364
  const CustomField = ({ field, register, formState, setValue, unitPreference, fieldId }) => {
287
365
  const fieldComponent = useCustomFieldResolver(field, { register, setValue, formState }, unitPreference, fieldId);
288
366
  return fieldComponent;
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@trackunit/custom-field-components",
3
- "version": "0.0.278",
3
+ "version": "0.0.279",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "dependencies": {
7
- "@trackunit/react-core-contexts-test": "0.1.32",
8
- "@trackunit/react-components": "0.1.63",
7
+ "@trackunit/react-core-contexts-test": "0.1.33",
8
+ "@trackunit/react-components": "0.1.64",
9
9
  "react": "18.2.0",
10
10
  "react-hook-form": "7.40.0",
11
- "@trackunit/iris-app-runtime-core": "0.3.20",
12
- "@trackunit/iris-app-runtime-core-api": "0.3.18",
11
+ "@trackunit/iris-app-runtime-core": "0.3.21",
12
+ "@trackunit/iris-app-runtime-core-api": "0.3.19",
13
13
  "@trackunit/tailwind-styled-components": "0.0.54",
14
14
  "react-select": "5.7.0",
15
15
  "libphonenumber-js": "1.10.24"
@@ -8,7 +8,6 @@ export interface BooleanCustomFieldProps extends Omit<CheckboxProps, "value" | "
8
8
  * A id for the field
9
9
  *
10
10
  * @memberof BooleanCustomFieldProps
11
- *
12
11
  */
13
12
  id: string;
14
13
  /**
@@ -72,4 +71,10 @@ export interface BooleanCustomFieldProps extends Omit<CheckboxProps, "value" | "
72
71
  */
73
72
  errorMessage?: string;
74
73
  }
74
+ /**
75
+ * A component that can be used to render a boolean field
76
+ *
77
+ * @param options BooleanCustomFieldProps - options for the component
78
+ * @returns { JSX.Element } JSX.Element - a component that can be used to render a boolean field
79
+ */
75
80
  export declare const BooleanCustomField: ({ defaultValue, dataTestId, onChange, value, id, setValue, register, validationRules, disabled, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }: BooleanCustomFieldProps) => JSX.Element;
@@ -19,6 +19,18 @@ export interface ICustomFieldValidation {
19
19
  setValue: UseFormSetValue<FieldValues>;
20
20
  formState: FormState<FieldValues>;
21
21
  }
22
+ /**
23
+ * A component that renders a custom field based on the field definition
24
+ *
25
+ * @param field A field definition and value
26
+ * @param validation A validation object that contains the register, setValue and formState
27
+ * @param unitPreference A unit preference that can be used to override the default unit preference
28
+ * @param fieldId An optional Id to override the definition.key
29
+ * @returns { JSX.Element } A JSX.Element or null if the field definition is undefined
30
+ */
22
31
  export declare const useCustomFieldResolver: (field: ValueAndDefinition, validation: ICustomFieldValidation, unitPreference?: UnitPreference, fieldId?: string) => JSX.Element | null;
32
+ /**
33
+ *
34
+ */
23
35
  export declare const CustomField: ({ field, register, formState, setValue, unitPreference, fieldId }: ICustomFieldProps) => JSX.Element | null;
24
36
  export {};
@@ -45,4 +45,10 @@ export interface DateCustomFieldProps extends Omit<DateFieldProps, "label">, For
45
45
  */
46
46
  title?: string;
47
47
  }
48
+ /**
49
+ * A component that can be used to render a date field
50
+ *
51
+ * @param props DateCustomFieldProps - options for the component
52
+ * @returns { JSX.Element } JSX.Element - a component that can be used to render a date field
53
+ */
48
54
  export declare const DateCustomField: (props: DateCustomFieldProps) => JSX.Element;
@@ -90,5 +90,11 @@ export interface DropdownCustomFieldProps extends FormGroupExposedProps {
90
90
  }
91
91
  type OnChange = (event?: React.ChangeEvent<HTMLInputElement>) => void;
92
92
  type OnBlur = (event: React.FocusEvent<HTMLDivElement>) => void;
93
+ /**
94
+ * A custom field that can be used to render a dropdown
95
+ *
96
+ * @param options DropdownCustomFieldProps - an object with all the props
97
+ * @returns {JSX.Element} - a dropdown component
98
+ */
93
99
  export declare const DropdownCustomField: ({ defaultValue, dataTestId, onChange, onBlur, id, disabled, allValues, multiSelect, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }: DropdownCustomFieldProps) => JSX.Element;
94
100
  export {};
@@ -1,11 +1,62 @@
1
1
  import { BooleanFieldDefinition, DateFieldDefinition, DropDownFieldDefinition, EmailFieldDefinition, NumberFieldDefinition, PhoneNumberFieldDefinition, StringFieldDefinition, WebAddressFieldDefinition } from "@trackunit/iris-app-runtime-core-api";
2
2
  import { RegisterOptions } from "react-hook-form";
3
+ /**
4
+ * Validation rules for a field
5
+ */
3
6
  export type ValidationRules = RegisterOptions;
7
+ /**
8
+ * Get validation rules for a field
9
+ *
10
+ * @param { WebAddressFieldDefinition } definition the field definition
11
+ * @returns { ValidationRules} the validation rules
12
+ */
4
13
  export declare const getWebAddressValidationRules: (definition: WebAddressFieldDefinition) => ValidationRules;
14
+ /**
15
+ * Get validation rules for a field.
16
+ *
17
+ * @param { NumberFieldDefinition } definition the field definition
18
+ * @returns { ValidationRules} the validation rules
19
+ */
5
20
  export declare const getNumberValidationRules: (definition: NumberFieldDefinition) => ValidationRules;
21
+ /**
22
+ * Get validation rules for a string field.
23
+ *
24
+ * @param { StringFieldDefinition } definition the field definition
25
+ * @returns { ValidationRules} the validation rules
26
+ */
6
27
  export declare const getStringValidationRules: (definition: StringFieldDefinition) => ValidationRules;
28
+ /**
29
+ * Get validation rules for a boolean field.
30
+ *
31
+ * @param { BooleanFieldDefinition } definition the field definition
32
+ * @returns { ValidationRules} the validation rules
33
+ */
7
34
  export declare const getBooleanValidationRules: (definition: BooleanFieldDefinition) => ValidationRules;
35
+ /**
36
+ * Get validation rules for a dropdown field.
37
+ *
38
+ * @param { DropDownFieldDefinition } definition the field definition
39
+ * @returns { ValidationRules} the validation rules
40
+ */
8
41
  export declare const getDropdownValidationRules: (definition: DropDownFieldDefinition) => ValidationRules;
42
+ /**
43
+ * Get validation rules for a date field.
44
+ *
45
+ * @param { DateFieldDefinition } definition the field definition
46
+ * @returns { ValidationRules} the validation rules
47
+ */
9
48
  export declare const getDateValidationRules: (definition: DateFieldDefinition) => ValidationRules;
49
+ /**
50
+ * Get validation rules for an email field.
51
+ *
52
+ * @param { EmailFieldDefinition } definition the field definition
53
+ * @returns { ValidationRules} the validation rules
54
+ */
10
55
  export declare const getEmailValidationRules: (definition: EmailFieldDefinition) => ValidationRules;
56
+ /**
57
+ * Get validation rules for a phonenumber field.
58
+ *
59
+ * @param { PhoneNumberFieldDefinition } definition the field definition
60
+ * @returns { ValidationRules} the validation rules
61
+ */
11
62
  export declare const getPhoneNumberValidationRules: (definition: PhoneNumberFieldDefinition) => ValidationRules;