envoc-form 5.0.3 → 5.0.6
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/README.md +163 -20
- package/es/ConfirmBaseForm/ConfirmBaseForm.js +2 -2
- package/es/DatePicker/DatePickerGroup.js +2 -2
- package/es/FieldArray/FieldArray.js +4 -4
- package/es/File/FileGroup.js +3 -3
- package/es/Form/Form.js +2 -2
- package/es/Group.js +3 -3
- package/es/Input/CheckboxGroup.d.ts +6 -0
- package/es/Input/CheckboxGroup.js +14 -0
- package/es/Input/CheckboxInputGroup.d.ts +13 -0
- package/es/Input/CheckboxInputGroup.js +41 -0
- package/es/Input/IconInputGroup.js +2 -2
- package/es/Input/InputGroup.js +2 -2
- package/es/Input/MoneyInputGroup.js +2 -2
- package/es/Input/NumberInputGroup.js +2 -2
- package/es/Input/PhoneNumberInputGroup.js +2 -2
- package/es/Input/StringInputGroup.js +2 -2
- package/es/Select/SelectGroup.js +3 -3
- package/es/StandardFormActions.js +3 -3
- package/es/SubmitFormButton.js +2 -2
- package/es/TextArea/TextAreaGroup.js +2 -2
- package/es/index.d.ts +2 -0
- package/es/index.js +1 -0
- package/lib/ConfirmBaseForm/ConfirmBaseForm.js +2 -5
- package/lib/DatePicker/DatePickerGroup.js +2 -2
- package/lib/FieldArray/FieldArray.js +4 -4
- package/lib/File/FileGroup.js +3 -3
- package/lib/Form/Form.js +2 -2
- package/lib/Group.js +3 -3
- package/lib/Input/CheckboxGroup.d.ts +6 -0
- package/lib/Input/CheckboxGroup.js +20 -0
- package/lib/Input/CheckboxInputGroup.d.ts +13 -0
- package/lib/Input/CheckboxInputGroup.js +46 -0
- package/lib/Input/IconInputGroup.js +2 -2
- package/lib/Input/InputGroup.js +2 -2
- package/lib/Input/MoneyInputGroup.js +2 -2
- package/lib/Input/NumberInputGroup.js +2 -2
- package/lib/Input/PhoneNumberInputGroup.js +2 -2
- package/lib/Input/StringInputGroup.js +2 -2
- package/lib/Select/SelectGroup.js +3 -3
- package/lib/StandardFormActions.js +3 -3
- package/lib/SubmitFormButton.js +2 -2
- package/lib/TextArea/TextAreaGroup.js +2 -2
- package/lib/index.d.ts +2 -0
- package/lib/index.js +3 -1
- package/package.json +111 -111
- package/src/AddressInput/AddressInput.test.tsx +27 -27
- package/src/AddressInput/AddressInput.tsx +82 -82
- package/src/AddressInput/UsStates.ts +55 -55
- package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +182 -182
- package/src/ConfirmBaseForm/ConfirmBaseForm.test.tsx +24 -24
- package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +74 -74
- package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.tsx.snap +23 -23
- package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.tsx +24 -24
- package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx +87 -87
- package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.tsx.snap +25 -25
- package/src/DatePicker/DatePicker.test.tsx +48 -48
- package/src/DatePicker/DatePickerGroup.tsx +109 -115
- package/src/DatePicker/DatePickerHelper.ts +4 -4
- package/src/DatePicker/StringDateOnlyPickerGroup.tsx +28 -28
- package/src/DatePicker/StringDatePickerGroup.tsx +20 -20
- package/src/DatePicker/__snapshots__/DatePicker.test.tsx.snap +152 -152
- package/src/Field/CustomFieldInputProps.ts +10 -10
- package/src/Field/CustomFieldMetaProps.ts +5 -5
- package/src/Field/Field.tsx +113 -113
- package/src/Field/FieldErrorScrollTarget.tsx +12 -12
- package/src/Field/FieldNameContext.ts +6 -6
- package/src/Field/FieldSection.tsx +18 -18
- package/src/Field/InjectedFieldProps.ts +8 -8
- package/src/Field/StandAloneInput.tsx +55 -55
- package/src/Field/useStandardField.ts +125 -125
- package/src/FieldArray/FieldArray.tsx +154 -154
- package/src/File/FileGroup.test.tsx +35 -35
- package/src/File/FileGroup.tsx +82 -85
- package/src/File/FileList.tsx +21 -21
- package/src/File/__snapshots__/FileGroup.test.tsx.snap +34 -34
- package/src/File/humanFileSize.ts +8 -8
- package/src/Form/FocusError.tsx +55 -55
- package/src/Form/Form.test.tsx +14 -14
- package/src/Form/Form.tsx +234 -237
- package/src/Form/FormBasedPreventNavigation.tsx +56 -56
- package/src/Form/LegacyFormBasedPreventNavigation.tsx +77 -77
- package/src/Form/NewFormBasedPreventNavigation.tsx +59 -59
- package/src/Form/ServerErrorContext.ts +18 -18
- package/src/Form/__snapshots__/Form.test.tsx.snap +10 -10
- package/src/FormActions.tsx +47 -47
- package/src/FormDefaults.ts +2 -2
- package/src/Group.tsx +62 -62
- package/src/Input/CheckboxGroup.tsx +60 -0
- package/src/Input/CheckboxInputGroup.tsx +78 -0
- package/src/Input/IconInputGroup.tsx +54 -54
- package/src/Input/InputGroup.tsx +66 -72
- package/src/Input/MoneyInputGroup.tsx +47 -50
- package/src/Input/NumberInputGroup.tsx +45 -48
- package/src/Input/PhoneNumberInputGroup.tsx +45 -45
- package/src/Input/StringInputGroup.tsx +50 -53
- package/src/Input/__Tests__/CheckboxInputGroup.test.tsx +26 -0
- package/src/Input/__Tests__/IconInputGroup.test.tsx +35 -35
- package/src/Input/__Tests__/MoneyInputGroup.test.tsx +37 -37
- package/src/Input/__Tests__/NumberInputGroup.test.tsx +35 -35
- package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx +36 -36
- package/src/Input/__Tests__/StringInputGroup.test.tsx +27 -27
- package/src/Input/__Tests__/__snapshots__/CheckboxInputGroup.test.tsx.snap +33 -0
- package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap +32 -32
- package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap +34 -34
- package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap +32 -32
- package/src/Input/__Tests__/__snapshots__/PhoneNumberInputGroup.test.tsx.snap +33 -33
- package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap +31 -31
- package/src/Normalization/NormalizationFunction.ts +4 -4
- package/src/Normalization/normalizers.ts +44 -44
- package/src/Select/BooleanSelectGroup.tsx +28 -28
- package/src/Select/NumberSelectGroup.tsx +16 -16
- package/src/Select/SelectGroup.tsx +124 -124
- package/src/Select/SelectGroupPropsHelper.ts +4 -4
- package/src/Select/StringSelectGroup.tsx +16 -16
- package/src/Select/__tests__/BooleanSelectGroup.test.tsx +35 -35
- package/src/Select/__tests__/NumberSelectGroup.test.tsx +87 -87
- package/src/Select/__tests__/StringSelectGroup.test.tsx +89 -89
- package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +98 -98
- package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +195 -195
- package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +195 -195
- package/src/StandardFormActions.tsx +41 -41
- package/src/SubmitFormButton.tsx +54 -54
- package/src/TextArea/TextAreaGroup.tsx +64 -64
- package/src/Validation/ValidatedApiResult.ts +8 -8
- package/src/Validation/ValidationError.ts +6 -6
- package/src/Validation/ValidationFunction.ts +4 -4
- package/src/Validation/validators.test.tsx +81 -81
- package/src/Validation/validators.ts +97 -97
- package/src/__Tests__/FormTestBase.tsx +65 -64
- package/src/__Tests__/RealisticForm.test.tsx +82 -82
- package/src/__Tests__/StandardFormActions.test.tsx +17 -17
- package/src/__Tests__/SubmitFormButton.test.tsx +17 -17
- package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap +27 -27
- package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap +20 -20
- package/src/__Tests__/index.ts +3 -3
- package/src/_variables.scss +11 -11
- package/src/index.ts +156 -153
- package/src/react-app-env.d.ts +1 -1
- package/src/setupTests.ts +1 -1
- package/src/utils/objectContainsNonSerializableProperty.test.tsx +49 -49
- package/src/utils/objectContainsNonSerializableProperty.ts +17 -17
- package/src/utils/objectToFormData.test.tsx +76 -76
- package/src/utils/objectToFormData.ts +105 -105
- package/src/utils/typeChecks.ts +18 -18
package/README.md
CHANGED
@@ -13,11 +13,11 @@ Base form package for envoc projects.
|
|
13
13
|
[npm]: https://www.npmjs.com/package/envoc-form
|
14
14
|
Important naming conventions for our sanity while creating envoc-form types:
|
15
15
|
|
16
|
-
- TForm = The type of the some form. e.g. LoginDto
|
17
|
-
- TProp = The key / symbol of a individual property of some form. e.g. TProp would be literally "Username" for the prop of the same name for a LoginDto
|
18
|
-
- TValue = The value of an individual property of some form. e.g. a "Username" property would probably have a TValue of string
|
19
|
-
- Field = the abstract thing that deals with some specific TProp. Might represent several composed elements (e.g. label, input, helperText, etc) or may just be a direct component
|
20
|
-
- TRenderComponent = The type of any 'Component' passed to a Field, e.g. 'StandardTextInputGroup' passed to Component means TRenderComponent is typeof(StandardTextInputGroup)
|
16
|
+
- TForm = The type of the some form. e.g. LoginDto
|
17
|
+
- TProp = The key / symbol of a individual property of some form. e.g. TProp would be literally "Username" for the prop of the same name for a LoginDto
|
18
|
+
- TValue = The value of an individual property of some form. e.g. a "Username" property would probably have a TValue of string
|
19
|
+
- Field = the abstract thing that deals with some specific TProp. Might represent several composed elements (e.g. label, input, helperText, etc) or may just be a direct component
|
20
|
+
- TRenderComponent = The type of any 'Component' passed to a Field, e.g. 'StandardTextInputGroup' passed to Component means TRenderComponent is typeof(StandardTextInputGroup)
|
21
21
|
- TComponentProps = For any 'Component' passed to a Field as a prop, this represents that Component's props
|
22
22
|
|
23
23
|
# Interfaces
|
@@ -216,6 +216,131 @@ Omit.required
|
|
216
216
|
packages/envoc-form/src/Group.tsx:21
|
217
217
|
|
218
218
|
|
219
|
+
<a name="interfacescheckboxinputgrouppropsmd"></a>
|
220
|
+
|
221
|
+
[envoc-form](#readmemd) / [Exports](#modulesmd) / CheckboxInputGroupProps
|
222
|
+
|
223
|
+
## Interface: CheckboxInputGroupProps
|
224
|
+
|
225
|
+
### Hierarchy
|
226
|
+
|
227
|
+
- `Omit`<[`InputGroupProps`](#interfacesinputgrouppropsmd)<`boolean` \| `undefined` \| ``null``\>, ``"onChange"`` \| ``"type"`` \| ``"value"``\>
|
228
|
+
|
229
|
+
↳ **`CheckboxInputGroupProps`**
|
230
|
+
|
231
|
+
### Table of contents
|
232
|
+
|
233
|
+
#### Properties
|
234
|
+
|
235
|
+
- [className](#classname)
|
236
|
+
- [helpText](#helptext)
|
237
|
+
- [icon](#icon)
|
238
|
+
- [input](#input)
|
239
|
+
- [label](#label)
|
240
|
+
- [labelOnLeft](#labelonleft)
|
241
|
+
- [meta](#meta)
|
242
|
+
|
243
|
+
### Properties
|
244
|
+
|
245
|
+
#### className
|
246
|
+
|
247
|
+
• `Optional` **className**: `string`
|
248
|
+
|
249
|
+
Extra class names to apply.
|
250
|
+
|
251
|
+
##### Inherited from
|
252
|
+
|
253
|
+
Omit.className
|
254
|
+
|
255
|
+
##### Defined in
|
256
|
+
|
257
|
+
packages/envoc-form/src/Group.tsx:8
|
258
|
+
|
259
|
+
___
|
260
|
+
|
261
|
+
#### helpText
|
262
|
+
|
263
|
+
• `Optional` **helpText**: `ReactNode`
|
264
|
+
|
265
|
+
Simple helper text after the input.
|
266
|
+
|
267
|
+
##### Inherited from
|
268
|
+
|
269
|
+
Omit.helpText
|
270
|
+
|
271
|
+
##### Defined in
|
272
|
+
|
273
|
+
packages/envoc-form/src/Group.tsx:16
|
274
|
+
|
275
|
+
___
|
276
|
+
|
277
|
+
#### icon
|
278
|
+
|
279
|
+
• `Optional` **icon**: `ReactNode`
|
280
|
+
|
281
|
+
##### Inherited from
|
282
|
+
|
283
|
+
Omit.icon
|
284
|
+
|
285
|
+
##### Defined in
|
286
|
+
|
287
|
+
packages/envoc-form/src/Input/InputGroup.tsx:20
|
288
|
+
|
289
|
+
___
|
290
|
+
|
291
|
+
#### input
|
292
|
+
|
293
|
+
• **input**: `CustomFieldInputProps`<`undefined` \| ``null`` \| `boolean`\>
|
294
|
+
|
295
|
+
##### Inherited from
|
296
|
+
|
297
|
+
Omit.input
|
298
|
+
|
299
|
+
##### Defined in
|
300
|
+
|
301
|
+
packages/envoc-form/src/Field/InjectedFieldProps.ts:6
|
302
|
+
|
303
|
+
___
|
304
|
+
|
305
|
+
#### label
|
306
|
+
|
307
|
+
• `Optional` **label**: `string`
|
308
|
+
|
309
|
+
Simple text label before the input.
|
310
|
+
|
311
|
+
##### Inherited from
|
312
|
+
|
313
|
+
Omit.label
|
314
|
+
|
315
|
+
##### Defined in
|
316
|
+
|
317
|
+
packages/envoc-form/src/Group.tsx:13
|
318
|
+
|
319
|
+
___
|
320
|
+
|
321
|
+
#### labelOnLeft
|
322
|
+
|
323
|
+
• `Optional` **labelOnLeft**: `boolean`
|
324
|
+
|
325
|
+
##### Defined in
|
326
|
+
|
327
|
+
packages/envoc-form/src/Input/CheckboxInputGroup.tsx:12
|
328
|
+
|
329
|
+
___
|
330
|
+
|
331
|
+
#### meta
|
332
|
+
|
333
|
+
• **meta**: `CustomFieldMetaProps`<`undefined` \| ``null`` \| `boolean`\>
|
334
|
+
|
335
|
+
##### Inherited from
|
336
|
+
|
337
|
+
Omit.meta
|
338
|
+
|
339
|
+
##### Defined in
|
340
|
+
|
341
|
+
packages/envoc-form/src/Field/InjectedFieldProps.ts:7
|
342
|
+
|
343
|
+
|
219
344
|
<a name="interfacesconfirmbaseformpropsmd"></a>
|
220
345
|
|
221
346
|
[envoc-form](#readmemd) / [Exports](#modulesmd) / ConfirmBaseFormProps
|
@@ -3721,6 +3846,7 @@ packages/envoc-form/src/Field/useStandardField.ts:18
|
|
3721
3846
|
|
3722
3847
|
- [AddressInputProps](#interfacesaddressinputpropsmd)
|
3723
3848
|
- [BooleanSelectGroupProps](#interfacesbooleanselectgrouppropsmd)
|
3849
|
+
- [CheckboxInputGroupProps](#interfacescheckboxinputgrouppropsmd)
|
3724
3850
|
- [ConfirmBaseFormProps](#interfacesconfirmbaseformpropsmd)
|
3725
3851
|
- [ConfirmDeleteFormProps](#interfacesconfirmdeleteformpropsmd)
|
3726
3852
|
- [DatePickerGroupProps](#interfacesdatepickergrouppropsmd)
|
@@ -3769,6 +3895,7 @@ packages/envoc-form/src/Field/useStandardField.ts:18
|
|
3769
3895
|
|
3770
3896
|
### Variables
|
3771
3897
|
|
3898
|
+
- [CheckboxInputGroup](#checkboxinputgroup)
|
3772
3899
|
- [FieldNameContext](#fieldnamecontext)
|
3773
3900
|
- [FileGroup](#filegroup)
|
3774
3901
|
- [FormDefaults](#formdefaults)
|
@@ -3962,6 +4089,22 @@ packages/envoc-form/src/Field/StandAloneInput.tsx:8
|
|
3962
4089
|
|
3963
4090
|
## Variables
|
3964
4091
|
|
4092
|
+
### CheckboxInputGroup
|
4093
|
+
|
4094
|
+
• `Const` **CheckboxInputGroup**: `ComponentType`<[`CheckboxInputGroupProps`](#interfacescheckboxinputgrouppropsmd)\>
|
4095
|
+
|
4096
|
+
Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
|
4097
|
+
|
4098
|
+
If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
|
4099
|
+
|
4100
|
+
If the user should be required to check the box before submission, use the `required` prop.
|
4101
|
+
|
4102
|
+
#### Defined in
|
4103
|
+
|
4104
|
+
packages/envoc-form/src/Input/CheckboxInputGroup.tsx:74
|
4105
|
+
|
4106
|
+
___
|
4107
|
+
|
3965
4108
|
### FieldNameContext
|
3966
4109
|
|
3967
4110
|
• `Const` **FieldNameContext**: `Context`<`undefined` \| `string`\>
|
@@ -3982,7 +4125,7 @@ File upload input group.
|
|
3982
4125
|
|
3983
4126
|
#### Defined in
|
3984
4127
|
|
3985
|
-
packages/envoc-form/src/File/FileGroup.tsx:
|
4128
|
+
packages/envoc-form/src/File/FileGroup.tsx:78
|
3986
4129
|
|
3987
4130
|
___
|
3988
4131
|
|
@@ -4024,7 +4167,7 @@ Standard number input group. By default allows for float values.
|
|
4024
4167
|
|
4025
4168
|
#### Defined in
|
4026
4169
|
|
4027
|
-
packages/envoc-form/src/Input/NumberInputGroup.tsx:
|
4170
|
+
packages/envoc-form/src/Input/NumberInputGroup.tsx:41
|
4028
4171
|
|
4029
4172
|
___
|
4030
4173
|
|
@@ -4032,7 +4175,7 @@ ___
|
|
4032
4175
|
|
4033
4176
|
• `Const` **PhoneNumberInputGroup**: `ComponentType`<[`PhoneNumberInputGroupProps`](#interfacesphonenumberinputgrouppropsmd)\>
|
4034
4177
|
|
4035
|
-
A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
|
4178
|
+
A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
|
4036
4179
|
The data will get sent in the same format as displayed. Uses `normalizers.phoneNumber`.
|
4037
4180
|
|
4038
4181
|
**`Default`**
|
@@ -4067,7 +4210,7 @@ Standard string input group.
|
|
4067
4210
|
|
4068
4211
|
#### Defined in
|
4069
4212
|
|
4070
|
-
packages/envoc-form/src/Input/StringInputGroup.tsx:
|
4213
|
+
packages/envoc-form/src/Input/StringInputGroup.tsx:46
|
4071
4214
|
|
4072
4215
|
___
|
4073
4216
|
|
@@ -4087,13 +4230,13 @@ packages/envoc-form/src/TextArea/TextAreaGroup.tsx:60
|
|
4087
4230
|
|
4088
4231
|
▸ **AddressInput**(`«destructured»`): `Element`
|
4089
4232
|
|
4090
|
-
Collection of `<Field/>`s for inputting an address. Includes:
|
4091
|
-
```txt
|
4092
|
-
Address 1
|
4093
|
-
Address 2
|
4094
|
-
City
|
4095
|
-
State
|
4096
|
-
Zip
|
4233
|
+
Collection of `<Field/>`s for inputting an address. Includes:
|
4234
|
+
```txt
|
4235
|
+
Address 1
|
4236
|
+
Address 2
|
4237
|
+
City
|
4238
|
+
State
|
4239
|
+
Zip
|
4097
4240
|
```
|
4098
4241
|
|
4099
4242
|
#### Parameters
|
@@ -4138,7 +4281,7 @@ ___
|
|
4138
4281
|
|
4139
4282
|
▸ **ConfirmBaseForm**(`«destructured»`): `Element`
|
4140
4283
|
|
4141
|
-
Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
|
4284
|
+
Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
|
4142
4285
|
Commonly used for confirming delete and archive.
|
4143
4286
|
|
4144
4287
|
See `<ConfirmDeleteForm/>` if the confirmation is specifically for deletion.
|
@@ -4217,7 +4360,7 @@ ___
|
|
4217
4360
|
|
4218
4361
|
▸ **Field**<`TForm`, `TProp`, `TRenderComponent`\>(`«destructured»`, `ref`): `Element`
|
4219
4362
|
|
4220
|
-
Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
|
4363
|
+
Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
|
4221
4364
|
Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
|
4222
4365
|
|
4223
4366
|
#### Type parameters
|
@@ -4670,7 +4813,7 @@ ___
|
|
4670
4813
|
|
4671
4814
|
#### Defined in
|
4672
4815
|
|
4673
|
-
packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:
|
4816
|
+
packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:100
|
4674
4817
|
|
4675
4818
|
___
|
4676
4819
|
|
@@ -4934,7 +5077,7 @@ packages/envoc-form/src/Field/useStandardField.ts:24
|
|
4934
5077
|
|
4935
5078
|
##### Defined in
|
4936
5079
|
|
4937
|
-
packages/envoc-form/src/Form/Form.tsx:
|
5080
|
+
packages/envoc-form/src/Form/Form.tsx:211
|
4938
5081
|
|
4939
5082
|
|
4940
5083
|
<a name="modulesnormalizersmd"></a>
|
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
21
21
|
return t;
|
22
22
|
};
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
24
|
-
import
|
24
|
+
import { clsx } from 'clsx';
|
25
25
|
import { useAxiosRequest } from 'envoc-request';
|
26
26
|
import { FormDefaults } from '../FormDefaults';
|
27
27
|
// TODO: ask about how we should use 'children'
|
@@ -35,7 +35,7 @@ export default function ConfirmBaseForm(_a) {
|
|
35
35
|
var handleCancel = _a.handleCancel, request = _a.request, style = _a.style, title = _a.title, confirmButtonText = _a.confirmButtonText, confirmButtonClass = _a.confirmButtonClass, children = _a.children, props = __rest(_a, ["handleCancel", "request", "style", "title", "confirmButtonText", "confirmButtonClass", "children"]);
|
36
36
|
var webRequest = useAxiosRequest(Object.assign({}, request, { autoExecute: false }));
|
37
37
|
var onCancel = handleCancel !== null && handleCancel !== void 0 ? handleCancel : goBack;
|
38
|
-
return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", { className:
|
38
|
+
return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", { className: clsx(confirmButtonClass !== null && confirmButtonClass !== void 0 ? confirmButtonClass : FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'), type: "button", onClick: webRequest.submitRequest, children: confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Confirm' }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel, children: "Cancel" })] })));
|
39
39
|
function goBack() {
|
40
40
|
window.history.back();
|
41
41
|
}
|
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
24
|
import { useEffect, useState } from 'react';
|
25
25
|
import DatePicker from 'react-date-picker/dist/entry.nostyle';
|
26
|
-
import
|
26
|
+
import { clsx } from 'clsx';
|
27
27
|
import parseISO from 'date-fns/parseISO';
|
28
28
|
import { FormDefaults } from '../FormDefaults';
|
29
29
|
import Group from '../Group';
|
@@ -48,7 +48,7 @@ export default function DatePickerGroup(_a) {
|
|
48
48
|
}
|
49
49
|
}
|
50
50
|
}, [setDisplayDate, input.value]);
|
51
|
-
return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, className:
|
51
|
+
return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: _jsx(DatePicker, __assign({}, rest, { className: clsx(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) }));
|
52
52
|
function handleChange(e) {
|
53
53
|
var onChange = input.onChange;
|
54
54
|
if (onChange === null) {
|
@@ -19,7 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
19
19
|
return to.concat(ar || Array.prototype.slice.call(from));
|
20
20
|
};
|
21
21
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
22
|
-
import
|
22
|
+
import { clsx } from 'clsx';
|
23
23
|
import Field from '../Field/Field';
|
24
24
|
import { FieldNameContext } from '../Field/FieldNameContext';
|
25
25
|
import useStandardFormInput from '../Field/useStandardField';
|
@@ -42,15 +42,15 @@ export default function FieldArray(_a) {
|
|
42
42
|
: Array.isArray(input.value)
|
43
43
|
? input.value
|
44
44
|
: [];
|
45
|
-
return (_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array', children: [_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array-header', children: [_jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-title', children: label }), _jsx("button", { className:
|
45
|
+
return (_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array', children: [_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array-header', children: [_jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-title', children: label }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem, children: "+" })] }), _jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-body', children: values.map(function (value, index) {
|
46
46
|
var _a, _b;
|
47
47
|
var itemName = "".concat(input.name, "[").concat(index, "]");
|
48
|
-
return (_jsxs("div", { className:
|
48
|
+
return (_jsxs("div", { className: clsx(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
|
49
49
|
_a[FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
|
50
50
|
_a)), role: "listitem", children: [_jsx(FieldNameContext.Provider, { value: itemName, children: children({
|
51
51
|
Field: Field,
|
52
52
|
FieldArray: FieldArray,
|
53
|
-
}) }), _jsx("button", { className:
|
53
|
+
}) }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); }, children: "-" })] }, (value && value['form-input-array-key']) ||
|
54
54
|
(value && value['id']) ||
|
55
55
|
itemName));
|
56
56
|
}) })] }));
|
package/es/File/FileGroup.js
CHANGED
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
24
24
|
import React from 'react';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import FileList from './FileList';
|
27
27
|
import { FormDefaults } from '../FormDefaults';
|
28
28
|
import Group from '../Group';
|
29
29
|
function FileGroup(_a, ref) {
|
30
30
|
var _b;
|
31
31
|
var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, multiple = _a.multiple, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "multiple"]);
|
32
|
-
return (_jsxs(Group, { input: input, meta: meta, label: label, helpText: helpText, className:
|
32
|
+
return (_jsxs(Group, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, (_b = {}, _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple, _b), FormDefaults.cssClassPrefix + 'file-group'), required: required, disabled: disabled, children: [_jsx("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
|
33
33
|
var _a, _b;
|
34
34
|
if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length)) {
|
35
35
|
input.onChange(undefined);
|
@@ -46,7 +46,7 @@ function FileGroup(_a, ref) {
|
|
46
46
|
input.onChange(files);
|
47
47
|
}
|
48
48
|
}
|
49
|
-
}, value: undefined, ref: ref, type: "file", className:
|
49
|
+
}, value: undefined, ref: ref, type: "file", className: clsx(className, FormDefaults.cssClassPrefix + 'file-group') })), _jsx(FileList, { files: input.value })] }));
|
50
50
|
}
|
51
51
|
/** File upload input group. */
|
52
52
|
var FileGroupWithRef = React.forwardRef(FileGroup);
|
package/es/Form/Form.js
CHANGED
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
24
24
|
import { useContext, useMemo, useState, } from 'react';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import { Form as FormikFormWrapper, Formik, useFormikContext, } from 'formik';
|
27
27
|
import FocusError from './FocusError';
|
28
28
|
import FormBasedPreventNavigation from './FormBasedPreventNavigation';
|
@@ -54,7 +54,7 @@ export default function Form(_a) {
|
|
54
54
|
_a)));
|
55
55
|
},
|
56
56
|
}); }, [serverErrors]);
|
57
|
-
return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, { value: serverErrorContextValue, children: _jsxs(FormikFormWrapper, { className:
|
57
|
+
return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, { value: serverErrorContextValue, children: _jsxs(FormikFormWrapper, { className: clsx(className, FormDefaults.cssClassPrefix + 'form'), style: style, children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
|
58
58
|
// hack for ref forwarding
|
59
59
|
Field: Field,
|
60
60
|
FieldArray: FieldArray,
|
package/es/Group.js
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import
|
3
|
-
import { FormDefaults } from './FormDefaults';
|
2
|
+
import { clsx } from 'clsx';
|
4
3
|
import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
|
4
|
+
import { FormDefaults } from './FormDefaults';
|
5
5
|
/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
|
6
6
|
export default function Group(_a) {
|
7
7
|
var _b;
|
8
8
|
var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled, required = _a.required;
|
9
|
-
return (_jsxs("div", { className:
|
9
|
+
return (_jsxs("div", { className: clsx(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
|
10
10
|
_b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
|
11
11
|
_b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
|
12
12
|
_b[FormDefaults.cssClassPrefix + 'required'] = required,
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import { GroupProps } from '../Group';
|
2
|
+
export interface CheckboxGroupProps extends GroupProps {
|
3
|
+
labelOnLeft?: boolean;
|
4
|
+
}
|
5
|
+
/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
|
6
|
+
export default function CheckboxGroup({ className, children, label, helpText, meta, input, disabled, required, labelOnLeft, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { clsx } from 'clsx';
|
3
|
+
import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
|
4
|
+
import { FormDefaults } from '../FormDefaults';
|
5
|
+
/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
|
6
|
+
export default function CheckboxGroup(_a) {
|
7
|
+
var _b;
|
8
|
+
var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled, required = _a.required, labelOnLeft = _a.labelOnLeft;
|
9
|
+
return (_jsxs("div", { className: clsx(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
|
10
|
+
_b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
|
11
|
+
_b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
|
12
|
+
_b[FormDefaults.cssClassPrefix + 'required'] = required,
|
13
|
+
_b)), children: [_jsx(FieldErrorScrollTarget, {}), meta.warning && (_jsx("div", { className: FormDefaults.cssClassPrefix + 'warning', children: meta.warning })), _jsx("div", { className: FormDefaults.cssClassPrefix + 'checkbox-group-input', children: labelOnLeft ? (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: input.id, children: label }), children] })) : (_jsxs(_Fragment, { children: [children, _jsx("label", { htmlFor: input.id, children: label })] })) }), meta.error && (_jsx("div", { id: "".concat(input.id, "-error"), className: FormDefaults.cssClassPrefix + 'error', children: meta.error })), helpText && (_jsx("div", { className: FormDefaults.cssClassPrefix + 'help', children: helpText }))] }));
|
14
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { InputGroupProps } from './InputGroup';
|
3
|
+
export interface CheckboxInputGroupProps extends Omit<InputGroupProps<boolean | undefined | null>, 'onChange' | 'type' | 'value'> {
|
4
|
+
labelOnLeft?: boolean;
|
5
|
+
}
|
6
|
+
/** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
|
7
|
+
*
|
8
|
+
* If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
|
9
|
+
*
|
10
|
+
* If the user should be required to check the box before submission, use the `required` prop.
|
11
|
+
*/
|
12
|
+
declare const CheckboxInputGroupWithRef: React.ComponentType<CheckboxInputGroupProps>;
|
13
|
+
export default CheckboxInputGroupWithRef;
|
@@ -0,0 +1,41 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
+
import React from 'react';
|
25
|
+
import { clsx } from 'clsx';
|
26
|
+
import CheckboxGroup from './CheckboxGroup';
|
27
|
+
import { FormDefaults } from '../FormDefaults';
|
28
|
+
function CheckboxInputGroup(_a, ref) {
|
29
|
+
var input = _a.input, meta = _a.meta, disabled = _a.disabled, label = _a.label, required = _a.required, helpText = _a.helpText, className = _a.className, labelOnLeft = _a.labelOnLeft, rest = __rest(_a, ["input", "meta", "disabled", "label", "required", "helpText", "className", "labelOnLeft"]);
|
30
|
+
return (_jsx(CheckboxGroup, { input: input, meta: meta, disabled: disabled, required: required, label: label, helpText: helpText, labelOnLeft: labelOnLeft, className: clsx(className, FormDefaults.cssClassPrefix + 'checkbox-group', { 'label-on-left': labelOnLeft }, { 'label-on-right': !labelOnLeft }), children: _jsx("input", __assign({}, rest, { type: "checkbox", "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, className: clsx(className, FormDefaults.cssClassPrefix + 'checkbox-group'), checked: input.value === true, onChange: function (e) {
|
31
|
+
input.onChange(e.target.checked);
|
32
|
+
}, disabled: disabled, required: required, onBlur: input.onBlur, id: input.id, name: input.name, ref: ref })) }));
|
33
|
+
}
|
34
|
+
/** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
|
35
|
+
*
|
36
|
+
* If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
|
37
|
+
*
|
38
|
+
* If the user should be required to check the box before submission, use the `required` prop.
|
39
|
+
*/
|
40
|
+
var CheckboxInputGroupWithRef = React.forwardRef(CheckboxInputGroup);
|
41
|
+
export default CheckboxInputGroupWithRef;
|
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
24
24
|
import React from 'react';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import InputGroupWithRef from './InputGroup';
|
27
27
|
import { FormDefaults } from '../FormDefaults';
|
28
28
|
function IconInputGroup(_a, ref) {
|
29
29
|
var _b;
|
30
30
|
var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
|
31
31
|
var input = rest.input;
|
32
|
-
return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className:
|
32
|
+
return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className: clsx(className, FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
|
33
33
|
if (!e.target.value) {
|
34
34
|
input.onChange(undefined);
|
35
35
|
}
|
package/es/Input/InputGroup.js
CHANGED
@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
24
24
|
import React from 'react';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import { FormDefaults } from '../FormDefaults';
|
27
27
|
import Group from '../Group';
|
28
28
|
function InputGroup(_a, ref) {
|
29
29
|
var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "onChange", "value", "icon"]);
|
30
|
-
return (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className:
|
30
|
+
return (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'input-group'), children: [icon, _jsx("input", __assign({}, input, rest, { "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, value: value !== null && value !== void 0 ? value : '', onChange: onChange, ref: ref, className: clsx(className, FormDefaults.cssClassPrefix + 'input-group') }))] }));
|
31
31
|
}
|
32
32
|
/** Generic controlled `<input/>` wrapped by a `<Group/>` */
|
33
33
|
var InputGroupWithRef = React.forwardRef(InputGroup);
|
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
24
|
import React from 'react';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import InputGroup from './InputGroup';
|
27
27
|
import { FormDefaults } from '../FormDefaults';
|
28
28
|
function MoneyInputGroup(_a, ref) {
|
29
29
|
var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
|
30
30
|
var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
|
31
31
|
var input = rest.input;
|
32
|
-
return (_jsx(InputGroup, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className:
|
32
|
+
return (_jsx(InputGroup, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: clsx(className, FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
|
33
33
|
if (!e.target.value) {
|
34
34
|
input.onChange(undefined);
|
35
35
|
}
|
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
24
|
import React from 'react';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import InputGroup from './InputGroup';
|
27
27
|
import { FormDefaults } from '../FormDefaults';
|
28
28
|
function NumberInputGroup(_a, ref) {
|
29
29
|
var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
|
30
30
|
var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
|
31
31
|
var input = rest.input;
|
32
|
-
return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className:
|
32
|
+
return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: clsx(className, FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
|
33
33
|
if (!e.target.value) {
|
34
34
|
input.onChange(undefined);
|
35
35
|
}
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
24
|
import React from 'react';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import InputGroup from './InputGroup';
|
27
27
|
import { FormDefaults } from '../FormDefaults';
|
28
28
|
import { phoneNumber } from '../Normalization/normalizers';
|
@@ -30,7 +30,7 @@ function PhoneNumberInputGroup(_a, ref) {
|
|
30
30
|
var _b;
|
31
31
|
var className = _a.className, rest = __rest(_a, ["className"]);
|
32
32
|
var input = rest.input;
|
33
|
-
return (_jsx(InputGroup, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className:
|
33
|
+
return (_jsx(InputGroup, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: clsx(className, FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
|
34
34
|
if (!e.target.value) {
|
35
35
|
input.onChange(undefined);
|
36
36
|
}
|
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
24
|
import React from 'react';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import InputGroup from './InputGroup';
|
27
27
|
import { FormDefaults } from '../FormDefaults';
|
28
28
|
function StringInputGroup(_a, ref) {
|
29
29
|
var _b;
|
30
30
|
var className = _a.className, rest = __rest(_a, ["className"]);
|
31
31
|
var input = rest.input;
|
32
|
-
return (_jsx(InputGroup, __assign({ ref: ref }, rest, { className:
|
32
|
+
return (_jsx(InputGroup, __assign({ ref: ref }, rest, { className: clsx(className, FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
|
33
33
|
if (!e.target.value) {
|
34
34
|
input.onChange(undefined);
|
35
35
|
}
|
package/es/Select/SelectGroup.js
CHANGED
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
24
|
import { default as ReactSelect } from 'react-select';
|
25
|
-
import
|
25
|
+
import { clsx } from 'clsx';
|
26
26
|
import { FormDefaults } from '../FormDefaults';
|
27
27
|
import Group from '../Group';
|
28
28
|
// TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
|
@@ -43,7 +43,7 @@ export default function SelectGroup(_a) {
|
|
43
43
|
? options.resp
|
44
44
|
: [];
|
45
45
|
var isLoading = (options && 'loading' in options && options.loading) || false;
|
46
|
-
return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className:
|
46
|
+
return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: clsx(className, (_b = {},
|
47
47
|
_b[FormDefaults.cssClassPrefix + 'multiple'] = multiple,
|
48
48
|
_b[FormDefaults.cssClassPrefix + 'loading'] = isLoading,
|
49
49
|
_b), FormDefaults.cssClassPrefix + 'select-group'), children: _jsx(ReactSelect, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
|
@@ -53,7 +53,7 @@ export default function SelectGroup(_a) {
|
|
53
53
|
else {
|
54
54
|
input.onChange(e === null || e === void 0 ? void 0 : e.value);
|
55
55
|
}
|
56
|
-
}, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className:
|
56
|
+
}, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: clsx(className, FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
|
57
57
|
function getValue() {
|
58
58
|
if (multiple) {
|
59
59
|
return effectiveOptions.filter(function (o) {
|