Skip to content

Commit b1d988d

Browse files
danielfdsilvadanielfdsilva
committed
Add error message to widgets
1 parent d81b079 commit b1d988d

File tree

5 files changed

+84
-64
lines changed

5 files changed

+84
-64
lines changed

‎packages/data-widgets/lib/widgets/checkbox.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ export function WidgetCheckbox(props: WidgetProps) {
3333
meta,
3434
form: { setFieldValue, setFieldTouched }
3535
}: FastFieldProps) => (
36-
<FormControl isRequired={isRequired}>
36+
<FormControl
37+
isRequired={isRequired}
38+
isInvalid={!!(meta.touched && meta.error)}
39+
>
3740
{field.label && (
3841
<FormLabel>
3942
<FieldLabel size='xs'>{field.label}</FieldLabel>
@@ -54,9 +57,7 @@ export function WidgetCheckbox(props: WidgetProps) {
5457
))}
5558
</CheckboxGroup>
5659
</Flex>
57-
{meta.touched && meta.error && (
58-
<FormErrorMessage>{meta.error}</FormErrorMessage>
59-
)}
60+
<FormErrorMessage>{meta.error}</FormErrorMessage>
6061
</FormControl>
6162
)}
6263
</FastField>

‎packages/data-widgets/lib/widgets/input.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@ export function WidgetInput(props: WidgetInputProps) {
4545
meta,
4646
form: { setFieldValue }
4747
}: FastFieldProps) => (
48-
<FormControl isRequired={isRequired}>
48+
<FormControl
49+
isRequired={isRequired}
50+
isInvalid={meta.touched && meta.error ? true : false}
51+
>
4952
<Flex gap={4}>
5053
{fieldLabel && (
5154
<FormLabel>
@@ -75,11 +78,8 @@ export function WidgetInput(props: WidgetInputProps) {
7578
onChange={(e) => {
7679
setFieldValue(pointer, transformValue(e.target.value));
7780
}}
78-
isInvalid={meta.touched && meta.error ? true : false}
7981
/>
80-
{meta.touched && meta.error && (
81-
<FormErrorMessage>{meta.error}</FormErrorMessage>
82-
)}
82+
<FormErrorMessage>{meta.error}</FormErrorMessage>
8383
</FormControl>
8484
)}
8585
</FastField>

‎packages/data-widgets/lib/widgets/radio.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ export function WidgetRadio(props: WidgetProps) {
2828
meta,
2929
form: { setFieldValue, setFieldTouched }
3030
}: FastFieldProps) => (
31-
<FormControl isRequired={isRequired}>
31+
<FormControl
32+
isRequired={isRequired}
33+
isInvalid={!!(meta.touched && meta.error)}
34+
>
3235
{field.label && (
3336
<FormLabel>
3437
<FieldLabel size='xs'>{field.label}</FieldLabel>
@@ -50,9 +53,7 @@ export function WidgetRadio(props: WidgetProps) {
5053
</Radio>
5154
))}
5255
</RadioGroup>
53-
{meta.touched && meta.error && (
54-
<FormErrorMessage>{meta.error}</FormErrorMessage>
55-
)}
56+
<FormErrorMessage>{meta.error}</FormErrorMessage>
5657
</FormControl>
5758
)}
5859
</FastField>

‎packages/data-widgets/lib/widgets/select.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useMemo } from 'react';
2-
import { FormControl, FormLabel } from '@chakra-ui/react';
2+
import { FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react';
33
import { FastField, FastFieldProps } from 'formik';
44
import ReactSelect from 'react-select';
55
import {
@@ -44,23 +44,26 @@ export function WidgetSelect(props: WidgetProps) {
4444
}, [field]);
4545

4646
return (
47-
<FormControl isRequired={isRequired}>
48-
{field.label && (
49-
<FormLabel>
50-
<FieldLabel size='xs'>{field.label}</FieldLabel>
51-
</FormLabel>
52-
)}
47+
<FastField name={pointer} key={key}>
48+
{({
49+
field: { name, value },
50+
meta,
51+
form: { setFieldValue }
52+
}: FastFieldProps) => {
53+
const selectedOpts = options.filter((option) =>
54+
castArray(value).includes(option.value)
55+
);
5356

54-
<FastField name={pointer} key={key}>
55-
{({
56-
field: { name, value },
57-
form: { setFieldValue }
58-
}: FastFieldProps) => {
59-
const selectedOpts = options.filter((option) =>
60-
castArray(value).includes(option.value)
61-
);
62-
63-
return (
57+
return (
58+
<FormControl
59+
isRequired={isRequired}
60+
isInvalid={!!(meta.touched && meta.error)}
61+
>
62+
{field.label && (
63+
<FormLabel>
64+
<FieldLabel size='xs'>{field.label}</FieldLabel>
65+
</FormLabel>
66+
)}
6467
<ReactSelect
6568
name={name}
6669
options={options}
@@ -80,9 +83,10 @@ export function WidgetSelect(props: WidgetProps) {
8083
}}
8184
value={selectedOpts}
8285
/>
83-
);
84-
}}
85-
</FastField>
86-
</FormControl>
86+
<FormErrorMessage>{meta.error}</FormErrorMessage>
87+
</FormControl>
88+
);
89+
}}
90+
</FastField>
8791
);
8892
}

‎packages/data-widgets/lib/widgets/tagger.tsx‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import React, {
44
useMemo,
55
useState
66
} from 'react';
7-
import { Kbd, FormControl, FormLabel } from '@chakra-ui/react';
7+
import {
8+
Kbd,
9+
FormControl,
10+
FormLabel,
11+
FormErrorMessage
12+
} from '@chakra-ui/react';
813
import { FastField, FastFieldProps } from 'formik';
914
import CreatableSelect from 'react-select/creatable';
1015
import {
@@ -81,26 +86,30 @@ function WidgetTaggerNoOptions(props: WidgetProps) {
8186
const key = useRenderKey([pointer, isRequired, field]);
8287

8388
return (
84-
<FormControl isRequired={isRequired}>
85-
{field.label && (
86-
<FormLabel>
87-
<FieldLabel size='xs'>{field.label}</FieldLabel>
88-
</FormLabel>
89-
)}
90-
91-
<FastField name={pointer} key={key}>
92-
{({
93-
field: { value, name },
94-
form: { setFieldValue }
95-
}: FastFieldProps) => (
89+
<FastField name={pointer} key={key}>
90+
{({
91+
field: { value, name },
92+
meta,
93+
form: { setFieldValue }
94+
}: FastFieldProps) => (
95+
<FormControl
96+
isRequired={isRequired}
97+
isInvalid={!!(meta.touched && meta.error)}
98+
>
99+
{field.label && (
100+
<FormLabel>
101+
<FieldLabel size='xs'>{field.label}</FieldLabel>
102+
</FormLabel>
103+
)}
96104
<WidgetTaggerNoOptionsSelect
97105
pointer={pointer}
98106
value={value}
99107
onChange={(v: string | string[]) => setFieldValue(name, v)}
100108
/>
101-
)}
102-
</FastField>
103-
</FormControl>
109+
<FormErrorMessage>{meta.error}</FormErrorMessage>
110+
</FormControl>
111+
)}
112+
</FastField>
104113
);
105114
}
106115

@@ -178,28 +187,33 @@ function WidgetTaggerWithOptions(props: WidgetProps & { isMulti?: boolean }) {
178187
}, [field]);
179188

180189
return (
181-
<FormControl isRequired={isRequired}>
182-
{field.label && (
183-
<FormLabel>
184-
<FieldLabel size='xs'>{field.label}</FieldLabel>
185-
</FormLabel>
186-
)}
190+
<FastField name={pointer} key={key}>
191+
{({
192+
field: { name, value },
193+
meta,
194+
form: { setFieldValue }
195+
}: FastFieldProps) => (
196+
<FormControl
197+
isRequired={isRequired}
198+
isInvalid={!!(meta.touched && meta.error)}
199+
>
200+
{field.label && (
201+
<FormLabel>
202+
<FieldLabel size='xs'>{field.label}</FieldLabel>
203+
</FormLabel>
204+
)}
187205

188-
<FastField name={pointer} key={key}>
189-
{({
190-
field: { name, value },
191-
form: { setFieldValue }
192-
}: FastFieldProps) => (
193206
<WidgetTaggerWithOptionsSelect
194207
pointer={pointer}
195208
isMulti={!!isMulti}
196209
value={value}
197210
onChange={(v: string | string[]) => setFieldValue(name, v)}
198211
options={options}
199212
/>
200-
)}
201-
</FastField>
202-
</FormControl>
213+
<FormErrorMessage>{meta.error}</FormErrorMessage>
214+
</FormControl>
215+
)}
216+
</FastField>
203217
);
204218
}
205219

0 commit comments

Comments
 (0)