1 | import * as React from 'react';
|
2 | import { StandardProps, PropTypes } from '..';
|
3 | import { FormControlProps } from '../FormControl';
|
4 | import { FormHelperTextProps } from '../FormHelperText';
|
5 | import { InputProps as StandardInputProps } from '../Input';
|
6 | import { FilledInputProps } from '../FilledInput';
|
7 | import { OutlinedInputProps } from '../OutlinedInput';
|
8 | import { InputLabelProps } from '../InputLabel';
|
9 | import { SelectProps } from '../Select';
|
10 |
|
11 | export interface BaseTextFieldProps
|
12 | extends StandardProps<
|
13 | FormControlProps,
|
14 | TextFieldClassKey,
|
15 | // event handlers are declared on derived interfaces
|
16 | 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'
|
17 | > {
|
18 | /**
|
19 | * This prop helps users to fill forms faster, especially on mobile devices.
|
20 | * The name can be confusing, as it's more like an autofill.
|
21 | * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
|
22 | */
|
23 | autoComplete?: string;
|
24 | /**
|
25 | * If `true`, the `input` element will be focused during the first mount.
|
26 | */
|
27 | autoFocus?: boolean;
|
28 | /**
|
29 | * @ignore
|
30 | */
|
31 | children?: React.ReactNode;
|
32 | /**
|
33 | * The color of the component. It supports those theme colors that make sense for this component.
|
34 | */
|
35 | color?: 'primary' | 'secondary';
|
36 | /**
|
37 | * The default value of the `input` element.
|
38 | */
|
39 | defaultValue?: unknown;
|
40 | /**
|
41 | * If `true`, the `input` element will be disabled.
|
42 | */
|
43 | disabled?: boolean;
|
44 | /**
|
45 | * If `true`, the label will be displayed in an error state.
|
46 | */
|
47 | error?: boolean;
|
48 | /**
|
49 | * Props applied to the [`FormHelperText`](/api/form-helper-text/) element.
|
50 | */
|
51 | FormHelperTextProps?: Partial<FormHelperTextProps>;
|
52 | /**
|
53 | * If `true`, the input will take up the full width of its container.
|
54 | */
|
55 | fullWidth?: boolean;
|
56 | /**
|
57 | * The helper text content.
|
58 | */
|
59 | helperText?: React.ReactNode;
|
60 | /**
|
61 | * The id of the `input` element.
|
62 | * Use this prop to make `label` and `helperText` accessible for screen readers.
|
63 | */
|
64 | id?: string;
|
65 | /**
|
66 | * Props applied to the [`InputLabel`](/api/input-label/) element.
|
67 | */
|
68 | InputLabelProps?: Partial<InputLabelProps>;
|
69 | /**
|
70 | * Pass a ref to the `input` element.
|
71 | */
|
72 | inputRef?: React.Ref<any>;
|
73 | /**
|
74 | * The label content.
|
75 | */
|
76 | label?: React.ReactNode;
|
77 | /**
|
78 | * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
|
79 | */
|
80 | margin?: PropTypes.Margin;
|
81 | /**
|
82 | * If `true`, a textarea element will be rendered instead of an input.
|
83 | */
|
84 | multiline?: boolean;
|
85 | /**
|
86 | * Name attribute of the `input` element.
|
87 | */
|
88 | name?: string;
|
89 | /**
|
90 | * The short hint displayed in the input before the user enters a value.
|
91 | */
|
92 | placeholder?: string;
|
93 | /**
|
94 | * If `true`, the label is displayed as required and the `input` element` will be required.
|
95 | */
|
96 | required?: boolean;
|
97 | /**
|
98 | * Number of rows to display when multiline option is set to true.
|
99 | */
|
100 | rows?: string | number;
|
101 | /**
|
102 | * Maximum number of rows to display.
|
103 | * @deprecated Use `maxRows` instead.
|
104 | */
|
105 | rowsMax?: string | number;
|
106 | /**
|
107 | * Maximum number of rows to display when multiline option is set to true.
|
108 | */
|
109 | maxRows?: string | number;
|
110 | /**
|
111 | * Render a [`Select`](/api/select/) element while passing the Input element to `Select` as `input` parameter.
|
112 | * If this option is set you must pass the options of the select as children.
|
113 | */
|
114 | select?: boolean;
|
115 | /**
|
116 | * Props applied to the [`Select`](/api/select/) element.
|
117 | */
|
118 | SelectProps?: Partial<SelectProps>;
|
119 | /**
|
120 | * The size of the text field.
|
121 | */
|
122 | size?: 'small' | 'medium';
|
123 | /**
|
124 | * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
|
125 | */
|
126 | type?: React.InputHTMLAttributes<unknown>['type'];
|
127 | /**
|
128 | * The value of the `input` element, required for a controlled component.
|
129 | */
|
130 | value?: unknown;
|
131 | }
|
132 |
|
133 | export interface StandardTextFieldProps extends BaseTextFieldProps {
|
134 | onBlur?: StandardInputProps['onBlur'];
|
135 | /**
|
136 | * Callback fired when the value is changed.
|
137 | *
|
138 | * @param {object} event The event source of the callback.
|
139 | * You can pull out the new value by accessing `event.target.value` (string).
|
140 | */
|
141 | onChange?: StandardInputProps['onChange'];
|
142 | onFocus?: StandardInputProps['onFocus'];
|
143 | /**
|
144 | * The variant to use.
|
145 | */
|
146 | variant?: 'standard';
|
147 | /**
|
148 | * Props applied to the Input element.
|
149 | * It will be a [`FilledInput`](/api/filled-input/),
|
150 | * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)
|
151 | * component depending on the `variant` prop value.
|
152 | */
|
153 | InputProps?: Partial<StandardInputProps>;
|
154 | /**
|
155 | * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
156 | */
|
157 | inputProps?: StandardInputProps['inputProps'];
|
158 | }
|
159 |
|
160 | export interface FilledTextFieldProps extends BaseTextFieldProps {
|
161 | onBlur?: FilledInputProps['onBlur'];
|
162 | /**
|
163 | * Callback fired when the value is changed.
|
164 | *
|
165 | * @param {object} event The event source of the callback.
|
166 | * You can pull out the new value by accessing `event.target.value` (string).
|
167 | */
|
168 | onChange?: FilledInputProps['onChange'];
|
169 | onFocus?: FilledInputProps['onFocus'];
|
170 | /**
|
171 | * The variant to use.
|
172 | */
|
173 | variant: 'filled';
|
174 | /**
|
175 | * Props applied to the Input element.
|
176 | * It will be a [`FilledInput`](/api/filled-input/),
|
177 | * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)
|
178 | * component depending on the `variant` prop value.
|
179 | */
|
180 | InputProps?: Partial<FilledInputProps>;
|
181 | /**
|
182 | * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
183 | */
|
184 | inputProps?: FilledInputProps['inputProps'];
|
185 | }
|
186 |
|
187 | export interface OutlinedTextFieldProps extends BaseTextFieldProps {
|
188 | onBlur?: OutlinedInputProps['onBlur'];
|
189 | /**
|
190 | * Callback fired when the value is changed.
|
191 | *
|
192 | * @param {object} event The event source of the callback.
|
193 | * You can pull out the new value by accessing `event.target.value` (string).
|
194 | */
|
195 | onChange?: OutlinedInputProps['onChange'];
|
196 | onFocus?: OutlinedInputProps['onFocus'];
|
197 | /**
|
198 | * The variant to use.
|
199 | */
|
200 | variant: 'outlined';
|
201 | /**
|
202 | * Props applied to the Input element.
|
203 | * It will be a [`FilledInput`](/api/filled-input/),
|
204 | * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)
|
205 | * component depending on the `variant` prop value.
|
206 | */
|
207 | InputProps?: Partial<OutlinedInputProps>;
|
208 | /**
|
209 | * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
210 | */
|
211 | inputProps?: OutlinedInputProps['inputProps'];
|
212 | }
|
213 |
|
214 | export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;
|
215 |
|
216 | export type TextFieldClassKey = 'root';
|
217 |
|
218 | /**
|
219 | * The `TextField` is a convenience wrapper for the most common cases (80%).
|
220 | * It cannot be all things to all people, otherwise the API would grow out of control.
|
221 | *
|
222 | * ## Advanced Configuration
|
223 | *
|
224 | * It's important to understand that the text field is a simple abstraction
|
225 | * on top of the following components:
|
226 | *
|
227 | * - [FormControl](https://material-ui.com/api/form-control/)
|
228 | * - [InputLabel](https://material-ui.com/api/input-label/)
|
229 | * - [FilledInput](https://material-ui.com/api/filled-input/)
|
230 | * - [OutlinedInput](https://material-ui.com/api/outlined-input/)
|
231 | * - [Input](https://material-ui.com/api/input/)
|
232 | * - [FormHelperText](https://material-ui.com/api/form-helper-text/)
|
233 | *
|
234 | * If you wish to alter the props applied to the `input` element, you can do so as follows:
|
235 | *
|
236 | * ```jsx
|
237 | * const inputProps = {
|
238 | * step: 300,
|
239 | * };
|
240 | *
|
241 | * return <TextField id="time" type="time" inputProps={inputProps} />;
|
242 | * ```
|
243 | *
|
244 | * For advanced cases, please look at the source of TextField by clicking on the
|
245 | * "Edit this page" button above. Consider either:
|
246 | *
|
247 | * - using the upper case props for passing values directly to the components
|
248 | * - using the underlying components directly as shown in the demos
|
249 | * Demos:
|
250 | *
|
251 | * - [Autocomplete](https://material-ui.com/components/autocomplete/)
|
252 | * - [Pickers](https://material-ui.com/components/pickers/)
|
253 | * - [Text Fields](https://material-ui.com/components/text-fields/)
|
254 | *
|
255 | * API:
|
256 | *
|
257 | * - [TextField API](https://material-ui.com/api/text-field/)
|
258 | * - inherits [FormControl API](https://material-ui.com/api/form-control/)
|
259 | */
|
260 | export default function TextField(props: TextFieldProps): JSX.Element;
|