Pārlūkot izejas kodu

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

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
tags/1.9.0
Wu Tianwei pirms 1 mēnesi
vecāks
revīzija
ffa163a8a8
Revīzijas autora e-pasta adrese nav piesaistīta nevienam kontam

+ 4
- 15
web/app/components/base/portal-to-follow-elem/index.tsx Parādīt failu

@@ -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(
() => ({

+ 17
- 3
web/app/components/header/account-setting/data-source-page-new/configure.tsx Parādīt failu

@@ -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}
/>
)

Notiek ielāde…
Atcelt
Saglabāt