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