Files F99791506

Ripple.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Sun, Jan 26, 15:53

Ripple.js
View Options

	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.
	* See [CSS API](#css) below for more details.
	*/
	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;

Event Timeline