88 lines
2.1 KiB
JavaScript
88 lines
2.1 KiB
JavaScript
|
'use client';
|
||
|
|
|
||
|
|
import * as React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @ignore - internal component.
|
||
|
|
*/
|
||
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
||
|
|
function Ripple(props) {
|
||
|
|
const {
|
||
|
|
className,
|
||
|
|
classes,
|
||
|
|
pulsate = false,
|
||
|
|
rippleX,
|
||
|
|
rippleY,
|
||
|
|
rippleSize,
|
||
|
|
in: inProp,
|
||
|
|
onExited,
|
||
|
|
timeout
|
||
|
|
} = props;
|
||
|
|
const [leaving, setLeaving] = React.useState(false);
|
||
|
|
const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
|
||
|
|
const rippleStyles = {
|
||
|
|
width: rippleSize,
|
||
|
|
height: rippleSize,
|
||
|
|
top: -(rippleSize / 2) + rippleY,
|
||
|
|
left: -(rippleSize / 2) + rippleX
|
||
|
|
};
|
||
|
|
const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
|
||
|
|
if (!inProp && !leaving) {
|
||
|
|
setLeaving(true);
|
||
|
|
}
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (!inProp && onExited != null) {
|
||
|
|
// react-transition-group#onExited
|
||
|
|
const timeoutId = setTimeout(onExited, timeout);
|
||
|
|
return () => {
|
||
|
|
clearTimeout(timeoutId);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return undefined;
|
||
|
|
}, [onExited, inProp, timeout]);
|
||
|
|
return /*#__PURE__*/_jsx("span", {
|
||
|
|
className: rippleClassName,
|
||
|
|
style: rippleStyles,
|
||
|
|
children: /*#__PURE__*/_jsx("span", {
|
||
|
|
className: childClassName
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
|
||
|
|
/**
|
||
|
|
* Override or extend the styles applied to the component.
|
||
|
|
*/
|
||
|
|
classes: PropTypes.object.isRequired,
|
||
|
|
className: PropTypes.string,
|
||
|
|
/**
|
||
|
|
* @ignore - injected from TransitionGroup
|
||
|
|
*/
|
||
|
|
in: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* @ignore - injected from TransitionGroup
|
||
|
|
*/
|
||
|
|
onExited: PropTypes.func,
|
||
|
|
/**
|
||
|
|
* If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
|
||
|
|
*/
|
||
|
|
pulsate: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Diameter of the ripple.
|
||
|
|
*/
|
||
|
|
rippleSize: PropTypes.number,
|
||
|
|
/**
|
||
|
|
* Horizontal position of the ripple center.
|
||
|
|
*/
|
||
|
|
rippleX: PropTypes.number,
|
||
|
|
/**
|
||
|
|
* Vertical position of the ripple center.
|
||
|
|
*/
|
||
|
|
rippleY: PropTypes.number,
|
||
|
|
/**
|
||
|
|
* exit delay
|
||
|
|
*/
|
||
|
|
timeout: PropTypes.number.isRequired
|
||
|
|
} : void 0;
|
||
|
|
export default Ripple;
|