38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import type { ComponentRef } from "react";
|
|
import { useEffect, useRef, type ComponentProps } from "react";
|
|
import type { Button } from "./ui/button";
|
|
|
|
// use direct event attach to work in D-PIP
|
|
// not needed anymore cause dpip.tsx rw
|
|
|
|
type NativeButtonProps<T extends React.ElementType = "button"> = {
|
|
as?: T;
|
|
} & Omit<ComponentProps<T>, "as"> &
|
|
Omit<ComponentProps<typeof Button>, "ref">;
|
|
|
|
export function NativeButton<T extends React.ElementType = "button">({
|
|
onClick,
|
|
ref: parentRef,
|
|
as,
|
|
...props
|
|
}: NativeButtonProps<T>) {
|
|
const ref = useRef<ComponentRef<T>>(null);
|
|
const combineRef = (n: ComponentRef<T>) =>
|
|
((ref.current = n) &&
|
|
(typeof parentRef === "function"
|
|
? parentRef(n)
|
|
: parentRef && (parentRef.current = n)) &&
|
|
null) as void;
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
(ref.current as any).onclick = onClick as unknown as (
|
|
ev: PointerEvent,
|
|
) => void;
|
|
// console.log("EVENT LISTENRE ATTCHED");
|
|
}, [onClick]);
|
|
const Comp = as ?? "button";
|
|
return <Comp ref={combineRef as any} {...props} />;
|
|
}
|