UNPKG

@nextui-org/drip

Version:

A ripple effect for ensuring that the user fells the system is reacting instantaneously

64 lines (62 loc) 1.97 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/use-drip.ts var use_drip_exports = {}; __export(use_drip_exports, { useDrip: () => useDrip }); module.exports = __toCommonJS(use_drip_exports); var import_react = require("react"); function useDrip() { const [drips, setDrips] = (0, import_react.useState)([]); const nextKey = (0, import_react.useRef)(0); const dripTimer = (0, import_react.useRef)(); const onClick = (event) => { const trigger = event.currentTarget; const size = Math.max(trigger.clientWidth, trigger.clientHeight); const rect = trigger.getBoundingClientRect(); const x = event.clientX - rect.x - size / 2; const y = event.clientY - rect.y - size / 2; const dripStyle = { width: `${size}px`, height: `${size}px`, top: `${y}px`, left: `${x}px` }; setDrips((prev) => [ ...prev, { key: nextKey.current, style: dripStyle } ]); nextKey.current++; dripTimer.current = setTimeout(() => { setDrips((prev) => prev.slice(1)); }, 340); }; return { drips, onClick }; } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { useDrip });