refactor: simplify portal interactions and manage state in Configure component (#25906)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Wu Tianwei 2025-09-18 15:57:33 +08:00 committed by GitHub
parent 8f86f5749d
commit ffa163a8a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 18 deletions

View File

@ -1,5 +1,5 @@
'use client'
import React, { useCallback, useMemo, useState } from 'react'
import React, { useCallback, useState } from 'react'
import {
FloatingPortal,
autoUpdate,
@ -7,7 +7,6 @@ import {
offset,
shift,
size,
useClick,
useDismiss,
useFloating,
useFocus,
@ -41,7 +40,6 @@ export function usePortalToFollowElem({
}: PortalToFollowElemOptions = {}) {
const [localOpen, setLocalOpen] = useState(false)
const open = controlledOpen ?? localOpen
const isControlled = controlledOpen !== undefined
const handleOpenChange = useCallback((newOpen: boolean) => {
setLocalOpen(newOpen)
setControlledOpen?.(newOpen)
@ -73,24 +71,15 @@ export function usePortalToFollowElem({
const hover = useHover(context, {
move: false,
enabled: !isControlled,
enabled: controlledOpen === undefined,
})
const focus = useFocus(context, {
enabled: !isControlled,
enabled: controlledOpen === undefined,
})
const dismiss = useDismiss(context)
const role = useRole(context, { role: 'tooltip' })
const click = useClick(context)
const interactionsArray = useMemo(() => {
const result = [hover, focus, dismiss, role]
if (!isControlled)
result.push(click)
return result
}, [isControlled, hover, focus, dismiss, role, click])
const interactions = useInteractions(interactionsArray)
const interactions = useInteractions([hover, focus, dismiss, role])
return React.useMemo(
() => ({

View File

@ -1,6 +1,8 @@
import {
memo,
useCallback,
useMemo,
useState,
} from 'react'
import {
RiAddLine,
@ -36,6 +38,7 @@ const Configure = ({
disabled,
}: ConfigureProps) => {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
const canApiKey = item.credential_schema?.length
const oAuthData = item.oauth_schema || {}
const canOAuth = oAuthData.client_schema?.length
@ -53,16 +56,27 @@ const Configure = ({
}
}, [pluginPayload, t])
const handleToggle = useCallback(() => {
setOpen(v => !v)
}, [])
const handleUpdate = useCallback(() => {
setOpen(false)
onUpdate?.()
}, [onUpdate])
return (
<>
<PortalToFollowElem
open={open}
onOpenChange={setOpen}
placement='bottom-end'
offset={{
mainAxis: 4,
crossAxis: -4,
}}
>
<PortalToFollowElemTrigger>
<PortalToFollowElemTrigger onClick={handleToggle}>
<Button
variant='secondary-accent'
>
@ -76,7 +90,7 @@ const Configure = ({
!!canOAuth && (
<AddOAuthButton
{...oAuthButtonProps}
onUpdate={onUpdate}
onUpdate={handleUpdate}
oAuthData={{
schema: oAuthData.client_schema || [],
is_oauth_custom_client_enabled: oAuthData.is_oauth_custom_client_enabled,
@ -102,7 +116,7 @@ const Configure = ({
<AddApiKeyButton
{...apiKeyButtonProps}
formSchemas={item.credential_schema}
onUpdate={onUpdate}
onUpdate={handleUpdate}
disabled={disabled}
/>
)