1 | import * as React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import clsx from 'clsx';
|
4 | import useEventCallback from '../utils/useEventCallback';
|
5 | const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | function Ripple(props) {
|
11 | const {
|
12 | classes,
|
13 | pulsate = false,
|
14 | rippleX,
|
15 | rippleY,
|
16 | rippleSize,
|
17 | in: inProp,
|
18 | onExited = () => {},
|
19 | timeout
|
20 | } = props;
|
21 | const [leaving, setLeaving] = React.useState(false);
|
22 | const rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
|
23 | const rippleStyles = {
|
24 | width: rippleSize,
|
25 | height: rippleSize,
|
26 | top: -(rippleSize / 2) + rippleY,
|
27 | left: -(rippleSize / 2) + rippleX
|
28 | };
|
29 | const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
|
30 | const handleExited = useEventCallback(onExited);
|
31 |
|
32 | useEnhancedEffect(() => {
|
33 | if (!inProp) {
|
34 |
|
35 | setLeaving(true);
|
36 |
|
37 | const timeoutId = setTimeout(handleExited, timeout);
|
38 | return () => {
|
39 | clearTimeout(timeoutId);
|
40 | };
|
41 | }
|
42 |
|
43 | return undefined;
|
44 | }, [handleExited, inProp, timeout]);
|
45 | return React.createElement("span", {
|
46 | className: rippleClassName,
|
47 | style: rippleStyles
|
48 | }, React.createElement("span", {
|
49 | className: childClassName
|
50 | }));
|
51 | }
|
52 |
|
53 | process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
|
54 | |
55 |
|
56 |
|
57 |
|
58 | classes: PropTypes.object.isRequired,
|
59 |
|
60 | |
61 |
|
62 |
|
63 | in: PropTypes.bool,
|
64 |
|
65 | |
66 |
|
67 |
|
68 | onExited: PropTypes.func,
|
69 |
|
70 | |
71 |
|
72 |
|
73 | pulsate: PropTypes.bool,
|
74 |
|
75 | |
76 |
|
77 |
|
78 | rippleSize: PropTypes.number,
|
79 |
|
80 | |
81 |
|
82 |
|
83 | rippleX: PropTypes.number,
|
84 |
|
85 | |
86 |
|
87 |
|
88 | rippleY: PropTypes.number,
|
89 |
|
90 | |
91 |
|
92 |
|
93 | timeout: PropTypes.number.isRequired
|
94 | } : void 0;
|
95 | export default Ripple; |
\ | No newline at end of file |