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