@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
61 lines (57 loc) • 2.37 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory = require('../motion/factory.cjs');
const require_ripple_style = require('./ripple.style.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);
//#region src/components/ripple/ripple.tsx
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
const { PropsContext: RipplePropsContext, usePropsContext: useRipplePropsContext, withContext } = require_create_component.createComponent("ripple", require_ripple_style.rippleStyle);
/**
* `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.
*
* @see https://yamada-ui.com/docs/components/ripple
*/
const Ripple = withContext(({ style, color = "currentColor", disabled, ripples, onAnimationComplete, onClear,...rest }) => {
if (disabled) return null;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: ripples.map(({ key, size, x, y }) => {
const duration = clamp(.01 * size, .2, size > 100 ? .75 : .5);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
mode: "popLayout",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.span, {
style: {
height: `${size}px`,
left: x,
pointerEvents: "none",
position: "absolute",
top: y,
transformOrigin: "center",
width: `${size}px`,
...style
},
animate: {
opacity: 0,
transform: "scale(2)"
},
bgColor: color,
exit: { opacity: 0 },
initial: {
opacity: .35,
transform: "scale(0)"
},
transition: { duration },
...rest,
onAnimationComplete: (0, require_utils_index.utils_exports.handlerAll)(onAnimationComplete, () => onClear(key))
})
}, key);
}) });
})();
//#endregion
exports.Ripple = Ripple;
exports.RipplePropsContext = RipplePropsContext;
exports.useRipplePropsContext = useRipplePropsContext;
//# sourceMappingURL=ripple.cjs.map