File size: 3,712 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
import { Popover, Transition } from '@headlessui/react'
import { Fragment, cloneElement, useRef } from 'react'
import cn from 'classnames'
import s from './style.module.css'
export type HtmlContentProps = {
onClose?: () => void
onClick?: () => void
}
type IPopover = {
className?: string
htmlContent: React.ReactElement<HtmlContentProps>
popupClassName?: string
trigger?: 'click' | 'hover'
position?: 'bottom' | 'br' | 'bl'
btnElement?: string | React.ReactNode
btnClassName?: string | ((open: boolean) => string)
manualClose?: boolean
}
const timeoutDuration = 100
export default function CustomPopover({
trigger = 'hover',
position = 'bottom',
htmlContent,
popupClassName,
btnElement,
className,
btnClassName,
manualClose,
}: IPopover) {
const buttonRef = useRef<HTMLButtonElement>(null)
const timeOutRef = useRef<NodeJS.Timeout | null>(null)
const onMouseEnter = (isOpen: boolean) => {
timeOutRef.current && clearTimeout(timeOutRef.current)
!isOpen && buttonRef.current?.click()
}
const onMouseLeave = (isOpen: boolean) => {
timeOutRef.current = setTimeout(() => {
isOpen && buttonRef.current?.click()
}, timeoutDuration)
}
return (
<Popover className="relative">
{({ open }: { open: boolean }) => {
return (
<>
<div
{...(trigger !== 'hover'
? {}
: {
onMouseLeave: () => onMouseLeave(open),
onMouseEnter: () => onMouseEnter(open),
})}
>
<Popover.Button
ref={buttonRef}
className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${!btnClassName
? ''
: typeof btnClassName === 'string'
? btnClassName
: btnClassName?.(open)
}`}
>
{btnElement}
</Popover.Button>
<Transition as={Fragment}>
<Popover.Panel
className={cn(
s.popupPanel,
position === 'bottom' && '-translate-x-1/2 left-1/2',
position === 'bl' && 'left-0',
position === 'br' && 'right-0',
className,
)}
{...(trigger !== 'hover'
? {}
: {
onMouseLeave: () => onMouseLeave(open),
onMouseEnter: () => onMouseEnter(open),
})
}
>
{({ close }) => (
<div
className={cn(s.panelContainer, popupClassName)}
{...(trigger !== 'hover'
? {}
: {
onMouseLeave: () => onMouseLeave(open),
onMouseEnter: () => onMouseEnter(open),
})
}
>
{cloneElement(htmlContent as React.ReactElement<HtmlContentProps>, {
onClose: () => onMouseLeave(open),
...(manualClose
? {
onClick: close,
}
: {}),
})}
</div>
)}
</Popover.Panel>
</Transition>
</div>
</>
)
}}
</Popover>
)
}
|