1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import { refType } from '@material-ui/utils';
|
7 | import InputBase from '../InputBase';
|
8 | import withStyles from '../styles/withStyles';
|
9 | export const styles = theme => {
|
10 | const light = theme.palette.type === 'light';
|
11 | const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
|
12 | return {
|
13 | /* Styles applied to the root element. */
|
14 | root: {
|
15 | position: 'relative'
|
16 | },
|
17 |
|
18 | /* Styles applied to the root element if the component is a descendant of `FormControl`. */
|
19 | formControl: {
|
20 | 'label + &': {
|
21 | marginTop: 16
|
22 | }
|
23 | },
|
24 |
|
25 | /* Styles applied to the root element if the component is focused. */
|
26 | focused: {},
|
27 |
|
28 | /* Styles applied to the root element if `disabled={true}`. */
|
29 | disabled: {},
|
30 |
|
31 | /* Styles applied to the root element if color secondary. */
|
32 | colorSecondary: {
|
33 | '&$underline:after': {
|
34 | borderBottomColor: theme.palette.secondary.main
|
35 | }
|
36 | },
|
37 |
|
38 | /* Styles applied to the root element if `disableUnderline={false}`. */
|
39 | underline: {
|
40 | '&:after': {
|
41 | borderBottom: `2px solid ${theme.palette.primary.main}`,
|
42 | left: 0,
|
43 | bottom: 0,
|
44 | // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
|
45 | content: '""',
|
46 | position: 'absolute',
|
47 | right: 0,
|
48 | transform: 'scaleX(0)',
|
49 | transition: theme.transitions.create('transform', {
|
50 | duration: theme.transitions.duration.shorter,
|
51 | easing: theme.transitions.easing.easeOut
|
52 | }),
|
53 | pointerEvents: 'none' // Transparent to the hover style.
|
54 |
|
55 | },
|
56 | '&$focused:after': {
|
57 | transform: 'scaleX(1)'
|
58 | },
|
59 | '&$error:after': {
|
60 | borderBottomColor: theme.palette.error.main,
|
61 | transform: 'scaleX(1)' // error is always underlined in red
|
62 |
|
63 | },
|
64 | '&:before': {
|
65 | borderBottom: `1px solid ${bottomLineColor}`,
|
66 | left: 0,
|
67 | bottom: 0,
|
68 | // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
|
69 | content: '"\\00a0"',
|
70 | position: 'absolute',
|
71 | right: 0,
|
72 | transition: theme.transitions.create('border-bottom-color', {
|
73 | duration: theme.transitions.duration.shorter
|
74 | }),
|
75 | pointerEvents: 'none' // Transparent to the hover style.
|
76 |
|
77 | },
|
78 | '&:hover:not($disabled):before': {
|
79 | borderBottom: `2px solid ${theme.palette.text.primary}`,
|
80 | // Reset on touch devices, it doesn't add specificity
|
81 | '@media (hover: none)': {
|
82 | borderBottom: `1px solid ${bottomLineColor}`
|
83 | }
|
84 | },
|
85 | '&$disabled:before': {
|
86 | borderBottomStyle: 'dotted'
|
87 | }
|
88 | },
|
89 |
|
90 | /* Pseudo-class applied to the root element if `error={true}`. */
|
91 | error: {},
|
92 |
|
93 | /* Styles applied to the `input` element if `margin="dense"`. */
|
94 | marginDense: {},
|
95 |
|
96 | /* Styles applied to the root element if `multiline={true}`. */
|
97 | multiline: {},
|
98 |
|
99 | /* Styles applied to the root element if `fullWidth={true}`. */
|
100 | fullWidth: {},
|
101 |
|
102 | /* Styles applied to the `input` element. */
|
103 | input: {},
|
104 |
|
105 | /* Styles applied to the `input` element if `margin="dense"`. */
|
106 | inputMarginDense: {},
|
107 |
|
108 | /* Styles applied to the `input` element if `multiline={true}`. */
|
109 | inputMultiline: {},
|
110 |
|
111 | /* Styles applied to the `input` element if `type="search"`. */
|
112 | inputTypeSearch: {}
|
113 | };
|
114 | };
|
115 | const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
116 | const {
|
117 | disableUnderline,
|
118 | classes,
|
119 | fullWidth = false,
|
120 | inputComponent = 'input',
|
121 | multiline = false,
|
122 | type = 'text'
|
123 | } = props,
|
124 | other = _objectWithoutPropertiesLoose(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);
|
125 |
|
126 | return /*#__PURE__*/React.createElement(InputBase, _extends({
|
127 | classes: _extends({}, classes, {
|
128 | root: clsx(classes.root, !disableUnderline && classes.underline),
|
129 | underline: null
|
130 | }),
|
131 | fullWidth: fullWidth,
|
132 | inputComponent: inputComponent,
|
133 | multiline: multiline,
|
134 | ref: ref,
|
135 | type: type
|
136 | }, other));
|
137 | });
|
138 | process.env.NODE_ENV !== "production" ? Input.propTypes = {
|
139 | // ----------------------------- Warning --------------------------------
|
140 | // | These PropTypes are generated from the TypeScript type definitions |
|
141 | // | To update them edit the d.ts file and run "yarn proptypes" |
|
142 | // ----------------------------------------------------------------------
|
143 |
|
144 | /**
|
145 | * This prop helps users to fill forms faster, especially on mobile devices.
|
146 | * The name can be confusing, as it's more like an autofill.
|
147 | * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
|
148 | */
|
149 | autoComplete: PropTypes.string,
|
150 |
|
151 | /**
|
152 | * If `true`, the `input` element will be focused during the first mount.
|
153 | */
|
154 | autoFocus: PropTypes.bool,
|
155 |
|
156 | /**
|
157 | * Override or extend the styles applied to the component.
|
158 | * See [CSS API](#css) below for more details.
|
159 | */
|
160 | classes: PropTypes.object,
|
161 |
|
162 | /**
|
163 | * The color of the component. It supports those theme colors that make sense for this component.
|
164 | */
|
165 | color: PropTypes.oneOf(['primary', 'secondary']),
|
166 |
|
167 | /**
|
168 | * The default `input` element value. Use when the component is not controlled.
|
169 | */
|
170 | defaultValue: PropTypes.any,
|
171 |
|
172 | /**
|
173 | * If `true`, the `input` element will be disabled.
|
174 | */
|
175 | disabled: PropTypes.bool,
|
176 |
|
177 | /**
|
178 | * If `true`, the input will not have an underline.
|
179 | */
|
180 | disableUnderline: PropTypes.bool,
|
181 |
|
182 | /**
|
183 | * End `InputAdornment` for this component.
|
184 | */
|
185 | endAdornment: PropTypes.node,
|
186 |
|
187 | /**
|
188 | * If `true`, the input will indicate an error. This is normally obtained via context from
|
189 | * FormControl.
|
190 | */
|
191 | error: PropTypes.bool,
|
192 |
|
193 | /**
|
194 | * If `true`, the input will take up the full width of its container.
|
195 | */
|
196 | fullWidth: PropTypes.bool,
|
197 |
|
198 | /**
|
199 | * The id of the `input` element.
|
200 | */
|
201 | id: PropTypes.string,
|
202 |
|
203 | /**
|
204 | * The component used for the `input` element.
|
205 | * Either a string to use a HTML element or a component.
|
206 | */
|
207 | inputComponent: PropTypes.elementType,
|
208 |
|
209 | /**
|
210 | * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
211 | */
|
212 | inputProps: PropTypes.object,
|
213 |
|
214 | /**
|
215 | * Pass a ref to the `input` element.
|
216 | */
|
217 | inputRef: refType,
|
218 |
|
219 | /**
|
220 | * If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
221 | * FormControl.
|
222 | */
|
223 | margin: PropTypes.oneOf(['dense', 'none']),
|
224 |
|
225 | /**
|
226 | * Maximum number of rows to display when multiline option is set to true.
|
227 | */
|
228 | maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
229 |
|
230 | /**
|
231 | * If `true`, a textarea element will be rendered.
|
232 | */
|
233 | multiline: PropTypes.bool,
|
234 |
|
235 | /**
|
236 | * Name attribute of the `input` element.
|
237 | */
|
238 | name: PropTypes.string,
|
239 |
|
240 | /**
|
241 | * Callback fired when the value is changed.
|
242 | *
|
243 | * @param {object} event The event source of the callback.
|
244 | * You can pull out the new value by accessing `event.target.value` (string).
|
245 | */
|
246 | onChange: PropTypes.func,
|
247 |
|
248 | /**
|
249 | * The short hint displayed in the input before the user enters a value.
|
250 | */
|
251 | placeholder: PropTypes.string,
|
252 |
|
253 | /**
|
254 | * It prevents the user from changing the value of the field
|
255 | * (not from interacting with the field).
|
256 | */
|
257 | readOnly: PropTypes.bool,
|
258 |
|
259 | /**
|
260 | * If `true`, the `input` element will be required.
|
261 | */
|
262 | required: PropTypes.bool,
|
263 |
|
264 | /**
|
265 | * Number of rows to display when multiline option is set to true.
|
266 | */
|
267 | rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
268 |
|
269 | /**
|
270 | * Start `InputAdornment` for this component.
|
271 | */
|
272 | startAdornment: PropTypes.node,
|
273 |
|
274 | /**
|
275 | * 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).
|
276 | */
|
277 | type: PropTypes.string,
|
278 |
|
279 | /**
|
280 | * The value of the `input` element, required for a controlled component.
|
281 | */
|
282 | value: PropTypes.any
|
283 | } : void 0;
|
284 | Input.muiName = 'Input';
|
285 | export default withStyles(styles, {
|
286 | name: 'MuiInput'
|
287 | })(Input); |
\ | No newline at end of file |