hamid zarghami
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import clsx from 'clsx'
|
|
import { HTMLMotionProps, motion } from 'framer-motion';
|
|
import { CloseCircle } from 'iconsax-react'
|
|
import React, { useEffect, useRef } from 'react'
|
|
|
|
interface DropdownProps extends Omit<HTMLMotionProps<"div">, "ref"> {
|
|
active?: boolean,
|
|
toggle?: React.MouseEventHandler<HTMLButtonElement> | undefined,
|
|
children?: React.ReactNode
|
|
};
|
|
|
|
function Dropdown({ active, toggle, children, ...rest }: DropdownProps) {
|
|
const boxRef = useRef<HTMLDivElement>(null);
|
|
const closeButtonRef = useRef<HTMLButtonElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
|
|
closeButtonRef.current?.click();
|
|
}
|
|
};
|
|
|
|
if (active) {
|
|
document.addEventListener('click', handleClickOutside);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('click', handleClickOutside);
|
|
};
|
|
}, [active]);
|
|
|
|
|
|
return (
|
|
<motion.div
|
|
ref={boxRef}
|
|
initial={{ y: active ? 0 : '-10%', scale: active ? 1 : 0.95, opacity: active ? 1 : 0 }}
|
|
animate={{ y: active ? 0 : '-10%', scale: active ? 1 : 0.95, opacity: active ? 1 : 0 }}
|
|
transition={{ duration: 0.1 }}
|
|
className={clsx(
|
|
'box-shadow-normal',
|
|
'fixed inset-x-0 bottom-0 bg-container rounded-normal z-50',
|
|
'xl:absolute xl:top-18 xl:left-3 xl:right-auto xl:h-screen xl:w-[300px]',
|
|
active === false && 'pointer-events-none'
|
|
)}
|
|
style={{
|
|
top: 'calc(0px - env(safe-area-inset-top))',
|
|
paddingTop: 'calc(env(safe-area-inset-top) + 0px)',
|
|
minHeight: 'calc(100vh + env(safe-area-inset-top))'
|
|
}}
|
|
{...rest}
|
|
>
|
|
<div className='relative w-full h-full'>
|
|
<button
|
|
ref={closeButtonRef}
|
|
className='xl:hidden'
|
|
onClick={toggle} >
|
|
<CloseCircle size={20} className='cursor-pointer stroke-foreground absolute left-6 top-6' />
|
|
</button>
|
|
{children}
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
export default Dropdown |