1 | import * as React from 'react';
|
2 | import { useEventCallback } from '../utils';
|
3 |
|
4 | var useTouchRipple = function useTouchRipple(props) {
|
5 | var disabled = props.disabled,
|
6 | disableFocusRipple = props.disableFocusRipple,
|
7 | disableRipple = props.disableRipple,
|
8 | disableTouchRipple = props.disableTouchRipple,
|
9 | focusVisible = props.focusVisible,
|
10 | rippleRef = props.rippleRef;
|
11 | React.useEffect(function () {
|
12 | if (focusVisible && !disableFocusRipple && !disableRipple) {
|
13 | var _rippleRef$current;
|
14 |
|
15 | (_rippleRef$current = rippleRef.current) == null ? void 0 : _rippleRef$current.pulsate();
|
16 | }
|
17 | }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
|
18 |
|
19 | function useRippleHandler(rippleAction) {
|
20 | var skipRippleAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : disableTouchRipple;
|
21 | return useEventCallback(function (event) {
|
22 | if (!skipRippleAction && rippleRef.current) {
|
23 | rippleRef.current[rippleAction](event);
|
24 | }
|
25 |
|
26 | return true;
|
27 | });
|
28 | }
|
29 |
|
30 | var keydownRef = React.useRef(false);
|
31 | var handleKeyDown = useEventCallback(function (event) {
|
32 | if (!disableFocusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
|
33 | keydownRef.current = true;
|
34 | rippleRef.current.stop(event, function () {
|
35 | var _rippleRef$current2;
|
36 |
|
37 | rippleRef == null ? void 0 : (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
|
38 | });
|
39 | }
|
40 | });
|
41 | var handleKeyUp = useEventCallback(function (event) {
|
42 |
|
43 |
|
44 | if (!disableFocusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
|
45 | keydownRef.current = false;
|
46 | rippleRef.current.stop(event, function () {
|
47 | var _rippleRef$current3;
|
48 |
|
49 | rippleRef == null ? void 0 : (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
|
50 | });
|
51 | }
|
52 | });
|
53 | var handleBlur = useRippleHandler('stop', false);
|
54 | var handleMouseDown = useRippleHandler('start');
|
55 | var handleContextMenu = useRippleHandler('stop');
|
56 | var handleDragLeave = useRippleHandler('stop');
|
57 | var handleMouseUp = useRippleHandler('stop');
|
58 | var handleMouseLeave = useRippleHandler('stop');
|
59 | var handleTouchStart = useRippleHandler('start');
|
60 | var handleTouchEnd = useRippleHandler('stop');
|
61 | var handleTouchMove = useRippleHandler('stop');
|
62 |
|
63 | var _React$useState = React.useState(false),
|
64 | mountedState = _React$useState[0],
|
65 | setMountedState = _React$useState[1];
|
66 |
|
67 | React.useEffect(function () {
|
68 | setMountedState(true);
|
69 | }, []);
|
70 | var enableTouchRipple = mountedState && !disableRipple && !disabled;
|
71 | var getRippleHandlers = React.useMemo(function () {
|
72 | var rippleHandlers = {
|
73 | onBlur: handleBlur,
|
74 | onKeyDown: handleKeyDown,
|
75 | onKeyUp: handleKeyUp,
|
76 | onMouseDown: handleMouseDown,
|
77 | onMouseUp: handleMouseUp,
|
78 | onMouseLeave: handleMouseLeave,
|
79 | onContextMenu: handleContextMenu,
|
80 | onDragLeave: handleDragLeave,
|
81 | onTouchStart: handleTouchStart,
|
82 | onTouchEnd: handleTouchEnd,
|
83 | onTouchMove: handleTouchMove
|
84 | };
|
85 | return function () {
|
86 | var otherEvents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
87 | var eventNames = Object.keys(rippleHandlers);
|
88 | var wrappedEvents = eventNames.map(function (eventName) {
|
89 | return {
|
90 | name: eventName,
|
91 | handler: function handler(ev) {
|
92 | var _otherEvents$eventNam;
|
93 |
|
94 | (_otherEvents$eventNam = otherEvents[eventName]) == null ? void 0 : _otherEvents$eventNam.call(otherEvents, ev);
|
95 | rippleHandlers[eventName](ev);
|
96 | }
|
97 | };
|
98 | });
|
99 | return wrappedEvents.reduce(function (acc, current) {
|
100 | acc[current.name] = current.handler;
|
101 | return acc;
|
102 | }, {});
|
103 | };
|
104 | }, [handleBlur, handleKeyDown, handleKeyUp, handleMouseDown, handleMouseUp, handleMouseLeave, handleContextMenu, handleDragLeave, handleTouchStart, handleTouchEnd, handleTouchMove]);
|
105 | return {
|
106 | enableTouchRipple: enableTouchRipple,
|
107 | getRippleHandlers: getRippleHandlers
|
108 | };
|
109 | };
|
110 |
|
111 | export default useTouchRipple; |
\ | No newline at end of file |