|
@@ -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'
|
|
|
? {}
|
|
|
: {
|