Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>tags/1.9.0
| @@ -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} | |||
| /> | |||
| ) | |||