envoc-form 5.0.6 → 5.0.8
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 +118 -3
- package/es/Field/Field.d.ts +2 -1
- package/es/Field/Field.js +14 -6
- package/es/Select/SelectGroup.d.ts +3 -1
- package/es/Select/SelectGroup.js +4 -4
- package/lib/Field/Field.d.ts +2 -1
- package/lib/Field/Field.js +14 -6
- package/lib/Select/SelectGroup.d.ts +3 -1
- package/lib/Select/SelectGroup.js +4 -4
- package/package.json +2 -2
- package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +1 -0
- package/src/Field/Field.tsx +21 -7
- package/src/Select/SelectGroup.tsx +9 -1
- package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +1 -0
- package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +2 -0
- package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +2 -0
package/README.md
CHANGED
@@ -77,6 +77,7 @@ packages/envoc-form/src/AddressInput/AddressInput.tsx:15
|
|
77
77
|
- [disabled](#disabled)
|
78
78
|
- [helpText](#helptext)
|
79
79
|
- [input](#input)
|
80
|
+
- [isClearable](#isclearable)
|
80
81
|
- [label](#label)
|
81
82
|
- [meta](#meta)
|
82
83
|
- [options](#options)
|
@@ -147,6 +148,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
|
|
147
148
|
|
148
149
|
___
|
149
150
|
|
151
|
+
#### isClearable
|
152
|
+
|
153
|
+
• `Optional` **isClearable**: `boolean`
|
154
|
+
|
155
|
+
allows the select value to be cleared
|
156
|
+
|
157
|
+
##### Inherited from
|
158
|
+
|
159
|
+
Omit.isClearable
|
160
|
+
|
161
|
+
##### Defined in
|
162
|
+
|
163
|
+
packages/envoc-form/src/Select/SelectGroup.tsx:40
|
164
|
+
|
165
|
+
___
|
166
|
+
|
150
167
|
#### label
|
151
168
|
|
152
169
|
• `Optional` **label**: `string`
|
@@ -1627,6 +1644,7 @@ packages/envoc-form/src/Input/MoneyInputGroup.tsx:12
|
|
1627
1644
|
- [disabled](#disabled)
|
1628
1645
|
- [helpText](#helptext)
|
1629
1646
|
- [input](#input)
|
1647
|
+
- [isClearable](#isclearable)
|
1630
1648
|
- [label](#label)
|
1631
1649
|
- [meta](#meta)
|
1632
1650
|
- [options](#options)
|
@@ -1697,6 +1715,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
|
|
1697
1715
|
|
1698
1716
|
___
|
1699
1717
|
|
1718
|
+
#### isClearable
|
1719
|
+
|
1720
|
+
• `Optional` **isClearable**: `boolean`
|
1721
|
+
|
1722
|
+
allows the select value to be cleared
|
1723
|
+
|
1724
|
+
##### Inherited from
|
1725
|
+
|
1726
|
+
[SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
|
1727
|
+
|
1728
|
+
##### Defined in
|
1729
|
+
|
1730
|
+
packages/envoc-form/src/Select/SelectGroup.tsx:40
|
1731
|
+
|
1732
|
+
___
|
1733
|
+
|
1700
1734
|
#### label
|
1701
1735
|
|
1702
1736
|
• `Optional` **label**: `string`
|
@@ -1792,6 +1826,7 @@ packages/envoc-form/src/Group.tsx:21
|
|
1792
1826
|
- [disabled](#disabled)
|
1793
1827
|
- [helpText](#helptext)
|
1794
1828
|
- [input](#input)
|
1829
|
+
- [isClearable](#isclearable)
|
1795
1830
|
- [label](#label)
|
1796
1831
|
- [meta](#meta)
|
1797
1832
|
- [options](#options)
|
@@ -1862,6 +1897,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
|
|
1862
1897
|
|
1863
1898
|
___
|
1864
1899
|
|
1900
|
+
#### isClearable
|
1901
|
+
|
1902
|
+
• `Optional` **isClearable**: `boolean`
|
1903
|
+
|
1904
|
+
allows the select value to be cleared
|
1905
|
+
|
1906
|
+
##### Inherited from
|
1907
|
+
|
1908
|
+
[SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
|
1909
|
+
|
1910
|
+
##### Defined in
|
1911
|
+
|
1912
|
+
packages/envoc-form/src/Select/SelectGroup.tsx:40
|
1913
|
+
|
1914
|
+
___
|
1915
|
+
|
1865
1916
|
#### label
|
1866
1917
|
|
1867
1918
|
• `Optional` **label**: `string`
|
@@ -2321,6 +2372,7 @@ Defines what is injected by a Field wrapper of some TRenderComponent
|
|
2321
2372
|
- [disabled](#disabled)
|
2322
2373
|
- [helpText](#helptext)
|
2323
2374
|
- [input](#input)
|
2375
|
+
- [isClearable](#isclearable)
|
2324
2376
|
- [label](#label)
|
2325
2377
|
- [meta](#meta)
|
2326
2378
|
- [multiple](#multiple)
|
@@ -2392,6 +2444,18 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
|
|
2392
2444
|
|
2393
2445
|
___
|
2394
2446
|
|
2447
|
+
#### isClearable
|
2448
|
+
|
2449
|
+
• `Optional` **isClearable**: `boolean`
|
2450
|
+
|
2451
|
+
allows the select value to be cleared
|
2452
|
+
|
2453
|
+
##### Defined in
|
2454
|
+
|
2455
|
+
packages/envoc-form/src/Select/SelectGroup.tsx:40
|
2456
|
+
|
2457
|
+
___
|
2458
|
+
|
2395
2459
|
#### label
|
2396
2460
|
|
2397
2461
|
• `Optional` **label**: `string`
|
@@ -2505,6 +2569,7 @@ packages/envoc-form/src/Group.tsx:21
|
|
2505
2569
|
- [disabled](#disabled)
|
2506
2570
|
- [helpText](#helptext)
|
2507
2571
|
- [input](#input)
|
2572
|
+
- [isClearable](#isclearable)
|
2508
2573
|
- [label](#label)
|
2509
2574
|
- [meta](#meta)
|
2510
2575
|
- [options](#options)
|
@@ -2575,6 +2640,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
|
|
2575
2640
|
|
2576
2641
|
___
|
2577
2642
|
|
2643
|
+
#### isClearable
|
2644
|
+
|
2645
|
+
• `Optional` **isClearable**: `boolean`
|
2646
|
+
|
2647
|
+
allows the select value to be cleared
|
2648
|
+
|
2649
|
+
##### Inherited from
|
2650
|
+
|
2651
|
+
Omit.isClearable
|
2652
|
+
|
2653
|
+
##### Defined in
|
2654
|
+
|
2655
|
+
packages/envoc-form/src/Select/SelectGroup.tsx:40
|
2656
|
+
|
2657
|
+
___
|
2658
|
+
|
2578
2659
|
#### label
|
2579
2660
|
|
2580
2661
|
• `Optional` **label**: `string`
|
@@ -2799,6 +2880,7 @@ packages/envoc-form/src/Form/ServerErrorContext.ts:9
|
|
2799
2880
|
- [disabled](#disabled)
|
2800
2881
|
- [helpText](#helptext)
|
2801
2882
|
- [input](#input)
|
2883
|
+
- [isClearable](#isclearable)
|
2802
2884
|
- [label](#label)
|
2803
2885
|
- [meta](#meta)
|
2804
2886
|
- [options](#options)
|
@@ -2869,6 +2951,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
|
|
2869
2951
|
|
2870
2952
|
___
|
2871
2953
|
|
2954
|
+
#### isClearable
|
2955
|
+
|
2956
|
+
• `Optional` **isClearable**: `boolean`
|
2957
|
+
|
2958
|
+
allows the select value to be cleared
|
2959
|
+
|
2960
|
+
##### Inherited from
|
2961
|
+
|
2962
|
+
[SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
|
2963
|
+
|
2964
|
+
##### Defined in
|
2965
|
+
|
2966
|
+
packages/envoc-form/src/Select/SelectGroup.tsx:40
|
2967
|
+
|
2968
|
+
___
|
2969
|
+
|
2872
2970
|
#### label
|
2873
2971
|
|
2874
2972
|
• `Optional` **label**: `string`
|
@@ -2964,6 +3062,7 @@ packages/envoc-form/src/Group.tsx:21
|
|
2964
3062
|
- [disabled](#disabled)
|
2965
3063
|
- [helpText](#helptext)
|
2966
3064
|
- [input](#input)
|
3065
|
+
- [isClearable](#isclearable)
|
2967
3066
|
- [label](#label)
|
2968
3067
|
- [meta](#meta)
|
2969
3068
|
- [options](#options)
|
@@ -3034,6 +3133,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
|
|
3034
3133
|
|
3035
3134
|
___
|
3036
3135
|
|
3136
|
+
#### isClearable
|
3137
|
+
|
3138
|
+
• `Optional` **isClearable**: `boolean`
|
3139
|
+
|
3140
|
+
allows the select value to be cleared
|
3141
|
+
|
3142
|
+
##### Inherited from
|
3143
|
+
|
3144
|
+
[SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
|
3145
|
+
|
3146
|
+
##### Defined in
|
3147
|
+
|
3148
|
+
packages/envoc-form/src/Select/SelectGroup.tsx:40
|
3149
|
+
|
3150
|
+
___
|
3151
|
+
|
3037
3152
|
#### label
|
3038
3153
|
|
3039
3154
|
• `Optional` **label**: `string`
|
@@ -3981,7 +4096,7 @@ ___
|
|
3981
4096
|
|
3982
4097
|
### FieldProps
|
3983
4098
|
|
3984
|
-
Ƭ **FieldProps**<`TForm`, `TProp`, `TRenderComponent`\>: { `Component`: [`RenderComponent`](#rendercomponent)<`TForm`[`TProp`], `TRenderComponent`\> ; `disabled?`: `boolean` ; `id?`: `string` ; `name`: `TProp` ; `normalize?`: [`NormalizationFunction`](#interfacesnormalizationfunctionmd)<`TForm`[`TProp`]\> ; `validate?`: [`ValidationFunction`](#interfacesvalidationfunctionmd)<`TForm`[`TProp`]\> \| [`ValidationFunction`](#interfacesvalidationfunctionmd)<`TForm`[`TProp`]\>[] } & `Omit`<[`RenderComponentProps`](#rendercomponentprops)<`TForm`[`TProp`], `TRenderComponent`\>, keyof [`InjectedFieldProps`](#interfacesinjectedfieldpropsmd)<`TForm`[`TProp`]\>\>
|
4099
|
+
Ƭ **FieldProps**<`TForm`, `TProp`, `TRenderComponent`\>: { `Component`: [`RenderComponent`](#rendercomponent)<`TForm`[`TProp`], `TRenderComponent`\> ; `disabled?`: `boolean` ; `id?`: `string` ; `name`: `TProp` ; `normalize?`: [`NormalizationFunction`](#interfacesnormalizationfunctionmd)<`TForm`[`TProp`]\> ; `required?`: `boolean` ; `validate?`: [`ValidationFunction`](#interfacesvalidationfunctionmd)<`TForm`[`TProp`]\> \| [`ValidationFunction`](#interfacesvalidationfunctionmd)<`TForm`[`TProp`]\>[] } & `Omit`<[`RenderComponentProps`](#rendercomponentprops)<`TForm`[`TProp`], `TRenderComponent`\>, keyof [`InjectedFieldProps`](#interfacesinjectedfieldpropsmd)<`TForm`[`TProp`]\>\>
|
3985
4100
|
|
3986
4101
|
A specific Field instance to be rendered by the given TRenderComponent or by whatever default is reasonable
|
3987
4102
|
|
@@ -4384,7 +4499,7 @@ Should no Component be used then the default will be provided by the default loo
|
|
4384
4499
|
|
4385
4500
|
#### Defined in
|
4386
4501
|
|
4387
|
-
packages/envoc-form/src/Field/Field.tsx:
|
4502
|
+
packages/envoc-form/src/Field/Field.tsx:61
|
4388
4503
|
|
4389
4504
|
___
|
4390
4505
|
|
@@ -4627,7 +4742,7 @@ Generic select dropdown. Uses [react-select](https://react-select.com/home).
|
|
4627
4742
|
|
4628
4743
|
#### Defined in
|
4629
4744
|
|
4630
|
-
packages/envoc-form/src/Select/SelectGroup.tsx:
|
4745
|
+
packages/envoc-form/src/Select/SelectGroup.tsx:45
|
4631
4746
|
|
4632
4747
|
___
|
4633
4748
|
|
package/es/Field/Field.d.ts
CHANGED
@@ -18,11 +18,12 @@ export type FieldProps<TForm extends object, TProp extends keyof TForm, TRenderC
|
|
18
18
|
validate?: ValidationFunction<TForm[TProp]> | ValidationFunction<TForm[TProp]>[];
|
19
19
|
/** Function to modify the field value without making the form dirty. (e.g. phone number) */
|
20
20
|
normalize?: NormalizationFunction<TForm[TProp]>;
|
21
|
+
required?: boolean;
|
21
22
|
} & Omit<RenderComponentProps<TForm[TProp], TRenderComponent>, keyof InjectedFieldProps<TForm[TProp]>>;
|
22
23
|
/**
|
23
24
|
* Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
|
24
25
|
* Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
|
25
26
|
*/
|
26
|
-
declare function Field<TForm extends object, TProp extends keyof TForm, TRenderComponent extends ElementType>({ name, Component, id, disabled, validate, normalize, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): import("react/jsx-runtime").JSX.Element;
|
27
|
+
declare function Field<TForm extends object, TProp extends keyof TForm, TRenderComponent extends ElementType>({ name, Component, id, disabled, validate, normalize, required, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): import("react/jsx-runtime").JSX.Element;
|
27
28
|
declare const _default: typeof Field;
|
28
29
|
export default _default;
|
package/es/Field/Field.js
CHANGED
@@ -30,18 +30,26 @@ import { required as requiredValidator } from '../Validation/validators';
|
|
30
30
|
* Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
|
31
31
|
*/
|
32
32
|
function Field(_a, ref) {
|
33
|
-
var name = _a.name, Component = _a.Component, id = _a.id, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize, rest = __rest(_a, ["name", "Component", "id", "disabled", "validate", "normalize"]);
|
33
|
+
var name = _a.name, Component = _a.Component, id = _a.id, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize, required = _a.required, rest = __rest(_a, ["name", "Component", "id", "disabled", "validate", "normalize", "required"]);
|
34
|
+
// enforces that validate is an array and adds the required validator if required prop is true
|
35
|
+
var validateArray = Array.isArray(validate)
|
36
|
+
? validate
|
37
|
+
: validate !== undefined
|
38
|
+
? [validate]
|
39
|
+
: [];
|
40
|
+
var validateWithRequired = required
|
41
|
+
? validateArray
|
42
|
+
.filter(function (x) { return x !== requiredValidator; })
|
43
|
+
.concat([requiredValidator])
|
44
|
+
: validateArray;
|
45
|
+
var isRequired = required || validateWithRequired.includes(requiredValidator);
|
34
46
|
var _b = useStandardFormInput({
|
35
47
|
name: String(name),
|
36
48
|
id: id,
|
37
49
|
disabled: disabled,
|
38
|
-
validate:
|
50
|
+
validate: validateWithRequired,
|
39
51
|
normalize: normalize,
|
40
52
|
}), input = _b[0], meta = _b[1];
|
41
|
-
var isRequired = (rest === null || rest === void 0 ? void 0 : rest.required) !== undefined
|
42
|
-
? rest.required
|
43
|
-
: validate === requiredValidator ||
|
44
|
-
(Array.isArray(validate) && validate.includes(requiredValidator));
|
45
53
|
// a bit of a hack so JSX is happy with us
|
46
54
|
var Wrapped = Component;
|
47
55
|
return (_jsx(FieldNameContext.Provider, { value: input.name, children: _jsx(Wrapped, __assign({}, rest, { ref: ref, id: input.id, input: input, meta: meta, required: isRequired, disabled: disabled })) }));
|
@@ -21,7 +21,9 @@ export interface SelectGroupProps<TValue> extends InjectedFieldProps<TValue | un
|
|
21
21
|
multiple: TValue extends Array<any> ? true : false;
|
22
22
|
/** Text diplayed when no value is selected. */
|
23
23
|
placeholder?: string;
|
24
|
+
/** allows the select value to be cleared */
|
25
|
+
isClearable?: boolean;
|
24
26
|
}
|
25
27
|
/** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
|
26
|
-
export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
|
28
|
+
export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, isClearable, label, helpText, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
|
27
29
|
export {};
|
package/es/Select/SelectGroup.js
CHANGED
@@ -29,7 +29,7 @@ import Group from '../Group';
|
|
29
29
|
/** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
|
30
30
|
export default function SelectGroup(_a) {
|
31
31
|
var _b;
|
32
|
-
var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder"]);
|
32
|
+
var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, isClearable = _a.isClearable, label = _a.label, helpText = _a.helpText, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder", "isClearable", "label", "helpText"]);
|
33
33
|
var effectiveOptions = !options
|
34
34
|
? []
|
35
35
|
: Array.isArray(options)
|
@@ -43,17 +43,17 @@ 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,
|
46
|
+
return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, required: required, disabled: disabled, className: clsx(className, (_b = {},
|
47
47
|
_b[FormDefaults.cssClassPrefix + 'multiple'] = multiple,
|
48
48
|
_b[FormDefaults.cssClassPrefix + 'loading'] = isLoading,
|
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) {
|
49
|
+
_b), FormDefaults.cssClassPrefix + 'select-group'), children: _jsx(ReactSelect, __assign({}, rest, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
|
50
50
|
if (multiple === true) {
|
51
51
|
input.onChange(e === null || e === void 0 ? void 0 : e.map(function (x) { return x.value; }));
|
52
52
|
}
|
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: clsx(className, FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) }))
|
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, isClearable: isClearable })) }));
|
57
57
|
function getValue() {
|
58
58
|
if (multiple) {
|
59
59
|
return effectiveOptions.filter(function (o) {
|
package/lib/Field/Field.d.ts
CHANGED
@@ -18,11 +18,12 @@ export type FieldProps<TForm extends object, TProp extends keyof TForm, TRenderC
|
|
18
18
|
validate?: ValidationFunction<TForm[TProp]> | ValidationFunction<TForm[TProp]>[];
|
19
19
|
/** Function to modify the field value without making the form dirty. (e.g. phone number) */
|
20
20
|
normalize?: NormalizationFunction<TForm[TProp]>;
|
21
|
+
required?: boolean;
|
21
22
|
} & Omit<RenderComponentProps<TForm[TProp], TRenderComponent>, keyof InjectedFieldProps<TForm[TProp]>>;
|
22
23
|
/**
|
23
24
|
* Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
|
24
25
|
* Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
|
25
26
|
*/
|
26
|
-
declare function Field<TForm extends object, TProp extends keyof TForm, TRenderComponent extends ElementType>({ name, Component, id, disabled, validate, normalize, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): import("react/jsx-runtime").JSX.Element;
|
27
|
+
declare function Field<TForm extends object, TProp extends keyof TForm, TRenderComponent extends ElementType>({ name, Component, id, disabled, validate, normalize, required, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): import("react/jsx-runtime").JSX.Element;
|
27
28
|
declare const _default: typeof Field;
|
28
29
|
export default _default;
|
package/lib/Field/Field.js
CHANGED
@@ -35,18 +35,26 @@ var validators_1 = require("../Validation/validators");
|
|
35
35
|
* Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
|
36
36
|
*/
|
37
37
|
function Field(_a, ref) {
|
38
|
-
var name = _a.name, Component = _a.Component, id = _a.id, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize, rest = __rest(_a, ["name", "Component", "id", "disabled", "validate", "normalize"]);
|
38
|
+
var name = _a.name, Component = _a.Component, id = _a.id, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize, required = _a.required, rest = __rest(_a, ["name", "Component", "id", "disabled", "validate", "normalize", "required"]);
|
39
|
+
// enforces that validate is an array and adds the required validator if required prop is true
|
40
|
+
var validateArray = Array.isArray(validate)
|
41
|
+
? validate
|
42
|
+
: validate !== undefined
|
43
|
+
? [validate]
|
44
|
+
: [];
|
45
|
+
var validateWithRequired = required
|
46
|
+
? validateArray
|
47
|
+
.filter(function (x) { return x !== validators_1.required; })
|
48
|
+
.concat([validators_1.required])
|
49
|
+
: validateArray;
|
50
|
+
var isRequired = required || validateWithRequired.includes(validators_1.required);
|
39
51
|
var _b = (0, useStandardField_1.default)({
|
40
52
|
name: String(name),
|
41
53
|
id: id,
|
42
54
|
disabled: disabled,
|
43
|
-
validate:
|
55
|
+
validate: validateWithRequired,
|
44
56
|
normalize: normalize,
|
45
57
|
}), input = _b[0], meta = _b[1];
|
46
|
-
var isRequired = (rest === null || rest === void 0 ? void 0 : rest.required) !== undefined
|
47
|
-
? rest.required
|
48
|
-
: validate === validators_1.required ||
|
49
|
-
(Array.isArray(validate) && validate.includes(validators_1.required));
|
50
58
|
// a bit of a hack so JSX is happy with us
|
51
59
|
var Wrapped = Component;
|
52
60
|
return ((0, jsx_runtime_1.jsx)(FieldNameContext_1.FieldNameContext.Provider, { value: input.name, children: (0, jsx_runtime_1.jsx)(Wrapped, __assign({}, rest, { ref: ref, id: input.id, input: input, meta: meta, required: isRequired, disabled: disabled })) }));
|
@@ -21,7 +21,9 @@ export interface SelectGroupProps<TValue> extends InjectedFieldProps<TValue | un
|
|
21
21
|
multiple: TValue extends Array<any> ? true : false;
|
22
22
|
/** Text diplayed when no value is selected. */
|
23
23
|
placeholder?: string;
|
24
|
+
/** allows the select value to be cleared */
|
25
|
+
isClearable?: boolean;
|
24
26
|
}
|
25
27
|
/** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
|
26
|
-
export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
|
28
|
+
export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, isClearable, label, helpText, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
|
27
29
|
export {};
|
@@ -34,7 +34,7 @@ var Group_1 = __importDefault(require("../Group"));
|
|
34
34
|
/** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
|
35
35
|
function SelectGroup(_a) {
|
36
36
|
var _b;
|
37
|
-
var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder"]);
|
37
|
+
var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, isClearable = _a.isClearable, label = _a.label, helpText = _a.helpText, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder", "isClearable", "label", "helpText"]);
|
38
38
|
var effectiveOptions = !options
|
39
39
|
? []
|
40
40
|
: Array.isArray(options)
|
@@ -48,17 +48,17 @@ function SelectGroup(_a) {
|
|
48
48
|
? options.resp
|
49
49
|
: [];
|
50
50
|
var isLoading = (options && 'loading' in options && options.loading) || false;
|
51
|
-
return ((0, jsx_runtime_1.jsx)(Group_1.default,
|
51
|
+
return ((0, jsx_runtime_1.jsx)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, required: required, disabled: disabled, className: (0, clsx_1.clsx)(className, (_b = {},
|
52
52
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'multiple'] = multiple,
|
53
53
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'loading'] = isLoading,
|
54
|
-
_b), FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), children: (0, jsx_runtime_1.jsx)(react_select_1.default, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
|
54
|
+
_b), FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({}, rest, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
|
55
55
|
if (multiple === true) {
|
56
56
|
input.onChange(e === null || e === void 0 ? void 0 : e.map(function (x) { return x.value; }));
|
57
57
|
}
|
58
58
|
else {
|
59
59
|
input.onChange(e === null || e === void 0 ? void 0 : e.value);
|
60
60
|
}
|
61
|
-
}, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) }))
|
61
|
+
}, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder, isClearable: isClearable })) }));
|
62
62
|
function getValue() {
|
63
63
|
if (multiple) {
|
64
64
|
return effectiveOptions.filter(function (o) {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "envoc-form",
|
3
|
-
"version": "5.0.
|
3
|
+
"version": "5.0.8",
|
4
4
|
"description": "Envoc form components",
|
5
5
|
"keywords": [
|
6
6
|
"react-component",
|
@@ -37,7 +37,7 @@
|
|
37
37
|
"dependencies": {
|
38
38
|
"axios": "^0.21.1",
|
39
39
|
"date-fns": "^2.22.1",
|
40
|
-
"envoc-request": "^5.0.
|
40
|
+
"envoc-request": "^5.0.8",
|
41
41
|
"lru-cache": "^6.0.0",
|
42
42
|
"prop-types": "^15.7.2",
|
43
43
|
"react-date-picker": "^8.2.0",
|
package/src/Field/Field.tsx
CHANGED
@@ -48,6 +48,7 @@ export type FieldProps<
|
|
48
48
|
| ValidationFunction<TForm[TProp]>[];
|
49
49
|
/** Function to modify the field value without making the form dirty. (e.g. phone number) */
|
50
50
|
normalize?: NormalizationFunction<TForm[TProp]>;
|
51
|
+
required?: boolean;
|
51
52
|
} & Omit<
|
52
53
|
RenderComponentProps<TForm[TProp], TRenderComponent>,
|
53
54
|
keyof InjectedFieldProps<TForm[TProp]>
|
@@ -69,24 +70,37 @@ function Field<
|
|
69
70
|
disabled,
|
70
71
|
validate,
|
71
72
|
normalize,
|
73
|
+
required,
|
72
74
|
...rest
|
73
75
|
}: FieldProps<TForm, TProp, TRenderComponent>,
|
74
76
|
ref: LegacyRef<any>
|
75
77
|
) {
|
78
|
+
// enforces that validate is an array and adds the required validator if required prop is true
|
79
|
+
const validateArray: ValidationFunction<TForm[TProp]>[] = Array.isArray(
|
80
|
+
validate
|
81
|
+
)
|
82
|
+
? validate
|
83
|
+
: validate !== undefined
|
84
|
+
? [validate]
|
85
|
+
: [];
|
86
|
+
|
87
|
+
const validateWithRequired = required
|
88
|
+
? validateArray
|
89
|
+
.filter((x) => x !== requiredValidator)
|
90
|
+
.concat([requiredValidator])
|
91
|
+
: validateArray;
|
92
|
+
|
93
|
+
const isRequired =
|
94
|
+
required || validateWithRequired.includes(requiredValidator);
|
95
|
+
|
76
96
|
const [input, meta] = useStandardFormInput<TForm[TProp]>({
|
77
97
|
name: String(name),
|
78
98
|
id: id,
|
79
99
|
disabled: disabled,
|
80
|
-
validate:
|
100
|
+
validate: validateWithRequired,
|
81
101
|
normalize: normalize,
|
82
102
|
});
|
83
103
|
|
84
|
-
const isRequired =
|
85
|
-
rest?.required !== undefined
|
86
|
-
? rest.required
|
87
|
-
: validate === requiredValidator ||
|
88
|
-
(Array.isArray(validate) && validate.includes(requiredValidator));
|
89
|
-
|
90
104
|
// a bit of a hack so JSX is happy with us
|
91
105
|
const Wrapped = Component as React.ComponentType<
|
92
106
|
InjectedFieldProps<TForm[TProp]>
|
@@ -36,6 +36,8 @@ export interface SelectGroupProps<TValue>
|
|
36
36
|
multiple: TValue extends Array<any> ? true : false;
|
37
37
|
/** Text diplayed when no value is selected. */
|
38
38
|
placeholder?: string;
|
39
|
+
/** allows the select value to be cleared */
|
40
|
+
isClearable?: boolean;
|
39
41
|
}
|
40
42
|
|
41
43
|
// TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
|
@@ -49,6 +51,9 @@ export default function SelectGroup<TValue>({
|
|
49
51
|
options,
|
50
52
|
multiple,
|
51
53
|
placeholder,
|
54
|
+
isClearable,
|
55
|
+
label,
|
56
|
+
helpText,
|
52
57
|
...rest
|
53
58
|
}: SelectGroupProps<TValue>) {
|
54
59
|
const effectiveOptions: Partial<SelectOption<TValue>>[] = !options
|
@@ -69,9 +74,10 @@ export default function SelectGroup<TValue>({
|
|
69
74
|
|
70
75
|
return (
|
71
76
|
<Group
|
72
|
-
{...rest}
|
73
77
|
input={input}
|
74
78
|
meta={meta}
|
79
|
+
label={label}
|
80
|
+
helpText={helpText}
|
75
81
|
required={required}
|
76
82
|
disabled={disabled}
|
77
83
|
className={clsx(
|
@@ -86,6 +92,7 @@ export default function SelectGroup<TValue>({
|
|
86
92
|
Partial<SelectOption<TValue>>,
|
87
93
|
TValue extends Array<any> ? true : false
|
88
94
|
>
|
95
|
+
{...rest}
|
89
96
|
inputId={input.id}
|
90
97
|
isMulti={multiple}
|
91
98
|
isDisabled={disabled}
|
@@ -108,6 +115,7 @@ export default function SelectGroup<TValue>({
|
|
108
115
|
menuPortalTarget={document.body}
|
109
116
|
menuPlacement="auto"
|
110
117
|
placeholder={placeholder}
|
118
|
+
isClearable={isClearable}
|
111
119
|
/>
|
112
120
|
</Group>
|
113
121
|
);
|
@@ -20,6 +20,7 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
|
|
20
20
|
</label>
|
21
21
|
<div
|
22
22
|
class="envoc-form-select-group css-b62m3t-container"
|
23
|
+
id="userRoles"
|
23
24
|
>
|
24
25
|
<span
|
25
26
|
class="css-1f43avz-a11yText-A11yText"
|
@@ -117,6 +118,7 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
|
|
117
118
|
</label>
|
118
119
|
<div
|
119
120
|
class="envoc-form-select-group css-b62m3t-container"
|
121
|
+
id="favoriteNumber"
|
120
122
|
>
|
121
123
|
<span
|
122
124
|
class="css-1f43avz-a11yText-A11yText"
|
@@ -20,6 +20,7 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
|
|
20
20
|
</label>
|
21
21
|
<div
|
22
22
|
class="envoc-form-select-group css-b62m3t-container"
|
23
|
+
id="favoriteColors"
|
23
24
|
>
|
24
25
|
<span
|
25
26
|
class="css-1f43avz-a11yText-A11yText"
|
@@ -117,6 +118,7 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
|
|
117
118
|
</label>
|
118
119
|
<div
|
119
120
|
class="envoc-form-select-group css-b62m3t-container"
|
121
|
+
id="favoriteColor"
|
120
122
|
>
|
121
123
|
<span
|
122
124
|
class="css-1f43avz-a11yText-A11yText"
|