1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | const _excluded = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { elementTypeAcceptingRef, refType } from '@mui/utils';
|
8 | import composeClasses from '@mui/base/composeClasses';
|
9 | import styled from '../styles/styled';
|
10 | import useThemeProps from '../styles/useThemeProps';
|
11 | import useForkRef from '../utils/useForkRef';
|
12 | import useEventCallback from '../utils/useEventCallback';
|
13 | import useIsFocusVisible from '../utils/useIsFocusVisible';
|
14 | import TouchRipple from './TouchRipple';
|
15 | import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
|
16 | import { jsx as _jsx } from "react/jsx-runtime";
|
17 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
18 |
|
19 | const useUtilityClasses = ownerState => {
|
20 | const {
|
21 | disabled,
|
22 | focusVisible,
|
23 | focusVisibleClassName,
|
24 | classes
|
25 | } = ownerState;
|
26 | const slots = {
|
27 | root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
|
28 | };
|
29 | const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);
|
30 |
|
31 | if (focusVisible && focusVisibleClassName) {
|
32 | composedClasses.root += ` ${focusVisibleClassName}`;
|
33 | }
|
34 |
|
35 | return composedClasses;
|
36 | };
|
37 |
|
38 | export const ButtonBaseRoot = styled('button', {
|
39 | name: 'MuiButtonBase',
|
40 | slot: 'Root',
|
41 | overridesResolver: (props, styles) => styles.root
|
42 | })({
|
43 | display: 'inline-flex',
|
44 | alignItems: 'center',
|
45 | justifyContent: 'center',
|
46 | position: 'relative',
|
47 | boxSizing: 'border-box',
|
48 | WebkitTapHighlightColor: 'transparent',
|
49 | backgroundColor: 'transparent',
|
50 |
|
51 |
|
52 | outline: 0,
|
53 | border: 0,
|
54 | margin: 0,
|
55 |
|
56 | borderRadius: 0,
|
57 | padding: 0,
|
58 |
|
59 | cursor: 'pointer',
|
60 | userSelect: 'none',
|
61 | verticalAlign: 'middle',
|
62 | MozAppearance: 'none',
|
63 |
|
64 | WebkitAppearance: 'none',
|
65 |
|
66 | textDecoration: 'none',
|
67 |
|
68 | color: 'inherit',
|
69 | '&::-moz-focus-inner': {
|
70 | borderStyle: 'none'
|
71 |
|
72 | },
|
73 | [`&.${buttonBaseClasses.disabled}`]: {
|
74 | pointerEvents: 'none',
|
75 |
|
76 | cursor: 'default'
|
77 | },
|
78 | '@media print': {
|
79 | colorAdjust: 'exact'
|
80 | }
|
81 | });
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 | const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
|
89 | const props = useThemeProps({
|
90 | props: inProps,
|
91 | name: 'MuiButtonBase'
|
92 | });
|
93 |
|
94 | const {
|
95 | action,
|
96 | centerRipple = false,
|
97 | children,
|
98 | className,
|
99 | component = 'button',
|
100 | disabled = false,
|
101 | disableRipple = false,
|
102 | disableTouchRipple = false,
|
103 | focusRipple = false,
|
104 | LinkComponent = 'a',
|
105 | onBlur,
|
106 | onClick,
|
107 | onContextMenu,
|
108 | onDragLeave,
|
109 | onFocus,
|
110 | onFocusVisible,
|
111 | onKeyDown,
|
112 | onKeyUp,
|
113 | onMouseDown,
|
114 | onMouseLeave,
|
115 | onMouseUp,
|
116 | onTouchEnd,
|
117 | onTouchMove,
|
118 | onTouchStart,
|
119 | tabIndex = 0,
|
120 | TouchRippleProps,
|
121 | touchRippleRef,
|
122 | type
|
123 | } = props,
|
124 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
125 |
|
126 | const buttonRef = React.useRef(null);
|
127 | const rippleRef = React.useRef(null);
|
128 | const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
|
129 | const {
|
130 | isFocusVisibleRef,
|
131 | onFocus: handleFocusVisible,
|
132 | onBlur: handleBlurVisible,
|
133 | ref: focusVisibleRef
|
134 | } = useIsFocusVisible();
|
135 | const [focusVisible, setFocusVisible] = React.useState(false);
|
136 |
|
137 | if (disabled && focusVisible) {
|
138 | setFocusVisible(false);
|
139 | }
|
140 |
|
141 | React.useImperativeHandle(action, () => ({
|
142 | focusVisible: () => {
|
143 | setFocusVisible(true);
|
144 | buttonRef.current.focus();
|
145 | }
|
146 | }), []);
|
147 | const [mountedState, setMountedState] = React.useState(false);
|
148 | React.useEffect(() => {
|
149 | setMountedState(true);
|
150 | }, []);
|
151 | const enableTouchRipple = mountedState && !disableRipple && !disabled;
|
152 | React.useEffect(() => {
|
153 | if (focusVisible && focusRipple && !disableRipple && mountedState) {
|
154 | rippleRef.current.pulsate();
|
155 | }
|
156 | }, [disableRipple, focusRipple, focusVisible, mountedState]);
|
157 |
|
158 | function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
|
159 | return useEventCallback(event => {
|
160 | if (eventCallback) {
|
161 | eventCallback(event);
|
162 | }
|
163 |
|
164 | const ignore = skipRippleAction;
|
165 |
|
166 | if (!ignore && rippleRef.current) {
|
167 | rippleRef.current[rippleAction](event);
|
168 | }
|
169 |
|
170 | return true;
|
171 | });
|
172 | }
|
173 |
|
174 | const handleMouseDown = useRippleHandler('start', onMouseDown);
|
175 | const handleContextMenu = useRippleHandler('stop', onContextMenu);
|
176 | const handleDragLeave = useRippleHandler('stop', onDragLeave);
|
177 | const handleMouseUp = useRippleHandler('stop', onMouseUp);
|
178 | const handleMouseLeave = useRippleHandler('stop', event => {
|
179 | if (focusVisible) {
|
180 | event.preventDefault();
|
181 | }
|
182 |
|
183 | if (onMouseLeave) {
|
184 | onMouseLeave(event);
|
185 | }
|
186 | });
|
187 | const handleTouchStart = useRippleHandler('start', onTouchStart);
|
188 | const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
|
189 | const handleTouchMove = useRippleHandler('stop', onTouchMove);
|
190 | const handleBlur = useRippleHandler('stop', event => {
|
191 | handleBlurVisible(event);
|
192 |
|
193 | if (isFocusVisibleRef.current === false) {
|
194 | setFocusVisible(false);
|
195 | }
|
196 |
|
197 | if (onBlur) {
|
198 | onBlur(event);
|
199 | }
|
200 | }, false);
|
201 | const handleFocus = useEventCallback(event => {
|
202 |
|
203 | if (!buttonRef.current) {
|
204 | buttonRef.current = event.currentTarget;
|
205 | }
|
206 |
|
207 | handleFocusVisible(event);
|
208 |
|
209 | if (isFocusVisibleRef.current === true) {
|
210 | setFocusVisible(true);
|
211 |
|
212 | if (onFocusVisible) {
|
213 | onFocusVisible(event);
|
214 | }
|
215 | }
|
216 |
|
217 | if (onFocus) {
|
218 | onFocus(event);
|
219 | }
|
220 | });
|
221 |
|
222 | const isNonNativeButton = () => {
|
223 | const button = buttonRef.current;
|
224 | return component && component !== 'button' && !(button.tagName === 'A' && button.href);
|
225 | };
|
226 | |
227 |
|
228 |
|
229 |
|
230 |
|
231 | const keydownRef = React.useRef(false);
|
232 | const handleKeyDown = useEventCallback(event => {
|
233 |
|
234 | if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
|
235 | keydownRef.current = true;
|
236 | rippleRef.current.stop(event, () => {
|
237 | rippleRef.current.start(event);
|
238 | });
|
239 | }
|
240 |
|
241 | if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
|
242 | event.preventDefault();
|
243 | }
|
244 |
|
245 | if (onKeyDown) {
|
246 | onKeyDown(event);
|
247 | }
|
248 |
|
249 |
|
250 | if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
|
251 | event.preventDefault();
|
252 |
|
253 | if (onClick) {
|
254 | onClick(event);
|
255 | }
|
256 | }
|
257 | });
|
258 | const handleKeyUp = useEventCallback(event => {
|
259 |
|
260 |
|
261 | if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
|
262 | keydownRef.current = false;
|
263 | rippleRef.current.stop(event, () => {
|
264 | rippleRef.current.pulsate(event);
|
265 | });
|
266 | }
|
267 |
|
268 | if (onKeyUp) {
|
269 | onKeyUp(event);
|
270 | }
|
271 |
|
272 |
|
273 | if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
|
274 | onClick(event);
|
275 | }
|
276 | });
|
277 | let ComponentProp = component;
|
278 |
|
279 | if (ComponentProp === 'button' && (other.href || other.to)) {
|
280 | ComponentProp = LinkComponent;
|
281 | }
|
282 |
|
283 | const buttonProps = {};
|
284 |
|
285 | if (ComponentProp === 'button') {
|
286 | buttonProps.type = type === undefined ? 'button' : type;
|
287 | buttonProps.disabled = disabled;
|
288 | } else {
|
289 | if (!other.href && !other.to) {
|
290 | buttonProps.role = 'button';
|
291 | }
|
292 |
|
293 | if (disabled) {
|
294 | buttonProps['aria-disabled'] = disabled;
|
295 | }
|
296 | }
|
297 |
|
298 | const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
|
299 | const handleRef = useForkRef(ref, handleOwnRef);
|
300 |
|
301 | if (process.env.NODE_ENV !== 'production') {
|
302 |
|
303 | React.useEffect(() => {
|
304 | if (enableTouchRipple && !rippleRef.current) {
|
305 | console.error(['MUI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
|
306 | }
|
307 | }, [enableTouchRipple]);
|
308 | }
|
309 |
|
310 | const ownerState = _extends({}, props, {
|
311 | centerRipple,
|
312 | component,
|
313 | disabled,
|
314 | disableRipple,
|
315 | disableTouchRipple,
|
316 | focusRipple,
|
317 | tabIndex,
|
318 | focusVisible
|
319 | });
|
320 |
|
321 | const classes = useUtilityClasses(ownerState);
|
322 | return _jsxs(ButtonBaseRoot, _extends({
|
323 | as: ComponentProp,
|
324 | className: clsx(classes.root, className),
|
325 | ownerState: ownerState,
|
326 | onBlur: handleBlur,
|
327 | onClick: onClick,
|
328 | onContextMenu: handleContextMenu,
|
329 | onFocus: handleFocus,
|
330 | onKeyDown: handleKeyDown,
|
331 | onKeyUp: handleKeyUp,
|
332 | onMouseDown: handleMouseDown,
|
333 | onMouseLeave: handleMouseLeave,
|
334 | onMouseUp: handleMouseUp,
|
335 | onDragLeave: handleDragLeave,
|
336 | onTouchEnd: handleTouchEnd,
|
337 | onTouchMove: handleTouchMove,
|
338 | onTouchStart: handleTouchStart,
|
339 | ref: handleRef,
|
340 | tabIndex: disabled ? -1 : tabIndex,
|
341 | type: type
|
342 | }, buttonProps, other, {
|
343 | children: [children, enableTouchRipple ?
|
344 |
|
345 |
|
346 |
|
347 | _jsx(TouchRipple, _extends({
|
348 | ref: handleRippleRef,
|
349 | center: centerRipple
|
350 | }, TouchRippleProps)) : null]
|
351 | }));
|
352 | });
|
353 | process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
|
354 |
|
355 | = {
|
356 |
|
357 |
|
358 |
|
359 |
|
360 |
|
361 | |
362 |
|
363 |
|
364 |
|
365 | action: refType,
|
366 |
|
367 | |
368 |
|
369 |
|
370 |
|
371 |
|
372 | centerRipple: PropTypes.bool,
|
373 |
|
374 | |
375 |
|
376 |
|
377 | children: PropTypes.node,
|
378 |
|
379 | |
380 |
|
381 |
|
382 | classes: PropTypes.object,
|
383 |
|
384 | |
385 |
|
386 |
|
387 | className: PropTypes.string,
|
388 |
|
389 | |
390 |
|
391 |
|
392 |
|
393 | component: elementTypeAcceptingRef,
|
394 |
|
395 | |
396 |
|
397 |
|
398 |
|
399 | disabled: PropTypes.bool,
|
400 |
|
401 | |
402 |
|
403 |
|
404 |
|
405 |
|
406 |
|
407 |
|
408 | disableRipple: PropTypes.bool,
|
409 |
|
410 | |
411 |
|
412 |
|
413 |
|
414 | disableTouchRipple: PropTypes.bool,
|
415 |
|
416 | |
417 |
|
418 |
|
419 |
|
420 | focusRipple: PropTypes.bool,
|
421 |
|
422 | |
423 |
|
424 |
|
425 |
|
426 |
|
427 |
|
428 |
|
429 |
|
430 | focusVisibleClassName: PropTypes.string,
|
431 |
|
432 | |
433 |
|
434 |
|
435 | href: PropTypes
|
436 |
|
437 | .any,
|
438 |
|
439 | |
440 |
|
441 |
|
442 |
|
443 | LinkComponent: PropTypes.elementType,
|
444 |
|
445 | |
446 |
|
447 |
|
448 | onBlur: PropTypes.func,
|
449 |
|
450 | |
451 |
|
452 |
|
453 | onClick: PropTypes.func,
|
454 |
|
455 | |
456 |
|
457 |
|
458 | onContextMenu: PropTypes.func,
|
459 |
|
460 | |
461 |
|
462 |
|
463 | onDragLeave: PropTypes.func,
|
464 |
|
465 | |
466 |
|
467 |
|
468 | onFocus: PropTypes.func,
|
469 |
|
470 | |
471 |
|
472 |
|
473 |
|
474 | onFocusVisible: PropTypes.func,
|
475 |
|
476 | |
477 |
|
478 |
|
479 | onKeyDown: PropTypes.func,
|
480 |
|
481 | |
482 |
|
483 |
|
484 | onKeyUp: PropTypes.func,
|
485 |
|
486 | |
487 |
|
488 |
|
489 | onMouseDown: PropTypes.func,
|
490 |
|
491 | |
492 |
|
493 |
|
494 | onMouseLeave: PropTypes.func,
|
495 |
|
496 | |
497 |
|
498 |
|
499 | onMouseUp: PropTypes.func,
|
500 |
|
501 | |
502 |
|
503 |
|
504 | onTouchEnd: PropTypes.func,
|
505 |
|
506 | |
507 |
|
508 |
|
509 | onTouchMove: PropTypes.func,
|
510 |
|
511 | |
512 |
|
513 |
|
514 | onTouchStart: PropTypes.func,
|
515 |
|
516 | |
517 |
|
518 |
|
519 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
520 |
|
521 | |
522 |
|
523 |
|
524 | tabIndex: PropTypes.number,
|
525 |
|
526 | |
527 |
|
528 |
|
529 | TouchRippleProps: PropTypes.object,
|
530 |
|
531 | |
532 |
|
533 |
|
534 | touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
535 | current: PropTypes.shape({
|
536 | pulsate: PropTypes.func.isRequired,
|
537 | start: PropTypes.func.isRequired,
|
538 | stop: PropTypes.func.isRequired
|
539 | })
|
540 | })]),
|
541 |
|
542 | |
543 |
|
544 |
|
545 | type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string])
|
546 | } : void 0;
|
547 | export default ButtonBase; |
\ | No newline at end of file |