mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-13 21:06:01 +08:00
Optimize the event handling and rendering logic of the component picker (#19232)
This commit is contained in:
parent
c5568f756f
commit
5a6f20d575
@ -120,10 +120,8 @@ const ComponentPicker = ({
|
|||||||
}, [editor, checkForTriggerMatch, triggerString])
|
}, [editor, checkForTriggerMatch, triggerString])
|
||||||
|
|
||||||
const handleClose = useCallback(() => {
|
const handleClose = useCallback(() => {
|
||||||
ReactDOM.flushSync(() => {
|
const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' })
|
||||||
const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' })
|
editor.dispatchCommand(KEY_ESCAPE_COMMAND, escapeEvent)
|
||||||
editor.dispatchCommand(KEY_ESCAPE_COMMAND, escapeEvent)
|
|
||||||
})
|
|
||||||
}, [editor])
|
}, [editor])
|
||||||
|
|
||||||
const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
|
const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
|
||||||
@ -132,7 +130,11 @@ const ComponentPicker = ({
|
|||||||
) => {
|
) => {
|
||||||
if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show)))
|
if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show)))
|
||||||
return null
|
return null
|
||||||
refs.setReference(anchorElementRef.current)
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (anchorElementRef.current)
|
||||||
|
refs.setReference(anchorElementRef.current)
|
||||||
|
}, 0)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -149,7 +151,6 @@ const ComponentPicker = ({
|
|||||||
visibility: isPositioned ? 'visible' : 'hidden',
|
visibility: isPositioned ? 'visible' : 'hidden',
|
||||||
}}
|
}}
|
||||||
ref={refs.setFloating}
|
ref={refs.setFloating}
|
||||||
data-testid="component-picker-container"
|
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
workflowVariableBlock?.show && (
|
workflowVariableBlock?.show && (
|
||||||
@ -173,7 +174,7 @@ const ComponentPicker = ({
|
|||||||
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
|
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
<div data-testid="options-list">
|
<div>
|
||||||
{
|
{
|
||||||
options.map((option, index) => (
|
options.map((option, index) => (
|
||||||
<Fragment key={option.key}>
|
<Fragment key={option.key}>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user