UNPKG

4.42 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3import * as React from 'react';
4import PropTypes from 'prop-types';
5import clsx from 'clsx';
6import Typography from '../Typography';
7import withStyles from '../styles/withStyles';
8import FormControlContext, { useFormControl } from '../FormControl/FormControlContext';
9export const styles = {
10 /* Styles applied to the root element. */
11 root: {
12 display: 'flex',
13 height: '0.01em',
14 // Fix IE 11 flexbox alignment. To remove at some point.
15 maxHeight: '2em',
16 alignItems: 'center',
17 whiteSpace: 'nowrap'
18 },
19
20 /* Styles applied to the root element if `variant="filled"`. */
21 filled: {
22 '&$positionStart:not($hiddenLabel)': {
23 marginTop: 16
24 }
25 },
26
27 /* Styles applied to the root element if `position="start"`. */
28 positionStart: {
29 marginRight: 8
30 },
31
32 /* Styles applied to the root element if `position="end"`. */
33 positionEnd: {
34 marginLeft: 8
35 },
36
37 /* Styles applied to the root element if `disablePointerEvents=true`. */
38 disablePointerEvents: {
39 pointerEvents: 'none'
40 },
41
42 /* Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
43 hiddenLabel: {},
44
45 /* Styles applied if the adornment is used inside <FormControl margin="dense" />. */
46 marginDense: {}
47};
48const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(props, ref) {
49 const {
50 children,
51 classes,
52 className,
53 component: Component = 'div',
54 disablePointerEvents = false,
55 disableTypography = false,
56 position,
57 variant: variantProp
58 } = props,
59 other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"]);
60
61 const muiFormControl = useFormControl() || {};
62 let variant = variantProp;
63
64 if (variantProp && muiFormControl.variant) {
65 if (process.env.NODE_ENV !== 'production') {
66 if (variantProp === muiFormControl.variant) {
67 console.error('Material-UI: The `InputAdornment` variant infers the variant prop ' + 'you do not have to provide one.');
68 }
69 }
70 }
71
72 if (muiFormControl && !variant) {
73 variant = muiFormControl.variant;
74 }
75
76 return /*#__PURE__*/React.createElement(FormControlContext.Provider, {
77 value: null
78 }, /*#__PURE__*/React.createElement(Component, _extends({
79 className: clsx(classes.root, className, disablePointerEvents && classes.disablePointerEvents, muiFormControl.hiddenLabel && classes.hiddenLabel, variant === 'filled' && classes.filled, {
80 'start': classes.positionStart,
81 'end': classes.positionEnd
82 }[position], muiFormControl.margin === 'dense' && classes.marginDense),
83 ref: ref
84 }, other), typeof children === 'string' && !disableTypography ? /*#__PURE__*/React.createElement(Typography, {
85 color: "textSecondary"
86 }, children) : children));
87});
88process.env.NODE_ENV !== "production" ? InputAdornment.propTypes = {
89 /**
90 * The content of the component, normally an `IconButton` or string.
91 */
92 children: PropTypes.node.isRequired,
93
94 /**
95 * Override or extend the styles applied to the component.
96 * See [CSS API](#css) below for more details.
97 */
98 classes: PropTypes.object.isRequired,
99
100 /**
101 * @ignore
102 */
103 className: PropTypes.string,
104
105 /**
106 * The component used for the root node.
107 * Either a string to use a HTML element or a component.
108 */
109 component: PropTypes
110 /* @typescript-to-proptypes-ignore */
111 .elementType,
112
113 /**
114 * Disable pointer events on the root.
115 * This allows for the content of the adornment to focus the input on click.
116 */
117 disablePointerEvents: PropTypes.bool,
118
119 /**
120 * If children is a string then disable wrapping in a Typography component.
121 */
122 disableTypography: PropTypes.bool,
123
124 /**
125 * @ignore
126 */
127 muiFormControl: PropTypes.object,
128
129 /**
130 * The position this adornment should appear relative to the `Input`.
131 */
132 position: PropTypes.oneOf(['start', 'end']),
133
134 /**
135 * The variant to use.
136 * Note: If you are using the `TextField` component or the `FormControl` component
137 * you do not have to set this manually.
138 */
139 variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
140} : void 0;
141export default withStyles(styles, {
142 name: 'MuiInputAdornment'
143})(InputAdornment);
\No newline at end of file