105 lines
2.9 KiB
TypeScript
105 lines
2.9 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 };
|