1 | import * as React from 'react';
|
2 | import { StandardProps } from '..';
|
3 |
|
4 | export interface InputBaseProps
|
5 | extends StandardProps<
|
6 | React.HTMLAttributes<HTMLDivElement>,
|
7 | InputBaseClassKey,
|
8 | /*
|
9 | * `onChange`, `onKeyUp`, `onKeyDown`, `onBlur`, `onFocus` are applied to the inner `InputComponent`,
|
10 | * which by default is an input or textarea. Since these handlers differ from the
|
11 | * ones inherited by `React.HTMLAttributes<HTMLDivElement>` we need to omit them.
|
12 | */
|
13 | 'children' | 'onChange' | 'onKeyUp' | 'onKeyDown' | 'onBlur' | 'onFocus' | 'defaultValue'
|
14 | > {
|
15 | 'aria-describedby'?: string;
|
16 | /**
|
17 | * This prop helps users to fill forms faster, especially on mobile devices.
|
18 | * The name can be confusing, as it's more like an autofill.
|
19 | * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
|
20 | */
|
21 | autoComplete?: string;
|
22 | /**
|
23 | * If `true`, the `input` element will be focused during the first mount.
|
24 | */
|
25 | autoFocus?: boolean;
|
26 | /**
|
27 | * The color of the component. It supports those theme colors that make sense for this component.
|
28 | */
|
29 | color?: 'primary' | 'secondary';
|
30 | /**
|
31 | * The default `input` element value. Use when the component is not controlled.
|
32 | */
|
33 | defaultValue?: unknown;
|
34 | /**
|
35 | * If `true`, the `input` element will be disabled.
|
36 | */
|
37 | disabled?: boolean;
|
38 | /**
|
39 | * End `InputAdornment` for this component.
|
40 | */
|
41 | endAdornment?: React.ReactNode;
|
42 | /**
|
43 | * If `true`, the input will indicate an error. This is normally obtained via context from
|
44 | * FormControl.
|
45 | */
|
46 | error?: boolean;
|
47 | /**
|
48 | * If `true`, the input will take up the full width of its container.
|
49 | */
|
50 | fullWidth?: boolean;
|
51 | /**
|
52 | * The id of the `input` element.
|
53 | */
|
54 | id?: string;
|
55 | /**
|
56 | * The component used for the `input` element.
|
57 | * Either a string to use a HTML element or a component.
|
58 | */
|
59 | inputComponent?: React.ElementType<InputBaseComponentProps>;
|
60 | /**
|
61 | * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
62 | */
|
63 | inputProps?: InputBaseComponentProps;
|
64 | /**
|
65 | * Pass a ref to the `input` element.
|
66 | */
|
67 | inputRef?: React.Ref<any>;
|
68 | /**
|
69 | * If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
70 | * FormControl.
|
71 | */
|
72 | margin?: 'dense' | 'none';
|
73 | /**
|
74 | * If `true`, a textarea element will be rendered.
|
75 | */
|
76 | multiline?: boolean;
|
77 | /**
|
78 | * Name attribute of the `input` element.
|
79 | */
|
80 | name?: string;
|
81 | /**
|
82 | * Callback fired when the input is blurred.
|
83 | *
|
84 | * Notice that the first argument (event) might be undefined.
|
85 | */
|
86 | onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
87 | /**
|
88 | * Callback fired when the value is changed.
|
89 | *
|
90 | * @param {object} event The event source of the callback.
|
91 | * You can pull out the new value by accessing `event.target.value` (string).
|
92 | */
|
93 | onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
|
94 | onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
95 | onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
|
96 | onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
|
97 | /**
|
98 | * The short hint displayed in the input before the user enters a value.
|
99 | */
|
100 | placeholder?: string;
|
101 | /**
|
102 | * It prevents the user from changing the value of the field
|
103 | * (not from interacting with the field).
|
104 | */
|
105 | readOnly?: boolean;
|
106 | /**
|
107 | * If `true`, the `input` element will be required.
|
108 | */
|
109 | required?: boolean;
|
110 | renderSuffix?: (state: {
|
111 | disabled?: boolean;
|
112 | error?: boolean;
|
113 | filled?: boolean;
|
114 | focused?: boolean;
|
115 | margin?: 'dense' | 'none' | 'normal';
|
116 | required?: boolean;
|
117 | startAdornment?: React.ReactNode;
|
118 | }) => React.ReactNode;
|
119 | /**
|
120 | * Number of rows to display when multiline option is set to true.
|
121 | */
|
122 | rows?: string | number;
|
123 | /**
|
124 | * Maximum number of rows to display when multiline option is set to true.
|
125 | */
|
126 | rowsMax?: string | number;
|
127 | /**
|
128 | * Minimum number of rows to display when multiline option is set to true.
|
129 | */
|
130 | rowsMin?: string | number;
|
131 | /**
|
132 | * Start `InputAdornment` for this component.
|
133 | */
|
134 | startAdornment?: React.ReactNode;
|
135 | /**
|
136 | * 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).
|
137 | */
|
138 | type?: string;
|
139 | /**
|
140 | * The value of the `input` element, required for a controlled component.
|
141 | */
|
142 | value?: unknown;
|
143 | }
|
144 |
|
145 | export interface InputBaseComponentProps
|
146 | extends React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
|
147 | // Accommodate arbitrary additional props coming from the `inputProps` prop
|
148 | [arbitrary: string]: any;
|
149 | }
|
150 |
|
151 | export type InputBaseClassKey =
|
152 | | 'root'
|
153 | | 'formControl'
|
154 | | 'focused'
|
155 | | 'disabled'
|
156 | | 'adornedEnd'
|
157 | | 'adornedStart'
|
158 | | 'error'
|
159 | | 'marginDense'
|
160 | | 'multiline'
|
161 | | 'fullWidth'
|
162 | | 'colorSecondary'
|
163 | | 'input'
|
164 | | 'inputMarginDense'
|
165 | | 'inputMultiline'
|
166 | | 'inputTypeSearch'
|
167 | | 'inputAdornedStart'
|
168 | | 'inputAdornedEnd'
|
169 | | 'inputHiddenLabel';
|
170 |
|
171 | /**
|
172 | * `InputBase` contains as few styles as possible.
|
173 | * It aims to be a simple building block for creating an input.
|
174 | * It contains a load of style reset and some state logic.
|
175 | * Demos:
|
176 | *
|
177 | * - [Text Fields](https://material-ui.com/components/text-fields/)
|
178 | *
|
179 | * API:
|
180 | *
|
181 | * - [InputBase API](https://material-ui.com/api/input-base/)
|
182 | */
|
183 | export default function InputBase(props: InputBaseProps): JSX.Element;
|