1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | const _excluded = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import isHostComponent from '../utils/isHostComponent';
|
7 | import { getInputUtilityClass } from './inputClasses';
|
8 | import useInput from '../useInput';
|
9 | import { useSlotProps } from '../utils';
|
10 | import composeClasses from '../composeClasses';
|
11 | import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
|
12 | import { jsx as _jsx } from "react/jsx-runtime";
|
13 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
14 | const useUtilityClasses = ownerState => {
|
15 | const {
|
16 | disabled,
|
17 | error,
|
18 | focused,
|
19 | formControlContext,
|
20 | multiline,
|
21 | startAdornment,
|
22 | endAdornment
|
23 | } = ownerState;
|
24 | const slots = {
|
25 | root: ['root', disabled && 'disabled', error && 'error', focused && 'focused', Boolean(formControlContext) && 'formControl', multiline && 'multiline', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
|
26 | input: ['input', disabled && 'disabled', multiline && 'multiline']
|
27 | };
|
28 | return composeClasses(slots, useClassNamesOverride(getInputUtilityClass));
|
29 | };
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | const Input = React.forwardRef(function Input(props, forwardedRef) {
|
42 | var _slots$root, _slots$textarea, _slots$input;
|
43 | const {
|
44 | 'aria-describedby': ariaDescribedby,
|
45 | 'aria-label': ariaLabel,
|
46 | 'aria-labelledby': ariaLabelledby,
|
47 | autoComplete,
|
48 | autoFocus,
|
49 | className,
|
50 | defaultValue,
|
51 | disabled,
|
52 | endAdornment,
|
53 | error,
|
54 | id,
|
55 | multiline = false,
|
56 | name,
|
57 | onClick,
|
58 | onChange,
|
59 | onKeyDown,
|
60 | onKeyUp,
|
61 | onFocus,
|
62 | onBlur,
|
63 | placeholder,
|
64 | readOnly,
|
65 | required,
|
66 | startAdornment,
|
67 | value,
|
68 | type: typeProp,
|
69 | rows,
|
70 | slotProps = {},
|
71 | slots = {},
|
72 | minRows,
|
73 | maxRows
|
74 | } = props,
|
75 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
76 | const {
|
77 | getRootProps,
|
78 | getInputProps,
|
79 | focused,
|
80 | formControlContext,
|
81 | error: errorState,
|
82 | disabled: disabledState
|
83 | } = useInput({
|
84 | disabled,
|
85 | defaultValue,
|
86 | error,
|
87 | onBlur,
|
88 | onClick,
|
89 | onChange,
|
90 | onFocus,
|
91 | required,
|
92 | value
|
93 | });
|
94 | const type = !multiline ? typeProp != null ? typeProp : 'text' : undefined;
|
95 | const ownerState = _extends({}, props, {
|
96 | disabled: disabledState,
|
97 | error: errorState,
|
98 | focused,
|
99 | formControlContext,
|
100 | multiline,
|
101 | type
|
102 | });
|
103 | const classes = useUtilityClasses(ownerState);
|
104 | const propsToForward = {
|
105 | 'aria-describedby': ariaDescribedby,
|
106 | 'aria-label': ariaLabel,
|
107 | 'aria-labelledby': ariaLabelledby,
|
108 | autoComplete,
|
109 | autoFocus,
|
110 | id,
|
111 | onKeyDown,
|
112 | onKeyUp,
|
113 | name,
|
114 | placeholder,
|
115 | readOnly,
|
116 | type
|
117 | };
|
118 | const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
|
119 | const rootProps = useSlotProps({
|
120 | elementType: Root,
|
121 | getSlotProps: getRootProps,
|
122 | externalSlotProps: slotProps.root,
|
123 | externalForwardedProps: other,
|
124 | additionalProps: {
|
125 | ref: forwardedRef
|
126 | },
|
127 | ownerState,
|
128 | className: [classes.root, className]
|
129 | });
|
130 | const InputComponent = multiline ? (_slots$textarea = slots.textarea) != null ? _slots$textarea : 'textarea' : (_slots$input = slots.input) != null ? _slots$input : 'input';
|
131 | const inputProps = useSlotProps({
|
132 | elementType: InputComponent,
|
133 | getSlotProps: otherHandlers => {
|
134 | return getInputProps(_extends({}, propsToForward, otherHandlers));
|
135 | },
|
136 | externalSlotProps: slotProps.input,
|
137 | additionalProps: _extends({
|
138 | rows: multiline ? rows : undefined
|
139 | }, multiline && !isHostComponent(InputComponent) && {
|
140 | minRows: rows || minRows,
|
141 | maxRows: rows || maxRows
|
142 | }),
|
143 | ownerState,
|
144 | className: classes.input
|
145 | });
|
146 | if (process.env.NODE_ENV !== 'production') {
|
147 | if (multiline) {
|
148 | if (rows) {
|
149 | if (minRows || maxRows) {
|
150 | console.warn('MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
|
151 | }
|
152 | }
|
153 | }
|
154 | }
|
155 | return _jsxs(Root, _extends({}, rootProps, {
|
156 | children: [startAdornment, _jsx(InputComponent, _extends({}, inputProps)), endAdornment]
|
157 | }));
|
158 | });
|
159 | process.env.NODE_ENV !== "production" ? Input.propTypes = {
|
160 |
|
161 |
|
162 |
|
163 |
|
164 | |
165 |
|
166 |
|
167 | 'aria-describedby': PropTypes.string,
|
168 | |
169 |
|
170 |
|
171 | 'aria-label': PropTypes.string,
|
172 | |
173 |
|
174 |
|
175 | 'aria-labelledby': PropTypes.string,
|
176 | |
177 |
|
178 |
|
179 |
|
180 |
|
181 | autoComplete: PropTypes.string,
|
182 | |
183 |
|
184 |
|
185 | autoFocus: PropTypes.bool,
|
186 | |
187 |
|
188 |
|
189 | className: PropTypes.string,
|
190 | |
191 |
|
192 |
|
193 | defaultValue: PropTypes.any,
|
194 | |
195 |
|
196 |
|
197 |
|
198 | disabled: PropTypes.bool,
|
199 | |
200 |
|
201 |
|
202 | endAdornment: PropTypes.node,
|
203 | |
204 |
|
205 |
|
206 |
|
207 | error: PropTypes.bool,
|
208 | |
209 |
|
210 |
|
211 | id: PropTypes.string,
|
212 | |
213 |
|
214 |
|
215 | inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
216 | current: PropTypes.object
|
217 | })]),
|
218 | |
219 |
|
220 |
|
221 | maxRows: PropTypes.number,
|
222 | |
223 |
|
224 |
|
225 | minRows: PropTypes.number,
|
226 | |
227 |
|
228 |
|
229 |
|
230 | multiline: PropTypes.bool,
|
231 | |
232 |
|
233 |
|
234 | name: PropTypes.string,
|
235 | |
236 |
|
237 |
|
238 | onBlur: PropTypes.func,
|
239 | |
240 |
|
241 |
|
242 | onChange: PropTypes.func,
|
243 | |
244 |
|
245 |
|
246 | onClick: PropTypes.func,
|
247 | |
248 |
|
249 |
|
250 | onFocus: PropTypes.func,
|
251 | |
252 |
|
253 |
|
254 | onKeyDown: PropTypes.func,
|
255 | |
256 |
|
257 |
|
258 | onKeyUp: PropTypes.func,
|
259 | |
260 |
|
261 |
|
262 | placeholder: PropTypes.string,
|
263 | |
264 |
|
265 |
|
266 |
|
267 | readOnly: PropTypes.bool,
|
268 | |
269 |
|
270 |
|
271 |
|
272 | required: PropTypes.bool,
|
273 | |
274 |
|
275 |
|
276 | rows: PropTypes.number,
|
277 | |
278 |
|
279 |
|
280 |
|
281 | slotProps: PropTypes.shape({
|
282 | input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
283 | root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
284 | }),
|
285 | |
286 |
|
287 |
|
288 |
|
289 |
|
290 | slots: PropTypes.shape({
|
291 | input: PropTypes.elementType,
|
292 | root: PropTypes.elementType,
|
293 | textarea: PropTypes.elementType
|
294 | }),
|
295 | |
296 |
|
297 |
|
298 | startAdornment: PropTypes.node,
|
299 | |
300 |
|
301 |
|
302 |
|
303 | type: PropTypes .oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']),
|
304 | |
305 |
|
306 |
|
307 | value: PropTypes.any
|
308 | } : void 0;
|
309 | export default Input; |
\ | No newline at end of file |