mirror of https://github.com/langgenius/dify.git
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:
parent
8f86f5749d
commit
ffa163a8a8
|
|
@ -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(
|
||||
() => ({
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue