|
|
|
@ -31,6 +31,7 @@ import { useOptions } from './hooks'
|
|
|
|
import type { PickerBlockMenuOption } from './menu'
|
|
|
|
import type { PickerBlockMenuOption } from './menu'
|
|
|
|
import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
|
|
|
|
import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
|
|
|
|
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
|
|
|
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
|
|
|
|
|
|
|
import { KEY_ESCAPE_COMMAND } from 'lexical'
|
|
|
|
|
|
|
|
|
|
|
|
type ComponentPickerProps = {
|
|
|
|
type ComponentPickerProps = {
|
|
|
|
triggerString: string
|
|
|
|
triggerString: string
|
|
|
|
@ -118,6 +119,13 @@ const ComponentPicker = ({
|
|
|
|
editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, variables)
|
|
|
|
editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, variables)
|
|
|
|
}, [editor, checkForTriggerMatch, triggerString])
|
|
|
|
}, [editor, checkForTriggerMatch, triggerString])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleClose = useCallback(() => {
|
|
|
|
|
|
|
|
ReactDOM.flushSync(() => {
|
|
|
|
|
|
|
|
const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' })
|
|
|
|
|
|
|
|
editor.dispatchCommand(KEY_ESCAPE_COMMAND, escapeEvent)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}, [editor])
|
|
|
|
|
|
|
|
|
|
|
|
const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
|
|
|
|
const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
|
|
|
|
anchorElementRef,
|
|
|
|
anchorElementRef,
|
|
|
|
{ options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
|
|
|
|
{ options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
|
|
|
|
@ -141,51 +149,54 @@ const ComponentPicker = ({
|
|
|
|
visibility: isPositioned ? 'visible' : 'hidden',
|
|
|
|
visibility: isPositioned ? 'visible' : 'hidden',
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
ref={refs.setFloating}
|
|
|
|
ref={refs.setFloating}
|
|
|
|
|
|
|
|
data-testid="component-picker-container"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
options.map((option, index) => (
|
|
|
|
workflowVariableBlock?.show && (
|
|
|
|
<Fragment key={option.key}>
|
|
|
|
<div className='p-1'>
|
|
|
|
{
|
|
|
|
<VarReferenceVars
|
|
|
|
// Divider
|
|
|
|
searchBoxClassName='mt-1'
|
|
|
|
index !== 0 && options.at(index - 1)?.group !== option.group && (
|
|
|
|
vars={workflowVariableOptions}
|
|
|
|
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
|
|
|
|
onChange={(variables: string[]) => {
|
|
|
|
)
|
|
|
|
handleSelectWorkflowVariable(variables)
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
{option.renderMenuOption({
|
|
|
|
maxHeightClass='max-h-[34vh]'
|
|
|
|
queryString,
|
|
|
|
isSupportFileVar={isSupportFileVar}
|
|
|
|
isSelected: selectedIndex === index,
|
|
|
|
onClose={handleClose}
|
|
|
|
onSelect: () => {
|
|
|
|
onBlur={handleClose}
|
|
|
|
selectOptionAndCleanUp(option)
|
|
|
|
/>
|
|
|
|
},
|
|
|
|
</div>
|
|
|
|
onSetHighlight: () => {
|
|
|
|
)
|
|
|
|
setHighlightedIndex(index)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
})}
|
|
|
|
|
|
|
|
</Fragment>
|
|
|
|
|
|
|
|
))
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
{
|
|
|
|
{
|
|
|
|
workflowVariableBlock?.show && (
|
|
|
|
workflowVariableBlock?.show && !!options.length && (
|
|
|
|
<>
|
|
|
|
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
|
|
|
|
{
|
|
|
|
|
|
|
|
(!!options.length) && (
|
|
|
|
|
|
|
|
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
<div className='p-1'>
|
|
|
|
|
|
|
|
<VarReferenceVars
|
|
|
|
|
|
|
|
hideSearch
|
|
|
|
|
|
|
|
vars={workflowVariableOptions}
|
|
|
|
|
|
|
|
onChange={(variables: string[]) => {
|
|
|
|
|
|
|
|
handleSelectWorkflowVariable(variables)
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
maxHeightClass='max-h-[34vh]'
|
|
|
|
|
|
|
|
isSupportFileVar={isSupportFileVar}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
<div data-testid="options-list">
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
options.map((option, index) => (
|
|
|
|
|
|
|
|
<Fragment key={option.key}>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
// Divider
|
|
|
|
|
|
|
|
index !== 0 && options.at(index - 1)?.group !== option.group && (
|
|
|
|
|
|
|
|
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
{option.renderMenuOption({
|
|
|
|
|
|
|
|
queryString,
|
|
|
|
|
|
|
|
isSelected: selectedIndex === index,
|
|
|
|
|
|
|
|
onSelect: () => {
|
|
|
|
|
|
|
|
selectOptionAndCleanUp(option)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
onSetHighlight: () => {
|
|
|
|
|
|
|
|
setHighlightedIndex(index)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
})}
|
|
|
|
|
|
|
|
</Fragment>
|
|
|
|
|
|
|
|
))
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>,
|
|
|
|
</div>,
|
|
|
|
anchorElementRef.current,
|
|
|
|
anchorElementRef.current,
|
|
|
|
@ -193,7 +204,7 @@ const ComponentPicker = ({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}, [allFlattenOptions.length, workflowVariableBlock?.show, refs, isPositioned, floatingStyles, queryString, workflowVariableOptions, handleSelectWorkflowVariable])
|
|
|
|
}, [allFlattenOptions.length, workflowVariableBlock?.show, refs, isPositioned, floatingStyles, queryString, workflowVariableOptions, handleSelectWorkflowVariable, handleClose, isSupportFileVar])
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<LexicalTypeaheadMenuPlugin
|
|
|
|
<LexicalTypeaheadMenuPlugin
|
|
|
|
|
lska367
1 year ago
committed by
GitHub