@material-ui/core
Version:
React components that implement Google's Material Design.
95 lines (83 loc) • 2.44 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import useEventCallback from '../utils/useEventCallback';
const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
/**
* @ignore - internal component.
*/
function Ripple(props) {
const {
classes,
pulsate = false,
rippleX,
rippleY,
rippleSize,
in: inProp,
onExited = () => {},
timeout
} = props;
const [leaving, setLeaving] = React.useState(false);
const rippleClassName = clsx(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);
const handleExited = useEventCallback(onExited); // Ripple is used for user feedback (e.g. click or press) so we want to apply styles with the highest priority
useEnhancedEffect(() => {
if (!inProp) {
// react-transition-group#onExit
setLeaving(true); // react-transition-group#onExited
const timeoutId = setTimeout(handleExited, timeout);
return () => {
clearTimeout(timeoutId);
};
}
return undefined;
}, [handleExited, inProp, timeout]);
return React.createElement("span", {
className: rippleClassName,
style: rippleStyles
}, React.createElement("span", {
className: childClassName
}));
}
process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @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;