-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
/
TextInput.tsx
106 lines (100 loc) · 2.74 KB
/
TextInput.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useInput, FieldTitle } from 'ra-core';
import { CommonInputProps } from './CommonInputProps';
import {
ResettableTextField,
ResettableTextFieldProps,
} from './ResettableTextField';
import { InputHelperText } from './InputHelperText';
import { sanitizeInputRestProps } from './sanitizeInputRestProps';
/**
* An Input component for a string
*
* @example
* <TextInput source="first_name" />
*
* You can customize the `type` props (which defaults to "text").
* Note that, due to a React bug, you should use `<NumberField>` instead of using type="number".
* @example
* <TextInput source="email" type="email" />
* <NumberInput source="nb_views" />
*
*/
export const TextInput = (props: TextInputProps) => {
const {
className,
defaultValue,
label,
format,
helperText,
onBlur,
onChange,
parse,
resource,
source,
validate,
...rest
} = props;
const {
field,
fieldState: { error, invalid, isTouched },
formState: { isSubmitted },
id,
isRequired,
} = useInput({
defaultValue,
format,
parse,
resource,
source,
type: 'text',
validate,
onBlur,
onChange,
...rest,
});
const renderHelperText =
helperText !== false || ((isTouched || isSubmitted) && invalid);
return (
<ResettableTextField
id={id}
{...field}
className={clsx('ra-input', `ra-input-${source}`, className)}
label={
label !== '' && label !== false ? (
<FieldTitle
label={label}
source={source}
resource={resource}
isRequired={isRequired}
/>
) : null
}
error={(isTouched || isSubmitted) && invalid}
helperText={
renderHelperText ? (
<InputHelperText
touched={isTouched || isSubmitted}
error={error?.message}
helperText={helperText}
/>
) : null
}
{...sanitizeInputRestProps(rest)}
/>
);
};
TextInput.propTypes = {
className: PropTypes.string,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
PropTypes.element,
]),
resource: PropTypes.string,
source: PropTypes.string,
};
export type TextInputProps = CommonInputProps &
Omit<ResettableTextFieldProps, 'label' | 'helperText'>;