fix: added multiple onClick and forwardRef support

magicuidesign · Nov 16, 2024 · feedaba · feedaba
1 parent 9efda78
commit feedaba
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 60 deletions.
diff --git a/registry/default/example/ripple-button-demo.tsx b/registry/default/example/ripple-button-demo.tsx
@@ -1,5 +1,5 @@
 import RippleButton from "@/registry/default/magicui/ripple-button";
 
 export default function RippleButtonDemo() {
-  return <RippleButton>It's Rippling!</RippleButton>;
+  return <RippleButton rippleColor="#ADD8E6">Click me</RippleButton>;
 }
diff --git a/registry/default/magicui/ripple-button.tsx b/registry/default/magicui/ripple-button.tsx
@@ -9,66 +9,82 @@ interface RippleButtonProps
   duration?: string;
 }
 
-export default function RippleButton({
-  className,
-  children,
-  rippleColor = "#ffffff",
-  duration = "600ms",
-  ...props
-}: RippleButtonProps) {
-  const [buttonRipples, setButtonRipples] = useState<
-    Array<{ x: number; y: number; size: number; key: number }>
-  >([]);
+const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
+  (
+    {
+      className,
+      children,
+      rippleColor = "#ffffff",
+      duration = "600ms",
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [buttonRipples, setButtonRipples] = useState<
+      Array<{ x: number; y: number; size: number; key: number }>
+    >([]);
 
-  const createRipple = (event: MouseEvent<HTMLButtonElement>) => {
-    const button = event.currentTarget;
-    const rect = button.getBoundingClientRect();
-    const size = Math.max(rect.width, rect.height);
-    const x = event.clientX - rect.left - size / 2;
-    const y = event.clientY - rect.top - size / 2;
+    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+      createRipple(event);
+      onClick?.(event);
+    };
 
-    const newRipple = { x, y, size, key: Date.now() };
-    setButtonRipples((prevRipples) => [...prevRipples, newRipple]);
-  };
+    const createRipple = (event: MouseEvent<HTMLButtonElement>) => {
+      const button = event.currentTarget;
+      const rect = button.getBoundingClientRect();
+      const size = Math.max(rect.width, rect.height);
+      const x = event.clientX - rect.left - size / 2;
+      const y = event.clientY - rect.top - size / 2;
 
-  useEffect(() => {
-    if (buttonRipples.length > 0) {
-      const lastRipple = buttonRipples[buttonRipples.length - 1];
-      const timeout = setTimeout(() => {
-        setButtonRipples((prevRipples) =>
-          prevRipples.filter((ripple) => ripple.key !== lastRipple.key),
-        );
-      }, parseInt(duration));
-      return () => clearTimeout(timeout);
-    }
-  }, [buttonRipples, duration]);
+      const newRipple = { x, y, size, key: Date.now() };
+      setButtonRipples((prevRipples) => [...prevRipples, newRipple]);
+    };
 
-  return (
-    <button
-      className={cn(
-        "relative overflow-hidden text-center cursor-pointer flex justify-center items-center rounded-lg text-white bg-black-500 px-4 py-2 border-2",
-        className,
-      )}
-      onClick={createRipple}
-      {...props}
-    >
-      <div className="relative z-10">{children}</div>
-      <span className="absolute inset-0 pointer-events-none">
-        {buttonRipples.map((ripple) => (
-          <span
-            className="absolute animate-rippling bg-white opacity-30 rounded-full"
-            key={ripple.key}
-            style={{
-              width: `${ripple.size}px`,
-              height: `${ripple.size}px`,
-              top: `${ripple.y}px`,
-              left: `${ripple.x}px`,
-              backgroundColor: rippleColor,
-              transform: `scale(0)`,
-            }}
-          />
-        ))}
-      </span>
-    </button>
-  );
-}
+    useEffect(() => {
+      if (buttonRipples.length > 0) {
+        const lastRipple = buttonRipples[buttonRipples.length - 1];
+        const timeout = setTimeout(() => {
+          setButtonRipples((prevRipples) =>
+            prevRipples.filter((ripple) => ripple.key !== lastRipple.key),
+          );
+        }, parseInt(duration));
+        return () => clearTimeout(timeout);
+      }
+    }, [buttonRipples, duration]);
+
+    return (
+      <button
+        className={cn(
+          "bg-black-500 relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 bg-background px-4 py-2 text-center text-primary",
+          className,
+        )}
+        onClick={handleClick}
+        ref={ref}
+        {...props}
+      >
+        <div className="relative z-10">{children}</div>
+        <span className="pointer-events-none absolute inset-0">
+          {buttonRipples.map((ripple) => (
+            <span
+              className="absolute animate-rippling rounded-full bg-background opacity-30"
+              key={ripple.key}
+              style={{
+                width: `${ripple.size}px`,
+                height: `${ripple.size}px`,
+                top: `${ripple.y}px`,
+                left: `${ripple.x}px`,
+                backgroundColor: rippleColor,
+                transform: `scale(0)`,
+              }}
+            />
+          ))}
+        </span>
+      </button>
+    );
+  },
+);
+
+RippleButton.displayName = "RippleButton";
+
+export default RippleButton;