envoc-form 5.0.2 → 5.0.5
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 +158 -15
- 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/index.d.ts +2 -0
- package/es/index.js +1 -0
- 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/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 +115 -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 +85 -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 +237 -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 +72 -72
- package/src/Input/MoneyInputGroup.tsx +50 -50
- package/src/Input/NumberInputGroup.tsx +48 -48
- package/src/Input/PhoneNumberInputGroup.tsx +45 -45
- package/src/Input/StringInputGroup.tsx +53 -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`\>
|
@@ -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`**
|
@@ -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
|
@@ -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 classNames from 'classnames';
|
3
|
+
import { FormDefaults } from '../FormDefaults';
|
4
|
+
import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
|
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: classNames(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 classNames from 'classnames';
|
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: classNames(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: classNames(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;
|
package/es/index.d.ts
CHANGED
@@ -58,6 +58,8 @@ export { default as SelectGroup } from './Select/SelectGroup';
|
|
58
58
|
export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
|
59
59
|
export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
|
60
60
|
export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
|
61
|
+
export { default as CheckboxInputGroup } from './Input/CheckboxInputGroup';
|
62
|
+
export type { CheckboxInputGroupProps } from './Input/CheckboxInputGroup';
|
61
63
|
export { MultiNumberSelectGroup, SingleNumberSelectGroup, } from './Select/NumberSelectGroup';
|
62
64
|
export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps, } from './Select/NumberSelectGroup';
|
63
65
|
export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
|
package/es/index.js
CHANGED
@@ -40,6 +40,7 @@ export * as normalizers from './Normalization/normalizers';
|
|
40
40
|
// Select
|
41
41
|
export { default as SelectGroup } from './Select/SelectGroup';
|
42
42
|
export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
|
43
|
+
export { default as CheckboxInputGroup } from './Input/CheckboxInputGroup';
|
43
44
|
export { MultiNumberSelectGroup, SingleNumberSelectGroup, } from './Select/NumberSelectGroup';
|
44
45
|
export { MultiStringSelectGroup, SingleStringSelectGroup, } from './Select/StringSelectGroup';
|
45
46
|
// Text Area
|
@@ -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,20 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
7
|
+
var classnames_1 = __importDefault(require("classnames"));
|
8
|
+
var FormDefaults_1 = require("../FormDefaults");
|
9
|
+
var FieldErrorScrollTarget_1 = __importDefault(require("../Field/FieldErrorScrollTarget"));
|
10
|
+
/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
|
11
|
+
function CheckboxGroup(_a) {
|
12
|
+
var _b;
|
13
|
+
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;
|
14
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
|
15
|
+
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
|
16
|
+
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled,
|
17
|
+
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'required'] = required,
|
18
|
+
_b)), children: [(0, jsx_runtime_1.jsx)(FieldErrorScrollTarget_1.default, {}), meta.warning && ((0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'warning', children: meta.warning })), (0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group-input', children: labelOnLeft ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: input.id, children: label }), children] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)("label", { htmlFor: input.id, children: label })] })) }), meta.error && ((0, jsx_runtime_1.jsx)("div", { id: "".concat(input.id, "-error"), className: FormDefaults_1.FormDefaults.cssClassPrefix + 'error', children: meta.error })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'help', children: helpText }))] }));
|
19
|
+
}
|
20
|
+
exports.default = CheckboxGroup;
|
@@ -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,46 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
14
|
+
var t = {};
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
16
|
+
t[p] = s[p];
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
20
|
+
t[p[i]] = s[p[i]];
|
21
|
+
}
|
22
|
+
return t;
|
23
|
+
};
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
26
|
+
};
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
28
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
|
+
var react_1 = __importDefault(require("react"));
|
30
|
+
var classnames_1 = __importDefault(require("classnames"));
|
31
|
+
var CheckboxGroup_1 = __importDefault(require("./CheckboxGroup"));
|
32
|
+
var FormDefaults_1 = require("../FormDefaults");
|
33
|
+
function CheckboxInputGroup(_a, ref) {
|
34
|
+
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"]);
|
35
|
+
return ((0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, { input: input, meta: meta, disabled: disabled, required: required, label: label, helpText: helpText, labelOnLeft: labelOnLeft, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group', { 'label-on-left': labelOnLeft }, { 'label-on-right': !labelOnLeft }), children: (0, jsx_runtime_1.jsx)("input", __assign({}, rest, { type: "checkbox", "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group'), checked: input.value === true, onChange: function (e) {
|
36
|
+
input.onChange(e.target.checked);
|
37
|
+
}, disabled: disabled, required: required, onBlur: input.onBlur, id: input.id, name: input.name, ref: ref })) }));
|
38
|
+
}
|
39
|
+
/** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
|
40
|
+
*
|
41
|
+
* If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
|
42
|
+
*
|
43
|
+
* If the user should be required to check the box before submission, use the `required` prop.
|
44
|
+
*/
|
45
|
+
var CheckboxInputGroupWithRef = react_1.default.forwardRef(CheckboxInputGroup);
|
46
|
+
exports.default = CheckboxInputGroupWithRef;
|
package/lib/index.d.ts
CHANGED
@@ -58,6 +58,8 @@ export { default as SelectGroup } from './Select/SelectGroup';
|
|
58
58
|
export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
|
59
59
|
export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
|
60
60
|
export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
|
61
|
+
export { default as CheckboxInputGroup } from './Input/CheckboxInputGroup';
|
62
|
+
export type { CheckboxInputGroupProps } from './Input/CheckboxInputGroup';
|
61
63
|
export { MultiNumberSelectGroup, SingleNumberSelectGroup, } from './Select/NumberSelectGroup';
|
62
64
|
export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps, } from './Select/NumberSelectGroup';
|
63
65
|
export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
|
package/lib/index.js
CHANGED
@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
29
29
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
30
30
|
};
|
31
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
32
|
-
exports.validators = exports.serialize = exports.objectContainsNonSerializableProperty = exports.TextAreaGroup = exports.SingleStringSelectGroup = exports.MultiStringSelectGroup = exports.SingleNumberSelectGroup = exports.MultiNumberSelectGroup = exports.BooleanSelectGroup = exports.SelectGroup = exports.normalizers = exports.StringInputGroup = exports.PhoneNumberInputGroup = exports.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.FormDefaults = exports.StandardFormActions = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.StandAloneInput = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.StringDateOnlyPickerGroup = exports.StringDatePickerGroup = exports.convertToTimeZoneInsensitiveISOString = exports.DatePickerGroup = exports.ConfirmDeleteForm = exports.ConfirmBaseForm = exports.SubmitFormButton = exports.AddressInput = void 0;
|
32
|
+
exports.validators = exports.serialize = exports.objectContainsNonSerializableProperty = exports.TextAreaGroup = exports.SingleStringSelectGroup = exports.MultiStringSelectGroup = exports.SingleNumberSelectGroup = exports.MultiNumberSelectGroup = exports.CheckboxInputGroup = exports.BooleanSelectGroup = exports.SelectGroup = exports.normalizers = exports.StringInputGroup = exports.PhoneNumberInputGroup = exports.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.FormDefaults = exports.StandardFormActions = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.StandAloneInput = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.StringDateOnlyPickerGroup = exports.StringDatePickerGroup = exports.convertToTimeZoneInsensitiveISOString = exports.DatePickerGroup = exports.ConfirmDeleteForm = exports.ConfirmBaseForm = exports.SubmitFormButton = exports.AddressInput = void 0;
|
33
33
|
// Address
|
34
34
|
var AddressInput_1 = require("./AddressInput/AddressInput");
|
35
35
|
Object.defineProperty(exports, "AddressInput", { enumerable: true, get: function () { return __importDefault(AddressInput_1).default; } });
|
@@ -101,6 +101,8 @@ var SelectGroup_1 = require("./Select/SelectGroup");
|
|
101
101
|
Object.defineProperty(exports, "SelectGroup", { enumerable: true, get: function () { return __importDefault(SelectGroup_1).default; } });
|
102
102
|
var BooleanSelectGroup_1 = require("./Select/BooleanSelectGroup");
|
103
103
|
Object.defineProperty(exports, "BooleanSelectGroup", { enumerable: true, get: function () { return BooleanSelectGroup_1.BooleanSelectGroup; } });
|
104
|
+
var CheckboxInputGroup_1 = require("./Input/CheckboxInputGroup");
|
105
|
+
Object.defineProperty(exports, "CheckboxInputGroup", { enumerable: true, get: function () { return __importDefault(CheckboxInputGroup_1).default; } });
|
104
106
|
var NumberSelectGroup_1 = require("./Select/NumberSelectGroup");
|
105
107
|
Object.defineProperty(exports, "MultiNumberSelectGroup", { enumerable: true, get: function () { return NumberSelectGroup_1.MultiNumberSelectGroup; } });
|
106
108
|
Object.defineProperty(exports, "SingleNumberSelectGroup", { enumerable: true, get: function () { return NumberSelectGroup_1.SingleNumberSelectGroup; } });
|