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 | const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
|
13 | return {
|
14 |
|
15 | root: {
|
16 | position: 'relative',
|
17 | backgroundColor,
|
18 | borderTopLeftRadius: theme.shape.borderRadius,
|
19 | borderTopRightRadius: theme.shape.borderRadius,
|
20 | transition: theme.transitions.create('background-color', {
|
21 | duration: theme.transitions.duration.shorter,
|
22 | easing: theme.transitions.easing.easeOut
|
23 | }),
|
24 | '&:hover': {
|
25 | backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
|
26 |
|
27 | '@media (hover: none)': {
|
28 | backgroundColor
|
29 | }
|
30 | },
|
31 | '&$focused': {
|
32 | backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)'
|
33 | },
|
34 | '&$disabled': {
|
35 | backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
|
36 | }
|
37 | },
|
38 |
|
39 |
|
40 | colorSecondary: {
|
41 | '&$underline:after': {
|
42 | borderBottomColor: theme.palette.secondary.main
|
43 | }
|
44 | },
|
45 |
|
46 |
|
47 | underline: {
|
48 | '&:after': {
|
49 | borderBottom: `2px solid ${theme.palette.primary.main}`,
|
50 | left: 0,
|
51 | bottom: 0,
|
52 |
|
53 | content: '""',
|
54 | position: 'absolute',
|
55 | right: 0,
|
56 | transform: 'scaleX(0)',
|
57 | transition: theme.transitions.create('transform', {
|
58 | duration: theme.transitions.duration.shorter,
|
59 | easing: theme.transitions.easing.easeOut
|
60 | }),
|
61 | pointerEvents: 'none'
|
62 |
|
63 | },
|
64 | '&$focused:after': {
|
65 | transform: 'scaleX(1)'
|
66 | },
|
67 | '&$error:after': {
|
68 | borderBottomColor: theme.palette.error.main,
|
69 | transform: 'scaleX(1)'
|
70 |
|
71 | },
|
72 | '&:before': {
|
73 | borderBottom: `1px solid ${bottomLineColor}`,
|
74 | left: 0,
|
75 | bottom: 0,
|
76 |
|
77 | content: '"\\00a0"',
|
78 | position: 'absolute',
|
79 | right: 0,
|
80 | transition: theme.transitions.create('border-bottom-color', {
|
81 | duration: theme.transitions.duration.shorter
|
82 | }),
|
83 | pointerEvents: 'none'
|
84 |
|
85 | },
|
86 | '&:hover:before': {
|
87 | borderBottom: `1px solid ${theme.palette.text.primary}`
|
88 | },
|
89 | '&$disabled:before': {
|
90 | borderBottomStyle: 'dotted'
|
91 | }
|
92 | },
|
93 |
|
94 |
|
95 | focused: {},
|
96 |
|
97 |
|
98 | disabled: {},
|
99 |
|
100 |
|
101 | adornedStart: {
|
102 | paddingLeft: 12
|
103 | },
|
104 |
|
105 |
|
106 | adornedEnd: {
|
107 | paddingRight: 12
|
108 | },
|
109 |
|
110 |
|
111 | error: {},
|
112 |
|
113 |
|
114 | marginDense: {},
|
115 |
|
116 |
|
117 | multiline: {
|
118 | padding: '27px 12px 10px',
|
119 | '&$marginDense': {
|
120 | paddingTop: 23,
|
121 | paddingBottom: 6
|
122 | }
|
123 | },
|
124 |
|
125 |
|
126 | input: {
|
127 | padding: '27px 12px 10px',
|
128 | '&:-webkit-autofill': {
|
129 | WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset',
|
130 | WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff',
|
131 | caretColor: theme.palette.type === 'light' ? null : '#fff',
|
132 | borderTopLeftRadius: 'inherit',
|
133 | borderTopRightRadius: 'inherit'
|
134 | }
|
135 | },
|
136 |
|
137 |
|
138 | inputMarginDense: {
|
139 | paddingTop: 23,
|
140 | paddingBottom: 6
|
141 | },
|
142 |
|
143 |
|
144 | inputHiddenLabel: {
|
145 | paddingTop: 18,
|
146 | paddingBottom: 19,
|
147 | '&$inputMarginDense': {
|
148 | paddingTop: 10,
|
149 | paddingBottom: 11
|
150 | }
|
151 | },
|
152 |
|
153 |
|
154 | inputMultiline: {
|
155 | padding: 0
|
156 | },
|
157 |
|
158 |
|
159 | inputAdornedStart: {
|
160 | paddingLeft: 0
|
161 | },
|
162 |
|
163 |
|
164 | inputAdornedEnd: {
|
165 | paddingRight: 0
|
166 | }
|
167 | };
|
168 | };
|
169 | const FilledInput = React.forwardRef(function FilledInput(props, ref) {
|
170 | const {
|
171 | disableUnderline,
|
172 | classes,
|
173 | fullWidth = false,
|
174 | inputComponent = 'input',
|
175 | multiline = false,
|
176 | type = 'text'
|
177 | } = props,
|
178 | other = _objectWithoutPropertiesLoose(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);
|
179 |
|
180 | return React.createElement(InputBase, _extends({
|
181 | classes: _extends({}, classes, {
|
182 | root: clsx(classes.root, !disableUnderline && classes.underline),
|
183 | underline: null
|
184 | }),
|
185 | fullWidth: fullWidth,
|
186 | inputComponent: inputComponent,
|
187 | multiline: multiline,
|
188 | ref: ref,
|
189 | type: type
|
190 | }, other));
|
191 | });
|
192 | process.env.NODE_ENV !== "production" ? FilledInput.propTypes = {
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 | |
199 |
|
200 |
|
201 |
|
202 |
|
203 | autoComplete: PropTypes.string,
|
204 |
|
205 | |
206 |
|
207 |
|
208 | autoFocus: PropTypes.bool,
|
209 |
|
210 | |
211 |
|
212 |
|
213 |
|
214 | classes: PropTypes.object,
|
215 |
|
216 | |
217 |
|
218 |
|
219 | color: PropTypes.oneOf(['primary', 'secondary']),
|
220 |
|
221 | |
222 |
|
223 |
|
224 | defaultValue: PropTypes.any,
|
225 |
|
226 | |
227 |
|
228 |
|
229 | disabled: PropTypes.bool,
|
230 |
|
231 | |
232 |
|
233 |
|
234 | disableUnderline: PropTypes.bool,
|
235 |
|
236 | |
237 |
|
238 |
|
239 | endAdornment: PropTypes.node,
|
240 |
|
241 | |
242 |
|
243 |
|
244 |
|
245 | error: PropTypes.bool,
|
246 |
|
247 | |
248 |
|
249 |
|
250 | fullWidth: PropTypes.bool,
|
251 |
|
252 | |
253 |
|
254 |
|
255 | id: PropTypes.string,
|
256 |
|
257 | |
258 |
|
259 |
|
260 |
|
261 | inputComponent: PropTypes.elementType,
|
262 |
|
263 | |
264 |
|
265 |
|
266 | inputProps: PropTypes.object,
|
267 |
|
268 | |
269 |
|
270 |
|
271 | inputRef: refType,
|
272 |
|
273 | |
274 |
|
275 |
|
276 |
|
277 | margin: PropTypes.oneOf(['dense', 'none']),
|
278 |
|
279 | |
280 |
|
281 |
|
282 | maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
283 |
|
284 | |
285 |
|
286 |
|
287 | multiline: PropTypes.bool,
|
288 |
|
289 | |
290 |
|
291 |
|
292 | name: PropTypes.string,
|
293 |
|
294 | |
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 | onChange: PropTypes.func,
|
301 |
|
302 | |
303 |
|
304 |
|
305 | placeholder: PropTypes.string,
|
306 |
|
307 | |
308 |
|
309 |
|
310 |
|
311 | readOnly: PropTypes.bool,
|
312 |
|
313 | |
314 |
|
315 |
|
316 | required: PropTypes.bool,
|
317 |
|
318 | |
319 |
|
320 |
|
321 | rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
322 |
|
323 | |
324 |
|
325 |
|
326 | startAdornment: PropTypes.node,
|
327 |
|
328 | |
329 |
|
330 |
|
331 | type: PropTypes.string,
|
332 |
|
333 | |
334 |
|
335 |
|
336 | value: PropTypes.any
|
337 | } : void 0;
|
338 | FilledInput.muiName = 'Input';
|
339 | export default withStyles(styles, {
|
340 | name: 'MuiFilledInput'
|
341 | })(FilledInput); |
\ | No newline at end of file |