Unverified Commit f28cb849 authored by Rhon Joe's avatar Rhon Joe Committed by GitHub

fix(web): fix AppCard Menu popover open bug (#1107)

parent 714872cd
...@@ -16,6 +16,7 @@ import { ToastContext } from '@/app/components/base/toast' ...@@ -16,6 +16,7 @@ import { ToastContext } from '@/app/components/base/toast'
import { deleteApp, fetchAppDetail, updateAppSiteConfig } from '@/service/apps' import { deleteApp, fetchAppDetail, updateAppSiteConfig } from '@/service/apps'
import AppIcon from '@/app/components/base/app-icon' import AppIcon from '@/app/components/base/app-icon'
import AppsContext, { useAppContext } from '@/context/app-context' import AppsContext, { useAppContext } from '@/context/app-context'
import type { HtmlContentProps } from '@/app/components/base/popover'
import CustomPopover from '@/app/components/base/popover' import CustomPopover from '@/app/components/base/popover'
import Divider from '@/app/components/base/divider' import Divider from '@/app/components/base/divider'
import { asyncRunSafe } from '@/utils' import { asyncRunSafe } from '@/utils'
...@@ -100,14 +101,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => { ...@@ -100,14 +101,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
[app.id], [app.id],
) )
const Operations = (props: any) => { const Operations = (props: HtmlContentProps) => {
const onClickSettings = async (e: React.MouseEvent<HTMLButtonElement>) => { const onClickSettings = async (e: React.MouseEvent<HTMLButtonElement>) => {
props?.onClose() props.onClick?.()
e.preventDefault() e.preventDefault()
await getAppDetail() await getAppDetail()
} }
const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => { const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
props?.onClose() props.onClick?.()
e.preventDefault() e.preventDefault()
setShowConfirmDelete(true) setShowConfirmDelete(true)
} }
...@@ -157,6 +158,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => { ...@@ -157,6 +158,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
) )
} }
className={'!w-[128px] h-fit !z-20'} className={'!w-[128px] h-fit !z-20'}
manualClose
/>} />}
</div> </div>
<div className={style.listItemDescription}> <div className={style.listItemDescription}>
......
...@@ -2,9 +2,14 @@ import { Popover, Transition } from '@headlessui/react' ...@@ -2,9 +2,14 @@ import { Popover, Transition } from '@headlessui/react'
import { Fragment, cloneElement, useRef } from 'react' import { Fragment, cloneElement, useRef } from 'react'
import s from './style.module.css' import s from './style.module.css'
export type HtmlContentProps = {
onClose?: () => void
onClick?: () => void
}
type IPopover = { type IPopover = {
className?: string className?: string
htmlContent: React.ReactNode htmlContent: React.ReactElement<HtmlContentProps>
trigger?: 'click' | 'hover' trigger?: 'click' | 'hover'
position?: 'bottom' | 'br' position?: 'bottom' | 'br'
btnElement?: string | React.ReactNode btnElement?: string | React.ReactNode
...@@ -84,7 +89,7 @@ export default function CustomPopover({ ...@@ -84,7 +89,7 @@ export default function CustomPopover({
}) })
} }
> >
{cloneElement(htmlContent as React.ReactElement, { {cloneElement(htmlContent as React.ReactElement<HtmlContentProps>, {
onClose: () => onMouseLeave(open), onClose: () => onMouseLeave(open),
...(manualClose ...(manualClose
? { ? {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment