1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.default = exports.styles = void 0;
|
11 |
|
12 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
13 |
|
14 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
15 |
|
16 | var _utils = require("@material-ui/utils");
|
17 |
|
18 | var React = _interopRequireWildcard(require("react"));
|
19 |
|
20 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
21 |
|
22 | var _clsx = _interopRequireDefault(require("clsx"));
|
23 |
|
24 | var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
|
25 |
|
26 | var _FormControlContext = _interopRequireWildcard(require("../FormControl/FormControlContext"));
|
27 |
|
28 | var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
29 |
|
30 | var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
31 |
|
32 | var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
|
33 |
|
34 | var _TextareaAutosize = _interopRequireDefault(require("../TextareaAutosize"));
|
35 |
|
36 | var _utils2 = require("./utils");
|
37 |
|
38 |
|
39 | var styles = function styles(theme) {
|
40 | var light = theme.palette.type === 'light';
|
41 | var placeholder = {
|
42 | color: 'currentColor',
|
43 | opacity: light ? 0.42 : 0.5,
|
44 | transition: theme.transitions.create('opacity', {
|
45 | duration: theme.transitions.duration.shorter
|
46 | })
|
47 | };
|
48 | var placeholderHidden = {
|
49 | opacity: '0 !important'
|
50 | };
|
51 | var placeholderVisible = {
|
52 | opacity: light ? 0.42 : 0.5
|
53 | };
|
54 | return {
|
55 | '@global': {
|
56 | '@keyframes mui-auto-fill': {},
|
57 | '@keyframes mui-auto-fill-cancel': {}
|
58 | },
|
59 |
|
60 |
|
61 | root: (0, _extends2.default)({}, theme.typography.body1, {
|
62 | color: theme.palette.text.primary,
|
63 | lineHeight: '1.1876em',
|
64 |
|
65 | boxSizing: 'border-box',
|
66 |
|
67 | position: 'relative',
|
68 | cursor: 'text',
|
69 | display: 'inline-flex',
|
70 | alignItems: 'center',
|
71 | '&$disabled': {
|
72 | color: theme.palette.text.disabled,
|
73 | cursor: 'default'
|
74 | }
|
75 | }),
|
76 |
|
77 |
|
78 | formControl: {},
|
79 |
|
80 |
|
81 | focused: {},
|
82 |
|
83 |
|
84 | disabled: {},
|
85 |
|
86 |
|
87 | adornedStart: {},
|
88 |
|
89 |
|
90 | adornedEnd: {},
|
91 |
|
92 |
|
93 | error: {},
|
94 |
|
95 |
|
96 | marginDense: {},
|
97 |
|
98 |
|
99 | multiline: {
|
100 | padding: "".concat(8 - 2, "px 0 ").concat(8 - 1, "px"),
|
101 | '&$marginDense': {
|
102 | paddingTop: 4 - 1
|
103 | }
|
104 | },
|
105 |
|
106 |
|
107 | colorSecondary: {},
|
108 |
|
109 |
|
110 | fullWidth: {
|
111 | width: '100%'
|
112 | },
|
113 |
|
114 |
|
115 | input: {
|
116 | font: 'inherit',
|
117 | letterSpacing: 'inherit',
|
118 | color: 'currentColor',
|
119 | padding: "".concat(8 - 2, "px 0 ").concat(8 - 1, "px"),
|
120 | border: 0,
|
121 | boxSizing: 'content-box',
|
122 | background: 'none',
|
123 | height: '1.1876em',
|
124 |
|
125 | margin: 0,
|
126 |
|
127 | WebkitTapHighlightColor: 'transparent',
|
128 | display: 'block',
|
129 |
|
130 | minWidth: 0,
|
131 | width: '100%',
|
132 |
|
133 | animationName: 'mui-auto-fill-cancel',
|
134 | animationDuration: '10ms',
|
135 | '&::-webkit-input-placeholder': placeholder,
|
136 | '&::-moz-placeholder': placeholder,
|
137 |
|
138 | '&:-ms-input-placeholder': placeholder,
|
139 |
|
140 | '&::-ms-input-placeholder': placeholder,
|
141 |
|
142 | '&:focus': {
|
143 | outline: 0
|
144 | },
|
145 |
|
146 | '&:invalid': {
|
147 | boxShadow: 'none'
|
148 | },
|
149 | '&::-webkit-search-decoration': {
|
150 |
|
151 | '-webkit-appearance': 'none'
|
152 | },
|
153 |
|
154 | 'label[data-shrink=false] + $formControl &': {
|
155 | '&::-webkit-input-placeholder': placeholderHidden,
|
156 | '&::-moz-placeholder': placeholderHidden,
|
157 |
|
158 | '&:-ms-input-placeholder': placeholderHidden,
|
159 |
|
160 | '&::-ms-input-placeholder': placeholderHidden,
|
161 |
|
162 | '&:focus::-webkit-input-placeholder': placeholderVisible,
|
163 | '&:focus::-moz-placeholder': placeholderVisible,
|
164 |
|
165 | '&:focus:-ms-input-placeholder': placeholderVisible,
|
166 |
|
167 | '&:focus::-ms-input-placeholder': placeholderVisible
|
168 |
|
169 | },
|
170 | '&$disabled': {
|
171 | opacity: 1
|
172 |
|
173 | },
|
174 | '&:-webkit-autofill': {
|
175 | animationDuration: '5000s',
|
176 | animationName: 'mui-auto-fill'
|
177 | }
|
178 | },
|
179 |
|
180 |
|
181 | inputMarginDense: {
|
182 | paddingTop: 4 - 1
|
183 | },
|
184 |
|
185 |
|
186 | inputMultiline: {
|
187 | height: 'auto',
|
188 | resize: 'none',
|
189 | padding: 0
|
190 | },
|
191 |
|
192 |
|
193 | inputTypeSearch: {
|
194 |
|
195 | '-moz-appearance': 'textfield',
|
196 | '-webkit-appearance': 'textfield'
|
197 | },
|
198 |
|
199 |
|
200 | inputAdornedStart: {},
|
201 |
|
202 |
|
203 | inputAdornedEnd: {},
|
204 |
|
205 |
|
206 | inputHiddenLabel: {}
|
207 | };
|
208 | };
|
209 |
|
210 | exports.styles = styles;
|
211 | var useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
|
212 |
|
213 |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 | var InputBase = React.forwardRef(function InputBase(props, ref) {
|
219 | var ariaDescribedby = props['aria-describedby'],
|
220 | autoComplete = props.autoComplete,
|
221 | autoFocus = props.autoFocus,
|
222 | classes = props.classes,
|
223 | className = props.className,
|
224 | color = props.color,
|
225 | defaultValue = props.defaultValue,
|
226 | disabled = props.disabled,
|
227 | endAdornment = props.endAdornment,
|
228 | error = props.error,
|
229 | _props$fullWidth = props.fullWidth,
|
230 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
231 | id = props.id,
|
232 | _props$inputComponent = props.inputComponent,
|
233 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
234 | _props$inputProps = props.inputProps,
|
235 | inputPropsProp = _props$inputProps === void 0 ? {} : _props$inputProps,
|
236 | inputRefProp = props.inputRef,
|
237 | margin = props.margin,
|
238 | _props$multiline = props.multiline,
|
239 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
240 | name = props.name,
|
241 | onBlur = props.onBlur,
|
242 | onChange = props.onChange,
|
243 | onClick = props.onClick,
|
244 | onFocus = props.onFocus,
|
245 | onKeyDown = props.onKeyDown,
|
246 | onKeyUp = props.onKeyUp,
|
247 | placeholder = props.placeholder,
|
248 | readOnly = props.readOnly,
|
249 | renderSuffix = props.renderSuffix,
|
250 | rows = props.rows,
|
251 | rowsMax = props.rowsMax,
|
252 | rowsMin = props.rowsMin,
|
253 | startAdornment = props.startAdornment,
|
254 | _props$type = props.type,
|
255 | type = _props$type === void 0 ? 'text' : _props$type,
|
256 | valueProp = props.value,
|
257 | other = (0, _objectWithoutProperties2.default)(props, ["aria-describedby", "autoComplete", "autoFocus", "classes", "className", "color", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "rowsMax", "rowsMin", "startAdornment", "type", "value"]);
|
258 | var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
|
259 |
|
260 | var _React$useRef = React.useRef(value != null),
|
261 | isControlled = _React$useRef.current;
|
262 |
|
263 | var inputRef = React.useRef();
|
264 | var handleInputRefWarning = React.useCallback(function (instance) {
|
265 | if (process.env.NODE_ENV !== 'production') {
|
266 | if (instance && instance.nodeName !== 'INPUT' && !instance.focus) {
|
267 | console.error(['Material-UI: You have provided a `inputComponent` to the input component', 'that does not correctly handle the `inputRef` prop.', 'Make sure the `inputRef` prop is called with a HTMLInputElement.'].join('\n'));
|
268 | }
|
269 | }
|
270 | }, []);
|
271 | var handleInputPropsRefProp = (0, _useForkRef.default)(inputPropsProp.ref, handleInputRefWarning);
|
272 | var handleInputRefProp = (0, _useForkRef.default)(inputRefProp, handleInputPropsRefProp);
|
273 | var handleInputRef = (0, _useForkRef.default)(inputRef, handleInputRefProp);
|
274 |
|
275 | var _React$useState = React.useState(false),
|
276 | focused = _React$useState[0],
|
277 | setFocused = _React$useState[1];
|
278 |
|
279 | var muiFormControl = (0, _FormControlContext.useFormControl)();
|
280 |
|
281 | if (process.env.NODE_ENV !== 'production') {
|
282 |
|
283 | React.useEffect(function () {
|
284 | if (muiFormControl) {
|
285 | return muiFormControl.registerEffect();
|
286 | }
|
287 |
|
288 | return undefined;
|
289 | }, [muiFormControl]);
|
290 | }
|
291 |
|
292 | var fcs = (0, _formControlState.default)({
|
293 | props: props,
|
294 | muiFormControl: muiFormControl,
|
295 | states: ['color', 'disabled', 'error', 'hiddenLabel', 'margin', 'required', 'filled']
|
296 | });
|
297 | fcs.focused = muiFormControl ? muiFormControl.focused : focused;
|
298 |
|
299 |
|
300 | React.useEffect(function () {
|
301 | if (!muiFormControl && disabled && focused) {
|
302 | setFocused(false);
|
303 |
|
304 | if (onBlur) {
|
305 | onBlur();
|
306 | }
|
307 | }
|
308 | }, [muiFormControl, disabled, focused, onBlur]);
|
309 | var onFilled = muiFormControl && muiFormControl.onFilled;
|
310 | var onEmpty = muiFormControl && muiFormControl.onEmpty;
|
311 | var checkDirty = React.useCallback(function (obj) {
|
312 | if ((0, _utils2.isFilled)(obj)) {
|
313 | if (onFilled) {
|
314 | onFilled();
|
315 | }
|
316 | } else if (onEmpty) {
|
317 | onEmpty();
|
318 | }
|
319 | }, [onFilled, onEmpty]);
|
320 | useEnhancedEffect(function () {
|
321 | if (isControlled) {
|
322 | checkDirty({
|
323 | value: value
|
324 | });
|
325 | }
|
326 | }, [value, checkDirty, isControlled]);
|
327 |
|
328 | var handleFocus = function handleFocus(event) {
|
329 |
|
330 |
|
331 | if (fcs.disabled) {
|
332 | event.stopPropagation();
|
333 | return;
|
334 | }
|
335 |
|
336 | if (onFocus) {
|
337 | onFocus(event);
|
338 | }
|
339 |
|
340 | if (inputPropsProp.onFocus) {
|
341 | inputPropsProp.onFocus(event);
|
342 | }
|
343 |
|
344 | if (muiFormControl && muiFormControl.onFocus) {
|
345 | muiFormControl.onFocus(event);
|
346 | } else {
|
347 | setFocused(true);
|
348 | }
|
349 | };
|
350 |
|
351 | var handleBlur = function handleBlur(event) {
|
352 | if (onBlur) {
|
353 | onBlur(event);
|
354 | }
|
355 |
|
356 | if (inputPropsProp.onBlur) {
|
357 | inputPropsProp.onBlur(event);
|
358 | }
|
359 |
|
360 | if (muiFormControl && muiFormControl.onBlur) {
|
361 | muiFormControl.onBlur(event);
|
362 | } else {
|
363 | setFocused(false);
|
364 | }
|
365 | };
|
366 |
|
367 | var handleChange = function handleChange(event) {
|
368 | if (!isControlled) {
|
369 | var element = event.target || inputRef.current;
|
370 |
|
371 | if (element == null) {
|
372 | throw new Error(process.env.NODE_ENV !== "production" ? "Material-UI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://material-ui.com/r/input-component-ref-interface for more info." : (0, _utils.formatMuiErrorMessage)(1));
|
373 | }
|
374 |
|
375 | checkDirty({
|
376 | value: element.value
|
377 | });
|
378 | }
|
379 |
|
380 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
381 | args[_key - 1] = arguments[_key];
|
382 | }
|
383 |
|
384 | if (inputPropsProp.onChange) {
|
385 | inputPropsProp.onChange.apply(inputPropsProp, [event].concat(args));
|
386 | }
|
387 |
|
388 |
|
389 | if (onChange) {
|
390 | onChange.apply(void 0, [event].concat(args));
|
391 | }
|
392 | };
|
393 |
|
394 |
|
395 |
|
396 | React.useEffect(function () {
|
397 | checkDirty(inputRef.current);
|
398 | }, []);
|
399 |
|
400 | var handleClick = function handleClick(event) {
|
401 | if (inputRef.current && event.currentTarget === event.target) {
|
402 | inputRef.current.focus();
|
403 | }
|
404 |
|
405 | if (onClick) {
|
406 | onClick(event);
|
407 | }
|
408 | };
|
409 |
|
410 | var InputComponent = inputComponent;
|
411 | var inputProps = (0, _extends2.default)({}, inputPropsProp, {
|
412 | ref: handleInputRef
|
413 | });
|
414 |
|
415 | if (typeof InputComponent !== 'string') {
|
416 | inputProps = (0, _extends2.default)({
|
417 |
|
418 |
|
419 | inputRef: handleInputRef,
|
420 | type: type
|
421 | }, inputProps, {
|
422 | ref: null
|
423 | });
|
424 | } else if (multiline) {
|
425 | if (rows && !rowsMax && !rowsMin) {
|
426 | InputComponent = 'textarea';
|
427 | } else {
|
428 | inputProps = (0, _extends2.default)({
|
429 | rows: rows,
|
430 | rowsMax: rowsMax
|
431 | }, inputProps);
|
432 | InputComponent = _TextareaAutosize.default;
|
433 | }
|
434 | } else {
|
435 | inputProps = (0, _extends2.default)({
|
436 | type: type
|
437 | }, inputProps);
|
438 | }
|
439 |
|
440 | var handleAutoFill = function handleAutoFill(event) {
|
441 |
|
442 | checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
|
443 | value: 'x'
|
444 | });
|
445 | };
|
446 |
|
447 | React.useEffect(function () {
|
448 | if (muiFormControl) {
|
449 | muiFormControl.setAdornedStart(Boolean(startAdornment));
|
450 | }
|
451 | }, [muiFormControl, startAdornment]);
|
452 | return React.createElement("div", (0, _extends2.default)({
|
453 | className: (0, _clsx.default)(classes.root, classes["color".concat((0, _capitalize.default)(fcs.color || 'primary'))], className, fcs.disabled && classes.disabled, fcs.error && classes.error, fullWidth && classes.fullWidth, fcs.focused && classes.focused, muiFormControl && classes.formControl, multiline && classes.multiline, startAdornment && classes.adornedStart, endAdornment && classes.adornedEnd, fcs.margin === 'dense' && classes.marginDense),
|
454 | onClick: handleClick,
|
455 | ref: ref
|
456 | }, other), startAdornment, React.createElement(_FormControlContext.default.Provider, {
|
457 | value: null
|
458 | }, React.createElement(InputComponent, (0, _extends2.default)({
|
459 | "aria-invalid": fcs.error,
|
460 | "aria-describedby": ariaDescribedby,
|
461 | autoComplete: autoComplete,
|
462 | autoFocus: autoFocus,
|
463 | defaultValue: defaultValue,
|
464 | disabled: fcs.disabled,
|
465 | id: id,
|
466 | onAnimationStart: handleAutoFill,
|
467 | name: name,
|
468 | placeholder: placeholder,
|
469 | readOnly: readOnly,
|
470 | required: fcs.required,
|
471 | rows: rows,
|
472 | value: value,
|
473 | onKeyDown: onKeyDown,
|
474 | onKeyUp: onKeyUp
|
475 | }, inputProps, {
|
476 | className: (0, _clsx.default)(classes.input, inputPropsProp.className, fcs.disabled && classes.disabled, multiline && classes.inputMultiline, fcs.hiddenLabel && classes.inputHiddenLabel, startAdornment && classes.inputAdornedStart, endAdornment && classes.inputAdornedEnd, type === 'search' && classes.inputTypeSearch, fcs.margin === 'dense' && classes.inputMarginDense),
|
477 | onBlur: handleBlur,
|
478 | onChange: handleChange,
|
479 | onFocus: handleFocus
|
480 | }))), endAdornment, renderSuffix ? renderSuffix((0, _extends2.default)({}, fcs, {
|
481 | startAdornment: startAdornment
|
482 | })) : null);
|
483 | });
|
484 | process.env.NODE_ENV !== "production" ? InputBase.propTypes = {
|
485 |
|
486 |
|
487 |
|
488 |
|
489 |
|
490 | |
491 |
|
492 |
|
493 | 'aria-describedby': _propTypes.default.string,
|
494 |
|
495 | |
496 |
|
497 |
|
498 |
|
499 |
|
500 | autoComplete: _propTypes.default.string,
|
501 |
|
502 | |
503 |
|
504 |
|
505 | autoFocus: _propTypes.default.bool,
|
506 |
|
507 | |
508 |
|
509 |
|
510 |
|
511 | classes: _propTypes.default.object,
|
512 |
|
513 | |
514 |
|
515 |
|
516 | className: _propTypes.default.string,
|
517 |
|
518 | |
519 |
|
520 |
|
521 | color: _propTypes.default.oneOf(['primary', 'secondary']),
|
522 |
|
523 | |
524 |
|
525 |
|
526 | defaultValue: _propTypes.default.any,
|
527 |
|
528 | |
529 |
|
530 |
|
531 | disabled: _propTypes.default.bool,
|
532 |
|
533 | |
534 |
|
535 |
|
536 | endAdornment: _propTypes.default.node,
|
537 |
|
538 | |
539 |
|
540 |
|
541 |
|
542 | error: _propTypes.default.bool,
|
543 |
|
544 | |
545 |
|
546 |
|
547 | fullWidth: _propTypes.default.bool,
|
548 |
|
549 | |
550 |
|
551 |
|
552 | id: _propTypes.default.string,
|
553 |
|
554 | |
555 |
|
556 |
|
557 |
|
558 | inputComponent: _propTypes.default.elementType,
|
559 |
|
560 | |
561 |
|
562 |
|
563 | inputProps: _propTypes.default.object,
|
564 |
|
565 | |
566 |
|
567 |
|
568 | inputRef: _utils.refType,
|
569 |
|
570 | |
571 |
|
572 |
|
573 |
|
574 | margin: _propTypes.default.oneOf(['dense', 'none']),
|
575 |
|
576 | |
577 |
|
578 |
|
579 | multiline: _propTypes.default.bool,
|
580 |
|
581 | |
582 |
|
583 |
|
584 | name: _propTypes.default.string,
|
585 |
|
586 | |
587 |
|
588 |
|
589 |
|
590 |
|
591 | onBlur: _propTypes.default.func,
|
592 |
|
593 | |
594 |
|
595 |
|
596 |
|
597 |
|
598 |
|
599 | onChange: _propTypes.default.func,
|
600 |
|
601 | |
602 |
|
603 |
|
604 | onClick: _propTypes.default.func,
|
605 |
|
606 | |
607 |
|
608 |
|
609 | onFocus: _propTypes.default.func,
|
610 |
|
611 | |
612 |
|
613 |
|
614 | onKeyDown: _propTypes.default.func,
|
615 |
|
616 | |
617 |
|
618 |
|
619 | onKeyUp: _propTypes.default.func,
|
620 |
|
621 | |
622 |
|
623 |
|
624 | placeholder: _propTypes.default.string,
|
625 |
|
626 | |
627 |
|
628 |
|
629 |
|
630 | readOnly: _propTypes.default.bool,
|
631 |
|
632 | |
633 |
|
634 |
|
635 | renderSuffix: _propTypes.default.func,
|
636 |
|
637 | |
638 |
|
639 |
|
640 | required: _propTypes.default.bool,
|
641 |
|
642 | |
643 |
|
644 |
|
645 | rows: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
646 |
|
647 | |
648 |
|
649 |
|
650 | rowsMax: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
651 |
|
652 | |
653 |
|
654 |
|
655 | rowsMin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
656 |
|
657 | |
658 |
|
659 |
|
660 | startAdornment: _propTypes.default.node,
|
661 |
|
662 | |
663 |
|
664 |
|
665 | type: _propTypes.default.string,
|
666 |
|
667 | |
668 |
|
669 |
|
670 | value: _propTypes.default.any
|
671 | } : void 0;
|
672 |
|
673 | var _default = (0, _withStyles.default)(styles, {
|
674 | name: 'MuiInputBase'
|
675 | })(InputBase);
|
676 |
|
677 | exports.default = _default; |
\ | No newline at end of file |