39 lines
972 B
TypeScript
39 lines
972 B
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { RippleProps } from './ripple.types';
|
||
|
|
import { rippleAreaContext } from './ripple-effect';
|
||
|
|
import React, { useContext, useLayoutEffect, useState } from 'react';
|
||
|
|
|
||
|
|
const Ripple = ({
|
||
|
|
rippleX,
|
||
|
|
rippleY,
|
||
|
|
rippleS,
|
||
|
|
lifetime,
|
||
|
|
rippleKey,
|
||
|
|
endLifetime,
|
||
|
|
}: RippleProps) => {
|
||
|
|
const [classes, setClasses] = useState<string>('m3 ripple visible');
|
||
|
|
const rippleDomainContext = useContext(rippleAreaContext);
|
||
|
|
|
||
|
|
useLayoutEffect(() => {
|
||
|
|
if (endLifetime !== null && !rippleDomainContext) {
|
||
|
|
setClasses('m3 ripple');
|
||
|
|
setTimeout(() => endLifetime(rippleKey), lifetime);
|
||
|
|
}
|
||
|
|
}, [rippleDomainContext]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={classes}
|
||
|
|
style={{
|
||
|
|
left: -(rippleS / 2) + rippleX,
|
||
|
|
top: -(rippleS / 2) + rippleY,
|
||
|
|
width: rippleS,
|
||
|
|
aspectRatio: 1,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export { Ripple };
|