mirror of https://github.com/langgenius/dify.git
feat: if comparasion
This commit is contained in:
Joel
parent
0fb47fed9e
commit
91a2e71fff
|
|
@ -37,7 +37,7 @@ const TypeSelector: FC<Props> = ({
|
|||
setHide()
|
||||
}, ref)
|
||||
return (
|
||||
<div className='relative left-[-8px]' ref={ref}>
|
||||
<div className={cn(!trigger && 'left-[-8px]', 'relative')} ref={ref}>
|
||||
{trigger
|
||||
? (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@ import React, { useCallback } from 'react'
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import cn from 'classnames'
|
||||
import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
|
||||
import { isComparisonOperatorNeedTranslate } from '../utils'
|
||||
import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
|
||||
import { LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
|
||||
import { ComparisonOperator, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
|
||||
import type { ValueSelector } from '@/app/components/workflow/types'
|
||||
import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
import Selector from '@/app/components/workflow/nodes/_base/components/selector'
|
||||
const i18nPrefix = 'workflow.nodes.ifElse'
|
||||
|
||||
const Line = (
|
||||
|
|
@ -23,6 +25,44 @@ const Line = (
|
|||
</svg>
|
||||
)
|
||||
|
||||
const getOperators = (type: string) => {
|
||||
switch (type) {
|
||||
case 'string':
|
||||
return [
|
||||
ComparisonOperator.contains,
|
||||
ComparisonOperator.notContains,
|
||||
ComparisonOperator.startWith,
|
||||
ComparisonOperator.endWith,
|
||||
ComparisonOperator.is,
|
||||
ComparisonOperator.isNot,
|
||||
ComparisonOperator.empty,
|
||||
ComparisonOperator.notEmpty,
|
||||
]
|
||||
case 'number':
|
||||
return [
|
||||
ComparisonOperator.equal,
|
||||
ComparisonOperator.notEqual,
|
||||
ComparisonOperator.largerThan,
|
||||
ComparisonOperator.lessThan,
|
||||
ComparisonOperator.largerThanOrEqual,
|
||||
ComparisonOperator.lessThanOrEqual,
|
||||
ComparisonOperator.is,
|
||||
ComparisonOperator.isNot,
|
||||
ComparisonOperator.empty,
|
||||
ComparisonOperator.notEmpty,
|
||||
]
|
||||
case 'array':
|
||||
return [
|
||||
ComparisonOperator.is,
|
||||
ComparisonOperator.isNot,
|
||||
ComparisonOperator.empty,
|
||||
ComparisonOperator.notEmpty,
|
||||
]
|
||||
default:
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
type ItemProps = {
|
||||
readonly: boolean
|
||||
payload: Condition
|
||||
|
|
@ -51,6 +91,7 @@ const Item: FC<ItemProps> = ({
|
|||
...payload,
|
||||
variable_selector: value,
|
||||
})
|
||||
// TODO: handle value type change will effect the comparisonOperators
|
||||
}, [onChange, payload])
|
||||
|
||||
const handleValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -60,6 +101,13 @@ const Item: FC<ItemProps> = ({
|
|||
})
|
||||
}, [onChange, payload])
|
||||
|
||||
const handleComparisonOperatorChange = useCallback((v: ComparisonOperator) => {
|
||||
onChange({
|
||||
...payload,
|
||||
comparison_operator: v,
|
||||
})
|
||||
}, [onChange, payload])
|
||||
|
||||
return (
|
||||
<div className='space-y-2'>
|
||||
{isShowLogicalOperator && (
|
||||
|
|
@ -90,12 +138,30 @@ const Item: FC<ItemProps> = ({
|
|||
onChange={handleVarReferenceChange}
|
||||
/>
|
||||
|
||||
<Selector
|
||||
popupClassName='top-[34px]'
|
||||
trigger={
|
||||
<div className='shrink-0 whitespace-nowrap flex items-center h-8 justify-between px-2.5 rounded-lg bg-gray-100 capitalize'>
|
||||
<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('string').map((o) => {
|
||||
return {
|
||||
label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
|
||||
value: o,
|
||||
}
|
||||
})}
|
||||
onChange={handleComparisonOperatorChange}
|
||||
/>
|
||||
|
||||
<input
|
||||
readOnly={readonly}
|
||||
value={payload.value}
|
||||
onChange={handleValueChange}
|
||||
placeholder={t(`${i18nPrefix}.enterValue`)!}
|
||||
className='w-[144px] 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'
|
||||
className='max-w-[144px] 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'
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,17 +3,10 @@ import { useTranslation } from 'react-i18next'
|
|||
import type { NodeProps } from 'reactflow'
|
||||
import { NodeSourceHandle } from '../_base/components/node-handle'
|
||||
import { mockData } from './mock'
|
||||
import { ComparisonOperator } from './types'
|
||||
import { isEmptyRelatedOperator } from './utils'
|
||||
import { isComparisonOperatorNeedTranslate, isEmptyRelatedOperator } from './utils'
|
||||
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
|
||||
const i18nPrefix = 'workflow.nodes.ifElse'
|
||||
|
||||
const notTranslateKey = [
|
||||
ComparisonOperator.equal, ComparisonOperator.notEqual,
|
||||
ComparisonOperator.largerThan, ComparisonOperator.largerThanOrEqual,
|
||||
ComparisonOperator.lessThan, ComparisonOperator.lessThanOrEqual,
|
||||
]
|
||||
|
||||
const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
|
||||
const { t } = useTranslation()
|
||||
const { conditions, logical_operator } = mockData
|
||||
|
|
@ -35,7 +28,7 @@ const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
|
|||
<div className='flex items-center h-6 bg-gray-100 rounded-md px-1 space-x-1 text-xs font-normal text-gray-700'>
|
||||
<Variable02 className='w-3.5 h-3.5 text-primary-500' />
|
||||
<span>{condition.variable_selector.slice(-1)[0]}</span>
|
||||
<span className='text-gray-500'>{notTranslateKey.includes(condition.comparison_operator) ? condition.comparison_operator : t(`${i18nPrefix}.comparisonOperator.${condition.comparison_operator}`)}</span>
|
||||
<span className='text-gray-500'>{isComparisonOperatorNeedTranslate(condition.comparison_operator) ? condition.comparison_operator : t(`${i18nPrefix}.comparisonOperator.${condition.comparison_operator}`)}</span>
|
||||
{!isEmptyRelatedOperator(condition.comparison_operator) && <span>{condition.value}</span>}
|
||||
</div>
|
||||
{i !== conditions.length - 1 && (
|
||||
|
|
|
|||
|
|
@ -8,3 +8,13 @@ export const isEmptyRelatedOperator = (operator: ComparisonOperator) => {
|
|||
export const checkNodeValid = (payload: IfElseNodeType) => {
|
||||
return true
|
||||
}
|
||||
|
||||
const notTranslateKey = [
|
||||
ComparisonOperator.equal, ComparisonOperator.notEqual,
|
||||
ComparisonOperator.largerThan, ComparisonOperator.largerThanOrEqual,
|
||||
ComparisonOperator.lessThan, ComparisonOperator.lessThanOrEqual,
|
||||
]
|
||||
|
||||
export const isComparisonOperatorNeedTranslate = (operator: ComparisonOperator) => {
|
||||
return !notTranslateKey.includes(operator)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue