UNPKG

4.35 kBJavaScriptView Raw
1import * as React from 'react';
2import { useEventCallback } from '../utils';
3
4var 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 // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
43 // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
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
111export default useTouchRipple;
\No newline at end of file