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