2024-04-08 18:51:46 +08:00
|
|
|
import type { FC } from 'react'
|
2024-07-10 18:20:13 +08:00
|
|
|
import {
|
|
|
|
memo,
|
|
|
|
} from 'react'
|
2024-04-08 18:51:46 +08:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2024-07-10 18:20:13 +08:00
|
|
|
import {
|
|
|
|
RiAddLine,
|
|
|
|
} from '@remixicon/react'
|
2024-04-08 18:51:46 +08:00
|
|
|
import useConfig from './use-config'
|
|
|
|
import type { IfElseNodeType } from './types'
|
2024-10-21 10:32:37 +08:00
|
|
|
import ConditionWrap from './components/condition-wrap'
|
2024-07-10 18:20:13 +08:00
|
|
|
import Button from '@/app/components/base/button'
|
2024-04-08 18:51:46 +08:00
|
|
|
import type { NodePanelProps } from '@/app/components/workflow/types'
|
2024-07-10 18:20:13 +08:00
|
|
|
import Field from '@/app/components/workflow/nodes/_base/components/field'
|
2024-10-21 10:32:37 +08:00
|
|
|
|
2024-04-08 18:51:46 +08:00
|
|
|
const i18nPrefix = 'workflow.nodes.ifElse'
|
|
|
|
|
|
|
|
const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
|
|
|
|
id,
|
|
|
|
data,
|
|
|
|
}) => {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
const {
|
|
|
|
readOnly,
|
|
|
|
inputs,
|
|
|
|
filterVar,
|
2024-07-10 18:20:13 +08:00
|
|
|
handleAddCase,
|
|
|
|
handleRemoveCase,
|
|
|
|
handleSortCase,
|
|
|
|
handleAddCondition,
|
|
|
|
handleUpdateCondition,
|
|
|
|
handleRemoveCondition,
|
2024-10-21 10:32:37 +08:00
|
|
|
handleToggleConditionLogicalOperator,
|
|
|
|
handleAddSubVariableCondition,
|
|
|
|
handleRemoveSubVariableCondition,
|
|
|
|
handleUpdateSubVariableCondition,
|
|
|
|
handleToggleSubVariableConditionLogicalOperator,
|
2024-07-10 18:20:13 +08:00
|
|
|
nodesOutputVars,
|
|
|
|
availableNodes,
|
2024-10-21 10:32:37 +08:00
|
|
|
varsIsVarFileAttribute,
|
2024-04-08 18:51:46 +08:00
|
|
|
} = useConfig(id, data)
|
2024-07-10 18:20:13 +08:00
|
|
|
const cases = inputs.cases || []
|
|
|
|
|
2024-04-08 18:51:46 +08:00
|
|
|
return (
|
2024-07-10 18:20:13 +08:00
|
|
|
<div className='p-1'>
|
2024-10-21 10:32:37 +08:00
|
|
|
<ConditionWrap
|
|
|
|
nodeId={id}
|
|
|
|
cases={cases}
|
|
|
|
readOnly={readOnly}
|
|
|
|
handleSortCase={handleSortCase}
|
|
|
|
handleRemoveCase={handleRemoveCase}
|
|
|
|
handleAddCondition={handleAddCondition}
|
|
|
|
handleRemoveCondition={handleRemoveCondition}
|
|
|
|
handleUpdateCondition={handleUpdateCondition}
|
|
|
|
handleToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
|
|
|
|
handleAddSubVariableCondition={handleAddSubVariableCondition}
|
|
|
|
handleRemoveSubVariableCondition={handleRemoveSubVariableCondition}
|
|
|
|
handleUpdateSubVariableCondition={handleUpdateSubVariableCondition}
|
|
|
|
handleToggleSubVariableConditionLogicalOperator={handleToggleSubVariableConditionLogicalOperator}
|
|
|
|
nodesOutputVars={nodesOutputVars}
|
|
|
|
availableNodes={availableNodes}
|
|
|
|
varsIsVarFileAttribute={varsIsVarFileAttribute}
|
|
|
|
filterVar={filterVar}
|
|
|
|
/>
|
2024-07-10 18:20:13 +08:00
|
|
|
<div className='px-4 py-2'>
|
|
|
|
<Button
|
|
|
|
className='w-full'
|
|
|
|
variant='tertiary'
|
|
|
|
onClick={() => handleAddCase()}
|
|
|
|
disabled={readOnly}
|
2024-04-08 18:51:46 +08:00
|
|
|
>
|
2025-03-21 17:41:03 +08:00
|
|
|
<RiAddLine className='mr-1 h-4 w-4' />
|
2024-07-10 18:20:13 +08:00
|
|
|
ELIF
|
|
|
|
</Button>
|
2024-04-08 18:51:46 +08:00
|
|
|
</div>
|
2025-03-21 17:41:03 +08:00
|
|
|
<div className='mx-3 my-2 h-[1px] bg-divider-subtle'></div>
|
2024-07-10 18:20:13 +08:00
|
|
|
<Field
|
|
|
|
title={t(`${i18nPrefix}.else`)}
|
|
|
|
className='px-4 py-2'
|
|
|
|
>
|
2025-03-21 17:41:03 +08:00
|
|
|
<div className='text-xs font-normal leading-[18px] text-text-tertiary'>{t(`${i18nPrefix}.elseDescription`)}</div>
|
2024-07-10 18:20:13 +08:00
|
|
|
</Field>
|
2024-04-08 18:51:46 +08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2024-07-10 18:20:13 +08:00
|
|
|
export default memo(Panel)
|