1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import withStyles from '../styles/withStyles';
|
7 | import { alpha } from '../styles/colorManipulator';
|
8 | import ButtonBase from '../ButtonBase';
|
9 | import capitalize from '../utils/capitalize';
|
10 | export const styles = theme => ({
|
11 |
|
12 | root: _extends({}, theme.typography.button, {
|
13 | boxSizing: 'border-box',
|
14 | minWidth: 64,
|
15 | padding: '6px 16px',
|
16 | borderRadius: theme.shape.borderRadius,
|
17 | color: theme.palette.text.primary,
|
18 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
|
19 | duration: theme.transitions.duration.short
|
20 | }),
|
21 | '&:hover': {
|
22 | textDecoration: 'none',
|
23 | backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
|
24 |
|
25 | '@media (hover: none)': {
|
26 | backgroundColor: 'transparent'
|
27 | },
|
28 | '&$disabled': {
|
29 | backgroundColor: 'transparent'
|
30 | }
|
31 | },
|
32 | '&$disabled': {
|
33 | color: theme.palette.action.disabled
|
34 | }
|
35 | }),
|
36 |
|
37 |
|
38 | label: {
|
39 | width: '100%',
|
40 |
|
41 | display: 'inherit',
|
42 | alignItems: 'inherit',
|
43 | justifyContent: 'inherit'
|
44 | },
|
45 |
|
46 |
|
47 | text: {
|
48 | padding: '6px 8px'
|
49 | },
|
50 |
|
51 |
|
52 | textPrimary: {
|
53 | color: theme.palette.primary.main,
|
54 | '&:hover': {
|
55 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
56 |
|
57 | '@media (hover: none)': {
|
58 | backgroundColor: 'transparent'
|
59 | }
|
60 | }
|
61 | },
|
62 |
|
63 |
|
64 | textSecondary: {
|
65 | color: theme.palette.secondary.main,
|
66 | '&:hover': {
|
67 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
68 |
|
69 | '@media (hover: none)': {
|
70 | backgroundColor: 'transparent'
|
71 | }
|
72 | }
|
73 | },
|
74 |
|
75 |
|
76 | outlined: {
|
77 | padding: '5px 15px',
|
78 | border: `1px solid ${theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
|
79 | '&$disabled': {
|
80 | border: `1px solid ${theme.palette.action.disabledBackground}`
|
81 | }
|
82 | },
|
83 |
|
84 |
|
85 | outlinedPrimary: {
|
86 | color: theme.palette.primary.main,
|
87 | border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,
|
88 | '&:hover': {
|
89 | border: `1px solid ${theme.palette.primary.main}`,
|
90 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
91 |
|
92 | '@media (hover: none)': {
|
93 | backgroundColor: 'transparent'
|
94 | }
|
95 | }
|
96 | },
|
97 |
|
98 |
|
99 | outlinedSecondary: {
|
100 | color: theme.palette.secondary.main,
|
101 | border: `1px solid ${alpha(theme.palette.secondary.main, 0.5)}`,
|
102 | '&:hover': {
|
103 | border: `1px solid ${theme.palette.secondary.main}`,
|
104 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
105 |
|
106 | '@media (hover: none)': {
|
107 | backgroundColor: 'transparent'
|
108 | }
|
109 | },
|
110 | '&$disabled': {
|
111 | border: `1px solid ${theme.palette.action.disabled}`
|
112 | }
|
113 | },
|
114 |
|
115 |
|
116 | contained: {
|
117 | color: theme.palette.getContrastText(theme.palette.grey[300]),
|
118 | backgroundColor: theme.palette.grey[300],
|
119 | boxShadow: theme.shadows[2],
|
120 | '&:hover': {
|
121 | backgroundColor: theme.palette.grey.A100,
|
122 | boxShadow: theme.shadows[4],
|
123 |
|
124 | '@media (hover: none)': {
|
125 | boxShadow: theme.shadows[2],
|
126 | backgroundColor: theme.palette.grey[300]
|
127 | },
|
128 | '&$disabled': {
|
129 | backgroundColor: theme.palette.action.disabledBackground
|
130 | }
|
131 | },
|
132 | '&$focusVisible': {
|
133 | boxShadow: theme.shadows[6]
|
134 | },
|
135 | '&:active': {
|
136 | boxShadow: theme.shadows[8]
|
137 | },
|
138 | '&$disabled': {
|
139 | color: theme.palette.action.disabled,
|
140 | boxShadow: theme.shadows[0],
|
141 | backgroundColor: theme.palette.action.disabledBackground
|
142 | }
|
143 | },
|
144 |
|
145 |
|
146 | containedPrimary: {
|
147 | color: theme.palette.primary.contrastText,
|
148 | backgroundColor: theme.palette.primary.main,
|
149 | '&:hover': {
|
150 | backgroundColor: theme.palette.primary.dark,
|
151 |
|
152 | '@media (hover: none)': {
|
153 | backgroundColor: theme.palette.primary.main
|
154 | }
|
155 | }
|
156 | },
|
157 |
|
158 |
|
159 | containedSecondary: {
|
160 | color: theme.palette.secondary.contrastText,
|
161 | backgroundColor: theme.palette.secondary.main,
|
162 | '&:hover': {
|
163 | backgroundColor: theme.palette.secondary.dark,
|
164 |
|
165 | '@media (hover: none)': {
|
166 | backgroundColor: theme.palette.secondary.main
|
167 | }
|
168 | }
|
169 | },
|
170 |
|
171 |
|
172 | disableElevation: {
|
173 | boxShadow: 'none',
|
174 | '&:hover': {
|
175 | boxShadow: 'none'
|
176 | },
|
177 | '&$focusVisible': {
|
178 | boxShadow: 'none'
|
179 | },
|
180 | '&:active': {
|
181 | boxShadow: 'none'
|
182 | },
|
183 | '&$disabled': {
|
184 | boxShadow: 'none'
|
185 | }
|
186 | },
|
187 |
|
188 |
|
189 | focusVisible: {},
|
190 |
|
191 |
|
192 | disabled: {},
|
193 |
|
194 |
|
195 | colorInherit: {
|
196 | color: 'inherit',
|
197 | borderColor: 'currentColor'
|
198 | },
|
199 |
|
200 |
|
201 | textSizeSmall: {
|
202 | padding: '4px 5px',
|
203 | fontSize: theme.typography.pxToRem(13)
|
204 | },
|
205 |
|
206 |
|
207 | textSizeLarge: {
|
208 | padding: '8px 11px',
|
209 | fontSize: theme.typography.pxToRem(15)
|
210 | },
|
211 |
|
212 |
|
213 | outlinedSizeSmall: {
|
214 | padding: '3px 9px',
|
215 | fontSize: theme.typography.pxToRem(13)
|
216 | },
|
217 |
|
218 |
|
219 | outlinedSizeLarge: {
|
220 | padding: '7px 21px',
|
221 | fontSize: theme.typography.pxToRem(15)
|
222 | },
|
223 |
|
224 |
|
225 | containedSizeSmall: {
|
226 | padding: '4px 10px',
|
227 | fontSize: theme.typography.pxToRem(13)
|
228 | },
|
229 |
|
230 |
|
231 | containedSizeLarge: {
|
232 | padding: '8px 22px',
|
233 | fontSize: theme.typography.pxToRem(15)
|
234 | },
|
235 |
|
236 |
|
237 | sizeSmall: {},
|
238 |
|
239 |
|
240 | sizeLarge: {},
|
241 |
|
242 |
|
243 | fullWidth: {
|
244 | width: '100%'
|
245 | },
|
246 |
|
247 |
|
248 | startIcon: {
|
249 | display: 'inherit',
|
250 | marginRight: 8,
|
251 | marginLeft: -4,
|
252 | '&$iconSizeSmall': {
|
253 | marginLeft: -2
|
254 | }
|
255 | },
|
256 |
|
257 |
|
258 | endIcon: {
|
259 | display: 'inherit',
|
260 | marginRight: -4,
|
261 | marginLeft: 8,
|
262 | '&$iconSizeSmall': {
|
263 | marginRight: -2
|
264 | }
|
265 | },
|
266 |
|
267 |
|
268 | iconSizeSmall: {
|
269 | '& > *:first-child': {
|
270 | fontSize: 18
|
271 | }
|
272 | },
|
273 |
|
274 |
|
275 | iconSizeMedium: {
|
276 | '& > *:first-child': {
|
277 | fontSize: 20
|
278 | }
|
279 | },
|
280 |
|
281 |
|
282 | iconSizeLarge: {
|
283 | '& > *:first-child': {
|
284 | fontSize: 22
|
285 | }
|
286 | }
|
287 | });
|
288 | const Button = React.forwardRef(function Button(props, ref) {
|
289 | const {
|
290 | children,
|
291 | classes,
|
292 | className,
|
293 | color = 'default',
|
294 | component = 'button',
|
295 | disabled = false,
|
296 | disableElevation = false,
|
297 | disableFocusRipple = false,
|
298 | endIcon: endIconProp,
|
299 | focusVisibleClassName,
|
300 | fullWidth = false,
|
301 | size = 'medium',
|
302 | startIcon: startIconProp,
|
303 | type = 'button',
|
304 | variant = 'text'
|
305 | } = props,
|
306 | other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);
|
307 |
|
308 | const startIcon = startIconProp && React.createElement("span", {
|
309 | className: clsx(classes.startIcon, classes[`iconSize${capitalize(size)}`])
|
310 | }, startIconProp);
|
311 | const endIcon = endIconProp && React.createElement("span", {
|
312 | className: clsx(classes.endIcon, classes[`iconSize${capitalize(size)}`])
|
313 | }, endIconProp);
|
314 | return React.createElement(ButtonBase, _extends({
|
315 | className: clsx(classes.root, classes[variant], className, color === 'inherit' ? classes.colorInherit : color !== 'default' && classes[`${variant}${capitalize(color)}`], size !== 'medium' && [classes[`${variant}Size${capitalize(size)}`], classes[`size${capitalize(size)}`]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth),
|
316 | component: component,
|
317 | disabled: disabled,
|
318 | focusRipple: !disableFocusRipple,
|
319 | focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
320 | ref: ref,
|
321 | type: type
|
322 | }, other), React.createElement("span", {
|
323 | className: classes.label
|
324 | }, startIcon, children, endIcon));
|
325 | });
|
326 | process.env.NODE_ENV !== "production" ? Button.propTypes = {
|
327 |
|
328 |
|
329 |
|
330 |
|
331 |
|
332 | |
333 |
|
334 |
|
335 | children: PropTypes.node,
|
336 |
|
337 | |
338 |
|
339 |
|
340 |
|
341 | classes: PropTypes.object,
|
342 |
|
343 | |
344 |
|
345 |
|
346 | className: PropTypes.string,
|
347 |
|
348 | |
349 |
|
350 |
|
351 | color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
352 |
|
353 | |
354 |
|
355 |
|
356 |
|
357 | component: PropTypes
|
358 |
|
359 | .elementType,
|
360 |
|
361 | |
362 |
|
363 |
|
364 | disabled: PropTypes.bool,
|
365 |
|
366 | |
367 |
|
368 |
|
369 | disableElevation: PropTypes.bool,
|
370 |
|
371 | |
372 |
|
373 |
|
374 | disableFocusRipple: PropTypes.bool,
|
375 |
|
376 | |
377 |
|
378 |
|
379 |
|
380 |
|
381 |
|
382 | disableRipple: PropTypes.bool,
|
383 |
|
384 | |
385 |
|
386 |
|
387 | endIcon: PropTypes.node,
|
388 |
|
389 | |
390 |
|
391 |
|
392 | focusVisibleClassName: PropTypes.string,
|
393 |
|
394 | |
395 |
|
396 |
|
397 | fullWidth: PropTypes.bool,
|
398 |
|
399 | |
400 |
|
401 |
|
402 |
|
403 | href: PropTypes.string,
|
404 |
|
405 | |
406 |
|
407 |
|
408 |
|
409 | size: PropTypes.oneOf(['large', 'medium', 'small']),
|
410 |
|
411 | |
412 |
|
413 |
|
414 | startIcon: PropTypes.node,
|
415 |
|
416 | |
417 |
|
418 |
|
419 | type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
|
420 |
|
421 | |
422 |
|
423 |
|
424 | variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
|
425 | } : void 0;
|
426 | export default withStyles(styles, {
|
427 | name: 'MuiButton'
|
428 | })(Button); |
\ | No newline at end of file |