component.tsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import {
  2. memo,
  3. useEffect,
  4. useState,
  5. } from 'react'
  6. import { useTranslation } from 'react-i18next'
  7. import {
  8. COMMAND_PRIORITY_EDITOR,
  9. } from 'lexical'
  10. import { mergeRegister } from '@lexical/utils'
  11. import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
  12. import { useSelectOrDelete } from '../../hooks'
  13. import type { WorkflowNodesMap } from './node'
  14. import { WorkflowVariableBlockNode } from './node'
  15. import {
  16. DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND,
  17. UPDATE_WORKFLOW_NODES_MAP,
  18. } from './index'
  19. import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
  20. import { VarBlockIcon } from '@/app/components/workflow/block-icon'
  21. import { Line3 } from '@/app/components/base/icons/src/public/common'
  22. import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
  23. import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
  24. import TooltipPlus from '@/app/components/base/tooltip-plus'
  25. type WorkflowVariableBlockComponentProps = {
  26. nodeKey: string
  27. variables: string[]
  28. workflowNodesMap: WorkflowNodesMap
  29. }
  30. const WorkflowVariableBlockComponent = ({
  31. nodeKey,
  32. variables,
  33. workflowNodesMap = {},
  34. }: WorkflowVariableBlockComponentProps) => {
  35. const { t } = useTranslation()
  36. const [editor] = useLexicalComposerContext()
  37. const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND)
  38. const variablesLength = variables.length
  39. const lastVariable = isSystemVar(variables) ? variables.join('.') : variables[variablesLength - 1]
  40. const [localWorkflowNodesMap, setLocalWorkflowNodesMap] = useState<WorkflowNodesMap>(workflowNodesMap)
  41. const node = localWorkflowNodesMap![variables[0]]
  42. useEffect(() => {
  43. if (!editor.hasNodes([WorkflowVariableBlockNode]))
  44. throw new Error('WorkflowVariableBlockPlugin: WorkflowVariableBlock not registered on editor')
  45. return mergeRegister(
  46. editor.registerCommand(
  47. UPDATE_WORKFLOW_NODES_MAP,
  48. (workflowNodesMap: WorkflowNodesMap) => {
  49. setLocalWorkflowNodesMap(workflowNodesMap)
  50. return true
  51. },
  52. COMMAND_PRIORITY_EDITOR,
  53. ),
  54. )
  55. }, [editor])
  56. const Item = (
  57. <div
  58. className={`
  59. mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border
  60. ${isSelected ? ' border-[#84ADFF] bg-[#F5F8FF]' : ' border-black/5 bg-white'}
  61. ${!node && '!border-[#F04438] !bg-[#FEF3F2]'}
  62. `}
  63. ref={ref}
  64. >
  65. <div className='flex items-center'>
  66. {
  67. node?.type && (
  68. <div className='p-[1px]'>
  69. <VarBlockIcon
  70. className='!text-gray-500'
  71. type={node?.type}
  72. />
  73. </div>
  74. )
  75. }
  76. <div className='shrink-0 mx-0.5 text-xs font-medium text-gray-500 truncate' title={node?.title} style={{
  77. }}>{node?.title}</div>
  78. <Line3 className='mr-0.5 text-gray-300'></Line3>
  79. </div>
  80. <div className='flex items-center text-primary-600'>
  81. <Variable02 className='w-3.5 h-3.5' />
  82. <div className='shrink-0 ml-0.5 text-xs font-medium truncate' title={lastVariable}>{lastVariable}</div>
  83. {
  84. !node && (
  85. <AlertCircle className='ml-0.5 w-3 h-3 text-[#D92D20]' />
  86. )
  87. }
  88. </div>
  89. </div>
  90. )
  91. if (!node) {
  92. return (
  93. <TooltipPlus popupContent={t('workflow.errorMsg.invalidVariable')}>
  94. {Item}
  95. </TooltipPlus>
  96. )
  97. }
  98. return Item
  99. }
  100. export default memo(WorkflowVariableBlockComponent)