93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
import { useState, useRef, useEffect, cloneElement } from 'react';
|
|
import { Button } from 'react-bootstrap';
|
|
import { AnimatePresence, motion as _motion } from 'framer-motion';
|
|
import '../css/AnimatedDropdown.css';
|
|
|
|
const AnimatedDropdown = ({
|
|
trigger,
|
|
icon,
|
|
variant = "secondary",
|
|
className = "",
|
|
buttonStyle = "",
|
|
show,
|
|
onToggle,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
children
|
|
}) => {
|
|
const isControlled = show !== undefined;
|
|
const [open, setOpen] = useState(false);
|
|
const triggerRef = useRef(null);
|
|
const dropdownRef = useRef(null);
|
|
|
|
const actualOpen = isControlled ? show : open;
|
|
|
|
const toggle = () => {
|
|
const newState = !actualOpen;
|
|
if (!isControlled) setOpen(newState);
|
|
onToggle?.(newState);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (e) => {
|
|
if (
|
|
dropdownRef.current &&
|
|
!dropdownRef.current.contains(e.target) &&
|
|
!triggerRef.current?.contains(e.target)
|
|
) {
|
|
if (!isControlled) setOpen(false);
|
|
onToggle?.(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isControlled, onToggle]);
|
|
|
|
const triggerElement = trigger
|
|
? (typeof trigger === "function"
|
|
? trigger({ onClick: toggle, ref: triggerRef })
|
|
: cloneElement(trigger, { onClick: toggle, ref: triggerRef }))
|
|
: (
|
|
<Button
|
|
ref={triggerRef}
|
|
variant={variant}
|
|
className={`circle-btn ${buttonStyle}`}
|
|
onClick={toggle}
|
|
>
|
|
{icon}
|
|
</Button>
|
|
);
|
|
|
|
const dropdownClasses = `dropdown-menu show shadow rounded-4 px-2 py-2 ${className}`;
|
|
|
|
return (
|
|
<div
|
|
className={`position-relative d-inline-block`}
|
|
onClick={toggle}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
ref={triggerRef}
|
|
>
|
|
{triggerElement}
|
|
|
|
<AnimatePresence>
|
|
{actualOpen && (
|
|
<_motion.div
|
|
ref={dropdownRef}
|
|
initial={{ opacity: 0, scale: 0.98 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.98 }}
|
|
transition={{ duration: 0.15 }}
|
|
className={dropdownClasses}
|
|
>
|
|
{typeof children === "function" ? children({ closeDropdown: () => toggle(false) }) : children}
|
|
</_motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AnimatedDropdown;
|