@yamada-ui/react/dist/esm/components/ripple/use-ripple.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { useCallback, useState } from "react";

//#region src/components/ripple/use-ripple.ts
const useRipple = ({ disabled,...rest } = {}) => {
	const [ripples, setRipples] = useState([]);
	const onClick = useCallback((ev) => {
		if (disabled) return;
		const trigger = ev.currentTarget;
		const size = Math.max(trigger.clientWidth, trigger.clientHeight);
		const rect = trigger.getBoundingClientRect();
		setRipples((prev) => [...prev, {
			key: (0, utils_exports.uuid)(),
			size,
			x: ev.clientX - rect.x - size / 2,
			y: ev.clientY - rect.y - size / 2
		}]);
	}, [disabled]);
	return {
		ripples,
		onClear: useCallback((key) => {
			setRipples((prev) => prev.filter((item) => item.key !== key));
		}, []),
		onClick: (0, utils_exports.handlerAll)(onClick, rest.onClick)
	};
};

//#endregion
export { useRipple };
//# sourceMappingURL=use-ripple.js.map