@yamada-ui/react/dist/cjs/components/ripple/use-ripple.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/ripple/use-ripple.ts
const useRipple = ({ disabled,...rest } = {}) => {
	const [ripples, setRipples] = (0, react.useState)([]);
	const onClick = (0, react.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, require_utils_index.utils_exports.uuid)(),
			size,
			x: ev.clientX - rect.x - size / 2,
			y: ev.clientY - rect.y - size / 2
		}]);
	}, [disabled]);
	return {
		ripples,
		onClear: (0, react.useCallback)((key) => {
			setRipples((prev) => prev.filter((item) => item.key !== key));
		}, []),
		onClick: (0, require_utils_index.utils_exports.handlerAll)(onClick, rest.onClick)
	};
};

//#endregion
exports.useRipple = useRipple;
//# sourceMappingURL=use-ripple.cjs.map