-
Notifications
You must be signed in to change notification settings - Fork 141
/
TextField.tsx
42 lines (36 loc) · 1.14 KB
/
TextField.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import * as React from 'react';
import MuiTextField, {
TextFieldProps as MuiTextFieldProps,
} from '@material-ui/core/TextField';
import { FieldProps, getIn } from 'formik';
export type TextFieldProps = FieldProps &
Omit<MuiTextFieldProps, 'error' | 'name' | 'onChange' | 'value'> & {
// Fix for the type for variant which is using union
// https://stackoverflow.com/questions/55664421
variant: 'standard' | 'filled' | 'outlined' | undefined;
};
export const fieldToTextField = ({
field,
form,
disabled,
...props
}: TextFieldProps): MuiTextFieldProps => {
const { name } = field;
const { touched, errors, isSubmitting } = form;
const fieldError = getIn(errors, name);
const showError = getIn(touched, name) && !!fieldError;
return {
...props,
...field,
error: showError,
helperText: showError ? fieldError : props.helperText,
disabled: disabled ?? isSubmitting,
};
};
export const TextField: React.ComponentType<TextFieldProps> = ({
children,
...props
}: TextFieldProps) => (
<MuiTextField {...fieldToTextField(props)}>{children}</MuiTextField>
);
TextField.displayName = 'FormikMaterialUITextField';