111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function Popover({
|
|
...props
|
|
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
|
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
|
}
|
|
|
|
function PopoverTrigger({
|
|
...props
|
|
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
|
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
|
}
|
|
|
|
function PopoverContent({
|
|
className,
|
|
align = "center",
|
|
sideOffset = 4,
|
|
...props
|
|
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
|
const contentRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
React.useEffect(() => {
|
|
const element = contentRef.current;
|
|
if (!element) return;
|
|
|
|
const disableAnimations = () => {
|
|
element.style.setProperty("animation", "none", "important");
|
|
element.style.setProperty("transition", "none", "important");
|
|
// Ne pas toucher au transform car il est utilisé pour le positionnement
|
|
element.style.setProperty("opacity", "1", "important");
|
|
element.style.setProperty("will-change", "auto", "important");
|
|
|
|
// Supprimer toutes les classes d'animation Tailwind
|
|
const classesToRemove = Array.from(element.classList).filter(
|
|
(cls) =>
|
|
cls.includes("animate") ||
|
|
cls.includes("fade") ||
|
|
cls.includes("zoom") ||
|
|
cls.includes("slide"),
|
|
);
|
|
classesToRemove.forEach((cls) => element.classList.remove(cls));
|
|
};
|
|
|
|
// Désactiver immédiatement
|
|
disableAnimations();
|
|
|
|
// Observer pour les changements d'attributs
|
|
const observer = new MutationObserver(() => {
|
|
disableAnimations();
|
|
});
|
|
|
|
observer.observe(element, {
|
|
attributes: true,
|
|
attributeFilter: ["class", "data-state"],
|
|
subtree: false,
|
|
});
|
|
|
|
// Observer pour les changements dans le DOM
|
|
const domObserver = new MutationObserver(() => {
|
|
disableAnimations();
|
|
});
|
|
|
|
domObserver.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
domObserver.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<PopoverPrimitive.Portal>
|
|
<PopoverPrimitive.Content
|
|
ref={contentRef}
|
|
data-slot="popover-content"
|
|
align={align}
|
|
sideOffset={sideOffset}
|
|
className={cn(
|
|
"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
|
|
className,
|
|
)}
|
|
style={
|
|
{
|
|
animation: "none !important",
|
|
transition: "none !important",
|
|
opacity: "1 !important",
|
|
} as React.CSSProperties
|
|
}
|
|
{...props}
|
|
/>
|
|
</PopoverPrimitive.Portal>
|
|
);
|
|
}
|
|
|
|
function PopoverAnchor({
|
|
...props
|
|
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
|
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
|
}
|
|
|
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|