Spaces:
Build error
Build error
File size: 3,997 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import type { NodeProps } from 'reactflow'
import { NodeSourceHandle } from '../_base/components/node-handle'
import { isEmptyRelatedOperator } from './utils'
import type { Condition, IfElseNodeType } from './types'
import ConditionValue from './components/condition-value'
import ConditionFilesListValue from './components/condition-files-list-value'
const i18nPrefix = 'workflow.nodes.ifElse'
const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
const { data } = props
const { t } = useTranslation()
const { cases } = data
const casesLength = cases.length
const checkIsConditionSet = useCallback((condition: Condition) => {
if (!condition.variable_selector || condition.variable_selector.length === 0)
return false
if (condition.sub_variable_condition) {
const isSet = condition.sub_variable_condition.conditions.every((c) => {
if (!c.comparison_operator)
return false
if (isEmptyRelatedOperator(c.comparison_operator!))
return true
return !!c.value
})
return isSet
}
else {
if (isEmptyRelatedOperator(condition.comparison_operator!))
return true
return !!condition.value
}
}, [])
const conditionNotSet = (<div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-text-secondary bg-workflow-block-parma-bg rounded-md'>
{t(`${i18nPrefix}.conditionNotSetup`)}
</div>)
return (
<div className='px-3'>
{
cases.map((caseItem, index) => (
<div key={caseItem.case_id}>
<div className='relative flex items-center h-6 px-1'>
<div className='flex items-center justify-between w-full'>
<div className='text-[10px] font-semibold text-text-tertiary'>
{casesLength > 1 && `CASE ${index + 1}`}
</div>
<div className='text-[12px] font-semibold text-text-secondary'>{index === 0 ? 'IF' : 'ELIF'}</div>
</div>
<NodeSourceHandle
{...props}
handleId={caseItem.case_id}
handleClassName='!top-1/2 !-right-[21px] !-translate-y-1/2'
/>
</div>
<div className='space-y-0.5'>
{caseItem.conditions.map((condition, i) => (
<div key={condition.id} className='relative'>
{
checkIsConditionSet(condition)
? (
(!isEmptyRelatedOperator(condition.comparison_operator!) && condition.sub_variable_condition)
? (
<ConditionFilesListValue condition={condition} />
)
: (
<ConditionValue
variableSelector={condition.variable_selector!}
operator={condition.comparison_operator!}
value={condition.value}
/>
)
)
: conditionNotSet}
{i !== caseItem.conditions.length - 1 && (
<div className='absolute z-10 right-1 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
)}
</div>
))}
</div>
</div>
))
}
<div className='relative flex items-center h-6 px-1'>
<div className='w-full text-xs font-semibold text-right text-text-secondary'>ELSE</div>
<NodeSourceHandle
{...props}
handleId='false'
handleClassName='!top-1/2 !-right-[21px] !-translate-y-1/2'
/>
</div>
</div>
)
}
export default React.memo(IfElseNode)
|