feat: workflow if-else support elif (#6072)
zxhlyh
2 years ago
committed by
GitHub
parent
a62325ac87
commit
ebba124c5c
@ -0,0 +1,66 @@
|
|||||||
|
import { useMemo } from 'react'
|
||||||
|
import { useNodes } from 'reactflow'
|
||||||
|
import { capitalize } from 'lodash-es'
|
||||||
|
import { VarBlockIcon } from '@/app/components/workflow/block-icon'
|
||||||
|
import type {
|
||||||
|
CommonNodeType,
|
||||||
|
ValueSelector,
|
||||||
|
VarType,
|
||||||
|
} from '@/app/components/workflow/types'
|
||||||
|
import { BlockEnum } from '@/app/components/workflow/types'
|
||||||
|
import { Line3 } from '@/app/components/base/icons/src/public/common'
|
||||||
|
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
|
||||||
|
import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||||
|
|
||||||
|
type VariableTagProps = {
|
||||||
|
valueSelector: ValueSelector
|
||||||
|
varType: VarType
|
||||||
|
}
|
||||||
|
const VariableTag = ({
|
||||||
|
valueSelector,
|
||||||
|
varType,
|
||||||
|
}: VariableTagProps) => {
|
||||||
|
const nodes = useNodes<CommonNodeType>()
|
||||||
|
const node = useMemo(() => {
|
||||||
|
if (isSystemVar(valueSelector))
|
||||||
|
return nodes.find(node => node.data.type === BlockEnum.Start)
|
||||||
|
|
||||||
|
return nodes.find(node => node.id === valueSelector[0])
|
||||||
|
}, [nodes, valueSelector])
|
||||||
|
|
||||||
|
const variableName = isSystemVar(valueSelector) ? valueSelector.slice(0).join('.') : valueSelector.slice(1).join('.')
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='inline-flex items-center px-1.5 max-w-full h-6 text-xs rounded-md border-[0.5px] border-[rgba(16, 2440,0.08)] bg-white shadow-xs'>
|
||||||
|
{
|
||||||
|
node && (
|
||||||
|
<VarBlockIcon
|
||||||
|
className='shrink-0 mr-0.5 text-[#354052]'
|
||||||
|
type={node!.data.type}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<div
|
||||||
|
className='max-w-[60px] truncate text-[#354052] font-medium'
|
||||||
|
title={node?.data.title}
|
||||||
|
>
|
||||||
|
{node?.data.title}
|
||||||
|
</div>
|
||||||
|
<Line3 className='shrink-0 mx-0.5' />
|
||||||
|
<Variable02 className='shrink-0 mr-0.5 w-3.5 h-3.5 text-[#155AEF]' />
|
||||||
|
<div
|
||||||
|
className='truncate text-[#155AEF] font-medium'
|
||||||
|
title={variableName}
|
||||||
|
>
|
||||||
|
{variableName}
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
varType && (
|
||||||
|
<div className='shrink-0 ml-0.5 text-[#676F83]'>{capitalize(varType)}</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VariableTag
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import {
|
||||||
|
useCallback,
|
||||||
|
useState,
|
||||||
|
} from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { RiAddLine } from '@remixicon/react'
|
||||||
|
import type { HandleAddCondition } from '../types'
|
||||||
|
import Button from '@/app/components/base/button'
|
||||||
|
import {
|
||||||
|
PortalToFollowElem,
|
||||||
|
PortalToFollowElemContent,
|
||||||
|
PortalToFollowElemTrigger,
|
||||||
|
} from '@/app/components/base/portal-to-follow-elem'
|
||||||
|
import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
|
||||||
|
import type {
|
||||||
|
NodeOutPutVar,
|
||||||
|
ValueSelector,
|
||||||
|
Var,
|
||||||
|
} from '@/app/components/workflow/types'
|
||||||
|
|
||||||
|
type ConditionAddProps = {
|
||||||
|
className?: string
|
||||||
|
caseId: string
|
||||||
|
variables: NodeOutPutVar[]
|
||||||
|
onSelectVariable: HandleAddCondition
|
||||||
|
disabled?: boolean
|
||||||
|
}
|
||||||
|
const ConditionAdd = ({
|
||||||
|
className,
|
||||||
|
caseId,
|
||||||
|
variables,
|
||||||
|
onSelectVariable,
|
||||||
|
disabled,
|
||||||
|
}: ConditionAddProps) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
|
||||||
|
const handleSelectVariable = useCallback((valueSelector: ValueSelector, varItem: Var) => {
|
||||||
|
onSelectVariable(caseId, valueSelector, varItem)
|
||||||
|
setOpen(false)
|
||||||
|
}, [caseId, onSelectVariable, setOpen])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PortalToFollowElem
|
||||||
|
open={open}
|
||||||
|
onOpenChange={setOpen}
|
||||||
|
placement='bottom-start'
|
||||||
|
offset={{
|
||||||
|
mainAxis: 4,
|
||||||
|
crossAxis: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
|
||||||
|
<Button
|
||||||
|
size='small'
|
||||||
|
className={className}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
<RiAddLine className='mr-1 w-3.5 h-3.5' />
|
||||||
|
{t('workflow.nodes.ifElse.addCondition')}
|
||||||
|
</Button>
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-[1000]'>
|
||||||
|
<div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
|
||||||
|
<VarReferenceVars
|
||||||
|
vars={variables}
|
||||||
|
onChange={handleSelectVariable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemContent>
|
||||||
|
</PortalToFollowElem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConditionAdd
|
||||||
@ -1,250 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import type { FC } from 'react'
|
|
||||||
import React, { useCallback, useEffect } from 'react'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
import {
|
|
||||||
RiDeleteBinLine,
|
|
||||||
} from '@remixicon/react'
|
|
||||||
import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
|
|
||||||
import { isComparisonOperatorNeedTranslate } from '../utils'
|
|
||||||
import { VarType } from '../../../types'
|
|
||||||
import cn from '@/utils/classnames'
|
|
||||||
import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
|
|
||||||
import { ComparisonOperator, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
|
|
||||||
import type { ValueSelector, Var } from '@/app/components/workflow/types'
|
|
||||||
import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
|
|
||||||
import Selector from '@/app/components/workflow/nodes/_base/components/selector'
|
|
||||||
import Toast from '@/app/components/base/toast'
|
|
||||||
|
|
||||||
const i18nPrefix = 'workflow.nodes.ifElse'
|
|
||||||
|
|
||||||
const Line = (
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="163" height="2" viewBox="0 0 163 2" fill="none">
|
|
||||||
<path d="M0 1H162.5" stroke="url(#paint0_linear_641_36452)" />
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="paint0_linear_641_36452" x1="162.5" y1="9.99584" x2="6.6086e-06" y2="9.94317" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stopColor="#F3F4F6" />
|
|
||||||
<stop offset="1" stopColor="#F3F4F6" stopOpacity="0" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
|
|
||||||
const getOperators = (type?: VarType) => {
|
|
||||||
switch (type) {
|
|
||||||
case VarType.string:
|
|
||||||
return [
|
|
||||||
ComparisonOperator.contains,
|
|
||||||
ComparisonOperator.notContains,
|
|
||||||
ComparisonOperator.startWith,
|
|
||||||
ComparisonOperator.endWith,
|
|
||||||
ComparisonOperator.is,
|
|
||||||
ComparisonOperator.isNot,
|
|
||||||
ComparisonOperator.empty,
|
|
||||||
ComparisonOperator.notEmpty,
|
|
||||||
]
|
|
||||||
case VarType.number:
|
|
||||||
return [
|
|
||||||
ComparisonOperator.equal,
|
|
||||||
ComparisonOperator.notEqual,
|
|
||||||
ComparisonOperator.largerThan,
|
|
||||||
ComparisonOperator.lessThan,
|
|
||||||
ComparisonOperator.largerThanOrEqual,
|
|
||||||
ComparisonOperator.lessThanOrEqual,
|
|
||||||
ComparisonOperator.is,
|
|
||||||
ComparisonOperator.isNot,
|
|
||||||
ComparisonOperator.empty,
|
|
||||||
ComparisonOperator.notEmpty,
|
|
||||||
]
|
|
||||||
case VarType.arrayString:
|
|
||||||
case VarType.arrayNumber:
|
|
||||||
return [
|
|
||||||
ComparisonOperator.contains,
|
|
||||||
ComparisonOperator.notContains,
|
|
||||||
ComparisonOperator.empty,
|
|
||||||
ComparisonOperator.notEmpty,
|
|
||||||
]
|
|
||||||
case VarType.array:
|
|
||||||
case VarType.arrayObject:
|
|
||||||
return [
|
|
||||||
ComparisonOperator.empty,
|
|
||||||
ComparisonOperator.notEmpty,
|
|
||||||
]
|
|
||||||
default:
|
|
||||||
return [
|
|
||||||
ComparisonOperator.is,
|
|
||||||
ComparisonOperator.isNot,
|
|
||||||
ComparisonOperator.empty,
|
|
||||||
ComparisonOperator.notEmpty,
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
type ItemProps = {
|
|
||||||
readonly: boolean
|
|
||||||
nodeId: string
|
|
||||||
payload: Condition
|
|
||||||
varType?: VarType
|
|
||||||
onChange: (newItem: Condition) => void
|
|
||||||
canRemove: boolean
|
|
||||||
onRemove?: () => void
|
|
||||||
isShowLogicalOperator?: boolean
|
|
||||||
logicalOperator: LogicalOperator
|
|
||||||
onLogicalOperatorToggle: () => void
|
|
||||||
filterVar: (varPayload: Var) => boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const Item: FC<ItemProps> = ({
|
|
||||||
readonly,
|
|
||||||
nodeId,
|
|
||||||
payload,
|
|
||||||
varType = VarType.string,
|
|
||||||
onChange,
|
|
||||||
canRemove,
|
|
||||||
onRemove = () => { },
|
|
||||||
isShowLogicalOperator,
|
|
||||||
logicalOperator,
|
|
||||||
onLogicalOperatorToggle,
|
|
||||||
filterVar,
|
|
||||||
}) => {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const isValueReadOnly = payload.comparison_operator ? [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull].includes(payload.comparison_operator) : false
|
|
||||||
|
|
||||||
const handleVarReferenceChange = useCallback((value: ValueSelector | string) => {
|
|
||||||
onChange({
|
|
||||||
...payload,
|
|
||||||
variable_selector: value as ValueSelector,
|
|
||||||
})
|
|
||||||
}, [onChange, payload])
|
|
||||||
|
|
||||||
// change to default operator if the variable type is changed
|
|
||||||
useEffect(() => {
|
|
||||||
if (varType && payload.comparison_operator) {
|
|
||||||
if (!getOperators(varType).includes(payload.comparison_operator)) {
|
|
||||||
onChange({
|
|
||||||
...payload,
|
|
||||||
comparison_operator: getOperators(varType)[0],
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [varType, payload])
|
|
||||||
|
|
||||||
const handleValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
onChange({
|
|
||||||
...payload,
|
|
||||||
value: e.target.value,
|
|
||||||
})
|
|
||||||
}, [onChange, payload])
|
|
||||||
|
|
||||||
const handleComparisonOperatorChange = useCallback((v: ComparisonOperator) => {
|
|
||||||
onChange({
|
|
||||||
...payload,
|
|
||||||
comparison_operator: v,
|
|
||||||
})
|
|
||||||
}, [onChange, payload])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='space-y-2'>
|
|
||||||
{isShowLogicalOperator && (
|
|
||||||
<div className='flex items-center justify-center select-none'>
|
|
||||||
<div className='flex items-center '>
|
|
||||||
{Line}
|
|
||||||
<div
|
|
||||||
className='shrink-0 mx-1 flex items-center h-[22px] pl-2 pr-1.5 border border-gray-200 rounded-lg bg-white shadow-xs space-x-0.5 text-primary-600 cursor-pointer'
|
|
||||||
onClick={onLogicalOperatorToggle}
|
|
||||||
>
|
|
||||||
<div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.${logicalOperator === LogicalOperator.and ? 'and' : 'or'}`)}</div>
|
|
||||||
<RefreshCw05 className='w-3 h-3' />
|
|
||||||
</div>
|
|
||||||
<div className=' rotate-180'>
|
|
||||||
{Line}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
<div className='flex items-center space-x-1'>
|
|
||||||
<VarReferencePicker
|
|
||||||
nodeId={nodeId}
|
|
||||||
readonly={readonly}
|
|
||||||
isShowNodeName
|
|
||||||
className='min-w-[162px] flex-grow'
|
|
||||||
value={payload.variable_selector}
|
|
||||||
onChange={handleVarReferenceChange}
|
|
||||||
filterVar={filterVar}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Selector
|
|
||||||
popupClassName='top-[34px]'
|
|
||||||
itemClassName='capitalize'
|
|
||||||
trigger={
|
|
||||||
<div
|
|
||||||
onClick={(e) => {
|
|
||||||
if (readonly) {
|
|
||||||
e.stopPropagation()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!payload.variable_selector || payload.variable_selector.length === 0) {
|
|
||||||
e.stopPropagation()
|
|
||||||
Toast.notify({
|
|
||||||
message: t(`${i18nPrefix}.notSetVariable`),
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className={cn(!readonly && 'cursor-pointer', 'shrink-0 w-[100px] whitespace-nowrap flex items-center h-8 justify-between px-2.5 rounded-lg bg-gray-100 capitalize')}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
!payload.comparison_operator
|
|
||||||
? <div className='text-[13px] font-normal text-gray-400'>{t(`${i18nPrefix}.operator`)}</div>
|
|
||||||
: <div className='text-[13px] font-normal text-gray-900'>{isComparisonOperatorNeedTranslate(payload.comparison_operator) ? t(`${i18nPrefix}.comparisonOperator.${payload.comparison_operator}`) : payload.comparison_operator}</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
readonly={readonly}
|
|
||||||
value={payload.comparison_operator || ''}
|
|
||||||
options={getOperators(varType).map((o) => {
|
|
||||||
return {
|
|
||||||
label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
|
|
||||||
value: o,
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
onChange={handleComparisonOperatorChange}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<input
|
|
||||||
readOnly={readonly || isValueReadOnly || !varType}
|
|
||||||
onClick={() => {
|
|
||||||
if (readonly)
|
|
||||||
return
|
|
||||||
|
|
||||||
if (!varType) {
|
|
||||||
Toast.notify({
|
|
||||||
message: t(`${i18nPrefix}.notSetVariable`),
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={!isValueReadOnly ? payload.value : ''}
|
|
||||||
onChange={handleValueChange}
|
|
||||||
placeholder={(!readonly && !isValueReadOnly) ? t(`${i18nPrefix}.enterValue`)! : ''}
|
|
||||||
className='min-w-[80px] flex-grow h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
|
|
||||||
type='text'
|
|
||||||
/>
|
|
||||||
{!readonly && (
|
|
||||||
<div
|
|
||||||
className={cn(canRemove ? 'text-gray-500 bg-gray-100 hover:bg-gray-200 cursor-pointer' : 'bg-gray-25 text-gray-300', 'p-2 rounded-lg ')}
|
|
||||||
onClick={canRemove ? onRemove : () => { }}
|
|
||||||
>
|
|
||||||
<RiDeleteBinLine className='w-4 h-4 ' />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div >
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default React.memo(Item)
|
|
||||||
@ -1,91 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import type { FC } from 'react'
|
|
||||||
import React, { useCallback } from 'react'
|
|
||||||
import produce from 'immer'
|
|
||||||
import type { Var, VarType } from '../../../types'
|
|
||||||
import Item from './condition-item'
|
|
||||||
import cn from '@/utils/classnames'
|
|
||||||
import type { Condition, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
nodeId: string
|
|
||||||
className?: string
|
|
||||||
readonly: boolean
|
|
||||||
list: Condition[]
|
|
||||||
varTypesList: (VarType | undefined)[]
|
|
||||||
onChange: (newList: Condition[]) => void
|
|
||||||
logicalOperator: LogicalOperator
|
|
||||||
onLogicalOperatorToggle: () => void
|
|
||||||
filterVar: (varPayload: Var) => boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const ConditionList: FC<Props> = ({
|
|
||||||
className,
|
|
||||||
readonly,
|
|
||||||
nodeId,
|
|
||||||
list,
|
|
||||||
varTypesList,
|
|
||||||
onChange,
|
|
||||||
logicalOperator,
|
|
||||||
onLogicalOperatorToggle,
|
|
||||||
filterVar,
|
|
||||||
}) => {
|
|
||||||
const handleItemChange = useCallback((index: number) => {
|
|
||||||
return (newItem: Condition) => {
|
|
||||||
const newList = produce(list, (draft) => {
|
|
||||||
draft[index] = newItem
|
|
||||||
})
|
|
||||||
onChange(newList)
|
|
||||||
}
|
|
||||||
}, [list, onChange])
|
|
||||||
|
|
||||||
const handleItemRemove = useCallback((index: number) => {
|
|
||||||
return () => {
|
|
||||||
const newList = produce(list, (draft) => {
|
|
||||||
draft.splice(index, 1)
|
|
||||||
})
|
|
||||||
onChange(newList)
|
|
||||||
}
|
|
||||||
}, [list, onChange])
|
|
||||||
|
|
||||||
const canRemove = list.length > 1
|
|
||||||
|
|
||||||
if (list.length === 0)
|
|
||||||
return null
|
|
||||||
return (
|
|
||||||
<div className={cn(className, 'space-y-2')}>
|
|
||||||
<Item
|
|
||||||
readonly={readonly}
|
|
||||||
nodeId={nodeId}
|
|
||||||
payload={list[0]}
|
|
||||||
varType={varTypesList[0]}
|
|
||||||
onChange={handleItemChange(0)}
|
|
||||||
canRemove={canRemove}
|
|
||||||
onRemove={handleItemRemove(0)}
|
|
||||||
logicalOperator={logicalOperator}
|
|
||||||
onLogicalOperatorToggle={onLogicalOperatorToggle}
|
|
||||||
filterVar={filterVar}
|
|
||||||
/>
|
|
||||||
{
|
|
||||||
list.length > 1 && (
|
|
||||||
list.slice(1).map((item, i) => (
|
|
||||||
<Item
|
|
||||||
key={item.id}
|
|
||||||
readonly={readonly}
|
|
||||||
nodeId={nodeId}
|
|
||||||
payload={item}
|
|
||||||
varType={varTypesList[i + 1]}
|
|
||||||
onChange={handleItemChange(i + 1)}
|
|
||||||
canRemove={canRemove}
|
|
||||||
onRemove={handleItemRemove(i + 1)}
|
|
||||||
isShowLogicalOperator
|
|
||||||
logicalOperator={logicalOperator}
|
|
||||||
onLogicalOperatorToggle={onLogicalOperatorToggle}
|
|
||||||
filterVar={filterVar}
|
|
||||||
/>
|
|
||||||
)))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default React.memo(ConditionList)
|
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useStore } from '@/app/components/workflow/store'
|
||||||
|
import PromptEditor from '@/app/components/base/prompt-editor'
|
||||||
|
import { BlockEnum } from '@/app/components/workflow/types'
|
||||||
|
import type {
|
||||||
|
Node,
|
||||||
|
NodeOutPutVar,
|
||||||
|
} from '@/app/components/workflow/types'
|
||||||
|
|
||||||
|
type ConditionInputProps = {
|
||||||
|
disabled?: boolean
|
||||||
|
value: string
|
||||||
|
onChange: (value: string) => void
|
||||||
|
nodesOutputVars: NodeOutPutVar[]
|
||||||
|
availableNodes: Node[]
|
||||||
|
}
|
||||||
|
const ConditionInput = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
disabled,
|
||||||
|
nodesOutputVars,
|
||||||
|
availableNodes,
|
||||||
|
}: ConditionInputProps) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const controlPromptEditorRerenderKey = useStore(s => s.controlPromptEditorRerenderKey)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PromptEditor
|
||||||
|
key={controlPromptEditorRerenderKey}
|
||||||
|
compact
|
||||||
|
value={value}
|
||||||
|
placeholder={t('workflow.nodes.ifElse.enterValue') || ''}
|
||||||
|
workflowVariableBlock={{
|
||||||
|
show: true,
|
||||||
|
variables: nodesOutputVars || [],
|
||||||
|
workflowNodesMap: availableNodes.reduce((acc, node) => {
|
||||||
|
acc[node.id] = {
|
||||||
|
title: node.data.title,
|
||||||
|
type: node.data.type,
|
||||||
|
}
|
||||||
|
if (node.data.type === BlockEnum.Start) {
|
||||||
|
acc.sys = {
|
||||||
|
title: t('workflow.blocks.start'),
|
||||||
|
type: BlockEnum.Start,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, {} as any),
|
||||||
|
}}
|
||||||
|
onChange={onChange}
|
||||||
|
editable={!disabled}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConditionInput
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
import {
|
||||||
|
useCallback,
|
||||||
|
useState,
|
||||||
|
} from 'react'
|
||||||
|
import { RiDeleteBinLine } from '@remixicon/react'
|
||||||
|
import type { VarType as NumberVarType } from '../../../tool/types'
|
||||||
|
import type {
|
||||||
|
ComparisonOperator,
|
||||||
|
Condition,
|
||||||
|
HandleRemoveCondition,
|
||||||
|
HandleUpdateCondition,
|
||||||
|
} from '../../types'
|
||||||
|
import { comparisonOperatorNotRequireValue } from '../../utils'
|
||||||
|
import ConditionNumberInput from '../condition-number-input'
|
||||||
|
import ConditionOperator from './condition-operator'
|
||||||
|
import ConditionInput from './condition-input'
|
||||||
|
import VariableTag from '@/app/components/workflow/nodes/_base/components/variable-tag'
|
||||||
|
import type {
|
||||||
|
Node,
|
||||||
|
NodeOutPutVar,
|
||||||
|
} from '@/app/components/workflow/types'
|
||||||
|
import { VarType } from '@/app/components/workflow/types'
|
||||||
|
import cn from '@/utils/classnames'
|
||||||
|
|
||||||
|
type ConditionItemProps = {
|
||||||
|
disabled?: boolean
|
||||||
|
caseId: string
|
||||||
|
condition: Condition
|
||||||
|
onRemoveCondition: HandleRemoveCondition
|
||||||
|
onUpdateCondition: HandleUpdateCondition
|
||||||
|
nodesOutputVars: NodeOutPutVar[]
|
||||||
|
availableNodes: Node[]
|
||||||
|
numberVariables: NodeOutPutVar[]
|
||||||
|
}
|
||||||
|
const ConditionItem = ({
|
||||||
|
disabled,
|
||||||
|
caseId,
|
||||||
|
condition,
|
||||||
|
onRemoveCondition,
|
||||||
|
onUpdateCondition,
|
||||||
|
nodesOutputVars,
|
||||||
|
availableNodes,
|
||||||
|
numberVariables,
|
||||||
|
}: ConditionItemProps) => {
|
||||||
|
const [isHovered, setIsHovered] = useState(false)
|
||||||
|
|
||||||
|
const handleUpdateConditionOperator = useCallback((value: ComparisonOperator) => {
|
||||||
|
const newCondition = {
|
||||||
|
...condition,
|
||||||
|
comparison_operator: value,
|
||||||
|
}
|
||||||
|
onUpdateCondition(caseId, condition.id, newCondition)
|
||||||
|
}, [caseId, condition, onUpdateCondition])
|
||||||
|
|
||||||
|
const handleUpdateConditionValue = useCallback((value: string) => {
|
||||||
|
const newCondition = {
|
||||||
|
...condition,
|
||||||
|
value,
|
||||||
|
}
|
||||||
|
onUpdateCondition(caseId, condition.id, newCondition)
|
||||||
|
}, [caseId, condition, onUpdateCondition])
|
||||||
|
|
||||||
|
const handleUpdateConditionNumberVarType = useCallback((numberVarType: NumberVarType) => {
|
||||||
|
const newCondition = {
|
||||||
|
...condition,
|
||||||
|
numberVarType,
|
||||||
|
value: '',
|
||||||
|
}
|
||||||
|
onUpdateCondition(caseId, condition.id, newCondition)
|
||||||
|
}, [caseId, condition, onUpdateCondition])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex mb-1 last-of-type:mb-0'>
|
||||||
|
<div className={cn(
|
||||||
|
'grow bg-components-input-bg-normal rounded-lg',
|
||||||
|
isHovered && 'bg-state-destructive-hover',
|
||||||
|
)}>
|
||||||
|
<div className='flex items-center p-1'>
|
||||||
|
<div className='grow w-0'>
|
||||||
|
<VariableTag
|
||||||
|
valueSelector={condition.variable_selector}
|
||||||
|
varType={condition.varType}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='mx-1 w-[1px] h-3 bg-divider-regular'></div>
|
||||||
|
<ConditionOperator
|
||||||
|
disabled={disabled}
|
||||||
|
varType={condition.varType}
|
||||||
|
value={condition.comparison_operator}
|
||||||
|
onSelect={handleUpdateConditionOperator}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
!comparisonOperatorNotRequireValue(condition.comparison_operator) && condition.varType !== VarType.number && (
|
||||||
|
<div className='px-2 py-1 max-h-[100px] border-t border-t-divider-subtle overflow-y-auto'>
|
||||||
|
<ConditionInput
|
||||||
|
disabled={disabled}
|
||||||
|
value={condition.value}
|
||||||
|
onChange={handleUpdateConditionValue}
|
||||||
|
nodesOutputVars={nodesOutputVars}
|
||||||
|
availableNodes={availableNodes}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
!comparisonOperatorNotRequireValue(condition.comparison_operator) && condition.varType === VarType.number && (
|
||||||
|
<div className='px-2 py-1 pt-[3px] border-t border-t-divider-subtle'>
|
||||||
|
<ConditionNumberInput
|
||||||
|
numberVarType={condition.numberVarType}
|
||||||
|
onNumberVarTypeChange={handleUpdateConditionNumberVarType}
|
||||||
|
value={condition.value}
|
||||||
|
onValueChange={handleUpdateConditionValue}
|
||||||
|
variables={numberVariables}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className='shrink-0 flex items-center justify-center ml-1 mt-1 w-6 h-6 rounded-lg cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
onClick={() => onRemoveCondition(caseId, condition.id)}
|
||||||
|
>
|
||||||
|
<RiDeleteBinLine className='w-4 h-4' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConditionItem
|
||||||
@ -0,0 +1,91 @@
|
|||||||
|
import {
|
||||||
|
useMemo,
|
||||||
|
useState,
|
||||||
|
} from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { RiArrowDownSLine } from '@remixicon/react'
|
||||||
|
import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
|
||||||
|
import type { ComparisonOperator } from '../../types'
|
||||||
|
import Button from '@/app/components/base/button'
|
||||||
|
import {
|
||||||
|
PortalToFollowElem,
|
||||||
|
PortalToFollowElemContent,
|
||||||
|
PortalToFollowElemTrigger,
|
||||||
|
} from '@/app/components/base/portal-to-follow-elem'
|
||||||
|
import type { VarType } from '@/app/components/workflow/types'
|
||||||
|
import cn from '@/utils/classnames'
|
||||||
|
const i18nPrefix = 'workflow.nodes.ifElse'
|
||||||
|
|
||||||
|
type ConditionOperatorProps = {
|
||||||
|
disabled?: boolean
|
||||||
|
varType: VarType
|
||||||
|
value?: string
|
||||||
|
onSelect: (value: ComparisonOperator) => void
|
||||||
|
}
|
||||||
|
const ConditionOperator = ({
|
||||||
|
disabled,
|
||||||
|
varType,
|
||||||
|
value,
|
||||||
|
onSelect,
|
||||||
|
}: ConditionOperatorProps) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
|
||||||
|
const options = useMemo(() => {
|
||||||
|
return getOperators(varType).map((o) => {
|
||||||
|
return {
|
||||||
|
label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
|
||||||
|
value: o,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [t, varType])
|
||||||
|
const selectedOption = options.find(o => o.value === value)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PortalToFollowElem
|
||||||
|
open={open}
|
||||||
|
onOpenChange={setOpen}
|
||||||
|
placement='bottom-end'
|
||||||
|
offset={{
|
||||||
|
mainAxis: 4,
|
||||||
|
crossAxis: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||||
|
<Button
|
||||||
|
className={cn('shrink-0', !selectedOption && 'opacity-50')}
|
||||||
|
size='small'
|
||||||
|
variant='ghost'
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
selectedOption
|
||||||
|
? selectedOption.label
|
||||||
|
: 'select'
|
||||||
|
}
|
||||||
|
<RiArrowDownSLine className='ml-1 w-3.5 h-3.5' />
|
||||||
|
</Button>
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-10'>
|
||||||
|
<div className='p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
|
||||||
|
{
|
||||||
|
options.map(option => (
|
||||||
|
<div
|
||||||
|
key={option.value}
|
||||||
|
className='flex items-center px-3 py-1.5 h-7 text-[13px] font-medium text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
|
||||||
|
onClick={() => {
|
||||||
|
onSelect(option.value)
|
||||||
|
setOpen(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemContent>
|
||||||
|
</PortalToFollowElem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConditionOperator
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import { RiLoopLeftLine } from '@remixicon/react'
|
||||||
|
import { LogicalOperator } from '../../types'
|
||||||
|
import type {
|
||||||
|
CaseItem,
|
||||||
|
HandleRemoveCondition,
|
||||||
|
HandleUpdateCondition,
|
||||||
|
HandleUpdateConditionLogicalOperator,
|
||||||
|
} from '../../types'
|
||||||
|
import ConditionItem from './condition-item'
|
||||||
|
import type {
|
||||||
|
Node,
|
||||||
|
NodeOutPutVar,
|
||||||
|
} from '@/app/components/workflow/types'
|
||||||
|
|
||||||
|
type ConditionListProps = {
|
||||||
|
disabled?: boolean
|
||||||
|
caseItem: CaseItem
|
||||||
|
onUpdateCondition: HandleUpdateCondition
|
||||||
|
onUpdateConditionLogicalOperator: HandleUpdateConditionLogicalOperator
|
||||||
|
onRemoveCondition: HandleRemoveCondition
|
||||||
|
nodesOutputVars: NodeOutPutVar[]
|
||||||
|
availableNodes: Node[]
|
||||||
|
numberVariables: NodeOutPutVar[]
|
||||||
|
}
|
||||||
|
const ConditionList = ({
|
||||||
|
disabled,
|
||||||
|
caseItem,
|
||||||
|
onUpdateCondition,
|
||||||
|
onUpdateConditionLogicalOperator,
|
||||||
|
onRemoveCondition,
|
||||||
|
nodesOutputVars,
|
||||||
|
availableNodes,
|
||||||
|
numberVariables,
|
||||||
|
}: ConditionListProps) => {
|
||||||
|
const { conditions, logical_operator } = caseItem
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='relative pl-[60px]'>
|
||||||
|
{
|
||||||
|
conditions.length > 1 && (
|
||||||
|
<div className='absolute top-0 bottom-0 left-0 w-[60px]'>
|
||||||
|
<div className='absolute top-4 bottom-4 left-[46px] w-2.5 border border-divider-deep rounded-l-[8px] border-r-0'></div>
|
||||||
|
<div className='absolute top-1/2 -translate-y-1/2 right-0 w-4 h-[29px] bg-components-panel-bg'></div>
|
||||||
|
<div
|
||||||
|
className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer'
|
||||||
|
onClick={() => {
|
||||||
|
onUpdateConditionLogicalOperator(caseItem.case_id, caseItem.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{logical_operator.toUpperCase()}
|
||||||
|
<RiLoopLeftLine className='ml-0.5 w-3 h-3' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
caseItem.conditions.map(condition => (
|
||||||
|
<ConditionItem
|
||||||
|
key={condition.id}
|
||||||
|
disabled={disabled}
|
||||||
|
caseId={caseItem.case_id}
|
||||||
|
condition={condition}
|
||||||
|
onUpdateCondition={onUpdateCondition}
|
||||||
|
onRemoveCondition={onRemoveCondition}
|
||||||
|
nodesOutputVars={nodesOutputVars}
|
||||||
|
availableNodes={availableNodes}
|
||||||
|
numberVariables={numberVariables}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConditionList
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
import {
|
||||||
|
memo,
|
||||||
|
useCallback,
|
||||||
|
useState,
|
||||||
|
} from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { RiArrowDownSLine } from '@remixicon/react'
|
||||||
|
import { capitalize } from 'lodash-es'
|
||||||
|
import { VarType as NumberVarType } from '../../tool/types'
|
||||||
|
import VariableTag from '../../_base/components/variable-tag'
|
||||||
|
import {
|
||||||
|
PortalToFollowElem,
|
||||||
|
PortalToFollowElemContent,
|
||||||
|
PortalToFollowElemTrigger,
|
||||||
|
} from '@/app/components/base/portal-to-follow-elem'
|
||||||
|
import Button from '@/app/components/base/button'
|
||||||
|
import cn from '@/utils/classnames'
|
||||||
|
import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
|
||||||
|
import type {
|
||||||
|
NodeOutPutVar,
|
||||||
|
ValueSelector,
|
||||||
|
} from '@/app/components/workflow/types'
|
||||||
|
import { VarType } from '@/app/components/workflow/types'
|
||||||
|
import { variableTransformer } from '@/app/components/workflow/utils'
|
||||||
|
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
|
||||||
|
|
||||||
|
const options = [
|
||||||
|
NumberVarType.variable,
|
||||||
|
NumberVarType.constant,
|
||||||
|
]
|
||||||
|
|
||||||
|
type ConditionNumberInputProps = {
|
||||||
|
numberVarType?: NumberVarType
|
||||||
|
onNumberVarTypeChange: (v: NumberVarType) => void
|
||||||
|
value: string
|
||||||
|
onValueChange: (v: string) => void
|
||||||
|
variables: NodeOutPutVar[]
|
||||||
|
}
|
||||||
|
const ConditionNumberInput = ({
|
||||||
|
numberVarType = NumberVarType.constant,
|
||||||
|
onNumberVarTypeChange,
|
||||||
|
value,
|
||||||
|
onValueChange,
|
||||||
|
variables,
|
||||||
|
}: ConditionNumberInputProps) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [numberVarTypeVisible, setNumberVarTypeVisible] = useState(false)
|
||||||
|
const [variableSelectorVisible, setVariableSelectorVisible] = useState(false)
|
||||||
|
|
||||||
|
const handleSelectVariable = useCallback((valueSelector: ValueSelector) => {
|
||||||
|
onValueChange(variableTransformer(valueSelector) as string)
|
||||||
|
setVariableSelectorVisible(false)
|
||||||
|
}, [onValueChange])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex items-center cursor-pointer'>
|
||||||
|
<PortalToFollowElem
|
||||||
|
open={numberVarTypeVisible}
|
||||||
|
onOpenChange={setNumberVarTypeVisible}
|
||||||
|
placement='bottom-start'
|
||||||
|
offset={{ mainAxis: 2, crossAxis: 0 }}
|
||||||
|
>
|
||||||
|
<PortalToFollowElemTrigger onClick={() => setNumberVarTypeVisible(v => !v)}>
|
||||||
|
<Button
|
||||||
|
className='shrink-0'
|
||||||
|
variant='ghost'
|
||||||
|
size='small'
|
||||||
|
>
|
||||||
|
{capitalize(numberVarType)}
|
||||||
|
<RiArrowDownSLine className='ml-[1px] w-3.5 h-3.5' />
|
||||||
|
</Button>
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-[1000]'>
|
||||||
|
<div className='p-1 w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
|
||||||
|
{
|
||||||
|
options.map(option => (
|
||||||
|
<div
|
||||||
|
key={option}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center px-3 h-7 rounded-md hover:bg-state-base-hover cursor-pointer',
|
||||||
|
'text-[13px] font-medium text-text-secondary',
|
||||||
|
numberVarType === option && 'bg-state-base-hover',
|
||||||
|
)}
|
||||||
|
onClick={() => {
|
||||||
|
onNumberVarTypeChange(option)
|
||||||
|
setNumberVarTypeVisible(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{capitalize(option)}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemContent>
|
||||||
|
</PortalToFollowElem>
|
||||||
|
<div className='mx-1 w-[1px] h-4 bg-divider-regular'></div>
|
||||||
|
<div className='grow w-0 ml-0.5'>
|
||||||
|
{
|
||||||
|
numberVarType === NumberVarType.variable && (
|
||||||
|
<PortalToFollowElem
|
||||||
|
open={variableSelectorVisible}
|
||||||
|
onOpenChange={setVariableSelectorVisible}
|
||||||
|
placement='bottom-start'
|
||||||
|
offset={{ mainAxis: 2, crossAxis: 0 }}
|
||||||
|
>
|
||||||
|
<PortalToFollowElemTrigger
|
||||||
|
className='w-full'
|
||||||
|
onClick={() => setVariableSelectorVisible(v => !v)}>
|
||||||
|
{
|
||||||
|
value && (
|
||||||
|
<VariableTag
|
||||||
|
valueSelector={variableTransformer(value) as string[]}
|
||||||
|
varType={VarType.number}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
!value && (
|
||||||
|
<div className='flex items-center p-1 h-6 text-components-input-text-placeholder text-[13px]'>
|
||||||
|
<Variable02 className='mr-1 w-4 h-4' />
|
||||||
|
{t('workflow.nodes.ifElse.selectVariable')}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-[1000]'>
|
||||||
|
<div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
|
||||||
|
<VarReferenceVars
|
||||||
|
vars={variables}
|
||||||
|
onChange={handleSelectVariable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemContent>
|
||||||
|
</PortalToFollowElem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
numberVarType === NumberVarType.constant && (
|
||||||
|
<input
|
||||||
|
className='block w-full px-2 text-[13px] text-components-input-text-filled placeholder:text-components-input-text-placeholder outline-none appearance-none bg-transparent'
|
||||||
|
type='number'
|
||||||
|
value={value}
|
||||||
|
onChange={e => onValueChange(e.target.value)}
|
||||||
|
placeholder={t('workflow.nodes.ifElse.enterValue') || ''}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(ConditionNumberInput)
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
import {
|
||||||
|
memo,
|
||||||
|
useMemo,
|
||||||
|
} from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import type { ComparisonOperator } from '../types'
|
||||||
|
import {
|
||||||
|
comparisonOperatorNotRequireValue,
|
||||||
|
isComparisonOperatorNeedTranslate,
|
||||||
|
} from '../utils'
|
||||||
|
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
|
||||||
|
import cn from '@/utils/classnames'
|
||||||
|
import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||||
|
|
||||||
|
type ConditionValueProps = {
|
||||||
|
variableSelector: string[]
|
||||||
|
operator: ComparisonOperator
|
||||||
|
value: string
|
||||||
|
}
|
||||||
|
const ConditionValue = ({
|
||||||
|
variableSelector,
|
||||||
|
operator,
|
||||||
|
value,
|
||||||
|
}: ConditionValueProps) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const variableName = isSystemVar(variableSelector) ? variableSelector.slice(0).join('.') : variableSelector.slice(1).join('.')
|
||||||
|
const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
|
||||||
|
const notHasValue = comparisonOperatorNotRequireValue(operator)
|
||||||
|
|
||||||
|
const formatValue = useMemo(() => {
|
||||||
|
if (notHasValue)
|
||||||
|
return ''
|
||||||
|
|
||||||
|
return value.replace(/{{#([^#]*)#}}/g, (a, b) => {
|
||||||
|
const arr = b.split('.')
|
||||||
|
if (isSystemVar(arr))
|
||||||
|
return `{{${b}}}`
|
||||||
|
|
||||||
|
return `{{${arr.slice(1).join('.')}}}`
|
||||||
|
})
|
||||||
|
}, [notHasValue, value])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex items-center px-1 h-6 rounded-md bg-workflow-block-parma-bg'>
|
||||||
|
<Variable02 className='shrink-0 mr-1 w-3.5 h-3.5 text-text-accent' />
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'shrink-0 truncate text-xs font-medium text-text-accent',
|
||||||
|
!notHasValue && 'max-w-[70px]',
|
||||||
|
)}
|
||||||
|
title={variableName}
|
||||||
|
>
|
||||||
|
{variableName}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className='shrink-0 mx-1 text-xs font-medium text-text-primary'
|
||||||
|
title={operatorName}
|
||||||
|
>
|
||||||
|
{operatorName}
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
!notHasValue && (
|
||||||
|
<div className='truncate text-xs text-text-secondary' title={formatValue}>{formatValue}</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(ConditionValue)
|
||||||
Loading…
Reference in New Issue