|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
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 = {
|
|
|
|
|
@ -10,6 +11,7 @@ export type HtmlContentProps = {
|
|
|
|
|
type IPopover = {
|
|
|
|
|
className?: string
|
|
|
|
|
htmlContent: React.ReactElement<HtmlContentProps>
|
|
|
|
|
popupClassName?: string
|
|
|
|
|
trigger?: 'click' | 'hover'
|
|
|
|
|
position?: 'bottom' | 'br'
|
|
|
|
|
btnElement?: string | React.ReactNode
|
|
|
|
|
@ -23,6 +25,7 @@ export default function CustomPopover({
|
|
|
|
|
trigger = 'hover',
|
|
|
|
|
position = 'bottom',
|
|
|
|
|
htmlContent,
|
|
|
|
|
popupClassName,
|
|
|
|
|
btnElement,
|
|
|
|
|
className,
|
|
|
|
|
btnClassName,
|
|
|
|
|
@ -57,12 +60,11 @@ export default function CustomPopover({
|
|
|
|
|
>
|
|
|
|
|
<Popover.Button
|
|
|
|
|
ref={buttonRef}
|
|
|
|
|
className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${
|
|
|
|
|
!btnClassName
|
|
|
|
|
? ''
|
|
|
|
|
: typeof btnClassName === 'string'
|
|
|
|
|
? btnClassName
|
|
|
|
|
: btnClassName?.(open)
|
|
|
|
|
className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${!btnClassName
|
|
|
|
|
? ''
|
|
|
|
|
: typeof btnClassName === 'string'
|
|
|
|
|
? btnClassName
|
|
|
|
|
: btnClassName?.(open)
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{btnElement}
|
|
|
|
|
@ -80,7 +82,7 @@ export default function CustomPopover({
|
|
|
|
|
>
|
|
|
|
|
{({ close }) => (
|
|
|
|
|
<div
|
|
|
|
|
className={s.panelContainer}
|
|
|
|
|
className={cn(s.panelContainer, popupClassName)}
|
|
|
|
|
{...(trigger !== 'hover'
|
|
|
|
|
? {}
|
|
|
|
|
: {
|
|
|
|
|
|