@geee-be/react-utils 1.0.4 → 1.0.5

package/.storybook/main.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @geee-be/react-utils
 
+## 1.0.5
+
+### Patch Changes
+
+- daeeaa9: Added ripple helper
+
 ## 1.0.4
 
 ### Patch Changes

package/dist/helpers/index.js

@@ -0,0 +1 @@
+export * from './ripple.js';

package/dist/helpers/ripple.js

@@ -0,0 +1,46 @@
+const RIPPLE_MS = 500;
+export const createRipple = (event) => {
+    const element = event.currentTarget;
+    if (!element || !(element instanceof HTMLElement))
+        return;
+    element.style.position = 'relative';
+    element.style.overflow = 'hidden';
+    const rect = element.getBoundingClientRect();
+    const radius = findFurthestPoint(event.clientX, element.offsetWidth, rect.left, event.clientY, element.offsetHeight, rect.top);
+    const circle = document.createElement('span');
+    applyStyles(circle, rect, radius, { x: event.clientX, y: event.clientY });
+    applyAnimation(circle);
+    element.appendChild(circle);
+    setTimeout(() => circle.remove(), RIPPLE_MS);
+};
+const findFurthestPoint = (clickPointX, elementWidth, offsetX, clickPointY, elementHeight, offsetY) => {
+    const x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth;
+    const y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight;
+    return Math.hypot(x - (clickPointX - offsetX), y - (clickPointY - offsetY));
+};
+const applyAnimation = (element) => {
+    element.animate([
+        {
+            transform: 'scale(0)',
+            opacity: 0.5,
+        },
+        {
+            transform: 'scale(1.5)',
+            opacity: 0,
+        },
+    ], {
+        duration: RIPPLE_MS,
+        easing: 'ease-out',
+        fill: 'forwards',
+    });
+};
+const applyStyles = (element, rect, radius, position) => {
+    element.classList.add('ripple');
+    element.style.backgroundColor = 'currentColor';
+    element.style.borderRadius = '50%';
+    element.style.pointerEvents = 'none';
+    element.style.position = 'absolute';
+    element.style.left = `${position.x - rect.left - radius}px`;
+    element.style.top = `${position.y - rect.top - radius}px`;
+    element.style.width = element.style.height = `${radius * 2}px`;
+};

package/dist/index.js

@@ -1 +1,2 @@
+export * from './helpers/index.js';
 export * from './hooks/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geee-be/react-utils",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "keywords": [],
   "license": "MIT",

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './ripple.js';

package/src/helpers/ripple.ts

@@ -0,0 +1,80 @@
+import type { MouseEventHandler } from 'react';
+
+const RIPPLE_MS = 500;
+
+export const createRipple: MouseEventHandler<HTMLElement> = (event) => {
+  const element = event.currentTarget;
+  if (!element || !(element instanceof HTMLElement)) return;
+
+  element.style.position = 'relative';
+  element.style.overflow = 'hidden';
+
+  const rect = element.getBoundingClientRect();
+
+  const radius = findFurthestPoint(
+    event.clientX,
+    element.offsetWidth,
+    rect.left,
+    event.clientY,
+    element.offsetHeight,
+    rect.top,
+  );
+
+  const circle = document.createElement('span');
+
+  applyStyles(circle, rect, radius, { x: event.clientX, y: event.clientY });
+  applyAnimation(circle);
+
+  element.appendChild(circle);
+
+  setTimeout(() => circle.remove(), RIPPLE_MS);
+};
+
+const findFurthestPoint = (
+  clickPointX: number,
+  elementWidth: number,
+  offsetX: number,
+  clickPointY: number,
+  elementHeight: number,
+  offsetY: number,
+): number => {
+  const x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth;
+  const y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight;
+  return Math.hypot(x - (clickPointX - offsetX), y - (clickPointY - offsetY));
+};
+
+const applyAnimation = (element: HTMLElement): void => {
+  element.animate(
+    [
+      {
+        transform: 'scale(0)',
+        opacity: 0.5,
+      },
+      {
+        transform: 'scale(1.5)',
+        opacity: 0,
+      },
+    ],
+    {
+      duration: RIPPLE_MS,
+      easing: 'ease-out',
+      fill: 'forwards',
+    },
+  );
+};
+
+const applyStyles = (
+  element: HTMLElement,
+  rect: { top: number; left: number },
+  radius: number,
+  position: { x: number; y: number },
+): void => {
+  element.classList.add('ripple');
+  element.style.backgroundColor = 'currentColor';
+  element.style.borderRadius = '50%';
+  element.style.pointerEvents = 'none';
+  element.style.position = 'absolute';
+  element.style.left = `${position.x - rect.left - radius}px`;
+  element.style.top = `${position.y - rect.top - radius}px`;
+  element.style.width = element.style.height = `${radius * 2}px`;
+};

package/src/index.ts

@@ -1 +1,2 @@
+export * from './helpers/index.js';
 export * from './hooks/index.js';