Feat: upgrade variable assigner (#11285)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>
This commit is contained in:
Yi Xiao
2024-12-03 13:56:40 +08:00
committed by GitHub
parent e79eac688a
commit e135ffc2c1
62 changed files with 1565 additions and 301 deletions

View File

@@ -1,15 +1,15 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import VarReferencePicker from '../_base/components/variable/var-reference-picker'
import OptionCard from '../_base/components/option-card'
import {
RiAddLine,
} from '@remixicon/react'
import VarList from './components/var-list'
import useConfig from './use-config'
import { WriteMode } from './types'
import type { AssignerNodeType } from './types'
import Field from '@/app/components/workflow/nodes/_base/components/field'
import { useHandleAddOperationItem } from './hooks'
import ActionButton from '@/app/components/base/action-button'
import { type NodePanelProps } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
const i18nPrefix = 'workflow.nodes.assigner'
@@ -18,67 +18,48 @@ const Panel: FC<NodePanelProps<AssignerNodeType>> = ({
data,
}) => {
const { t } = useTranslation()
const handleAddOperationItem = useHandleAddOperationItem()
const {
readOnly,
inputs,
handleAssignedVarChanges,
isSupportAppend,
handleOperationListChanges,
getAssignedVarType,
getToAssignedVarType,
writeModeTypesNum,
writeModeTypesArr,
writeModeTypes,
handleWriteModeChange,
filterAssignedVar,
filterToAssignedVar,
handleToAssignedVarChange,
toAssignedVarType,
} = useConfig(id, data)
const handleAddOperation = () => {
const newList = handleAddOperationItem(inputs.items || [])
handleOperationListChanges(newList)
}
return (
<div className='mt-2'>
<div className='px-4 pb-4 space-y-4'>
<Field
title={t(`${i18nPrefix}.assignedVariable`)}
>
<VarReferencePicker
readonly={readOnly}
nodeId={id}
isShowNodeName
value={inputs.assigned_variable_selector || []}
onChange={handleAssignedVarChanges}
filterVar={filterAssignedVar}
/>
</Field>
<Field
title={t(`${i18nPrefix}.writeMode`)}
>
<div className={cn('grid gap-2 grid-cols-3')}>
{writeModeTypes.map(type => (
<OptionCard
key={type}
title={t(`${i18nPrefix}.${type}`)}
onSelect={handleWriteModeChange(type)}
selected={inputs.write_mode === type}
disabled={!isSupportAppend && type === WriteMode.Append}
tooltip={type === WriteMode.Append ? t(`${i18nPrefix}.writeModeTip`)! : undefined}
/>
))}
</div>
</Field>
{inputs.write_mode !== WriteMode.Clear && (
<Field
title={t(`${i18nPrefix}.setVariable`)}
>
<VarReferencePicker
readonly={readOnly}
nodeId={id}
isShowNodeName
value={inputs.input_variable_selector || []}
onChange={handleToAssignedVarChange}
filterVar={filterToAssignedVar}
valueTypePlaceHolder={toAssignedVarType}
/>
</Field>
)}
<div className='flex py-2 flex-col items-start self-stretch'>
<div className='flex flex-col justify-center items-start gap-1 px-4 py-2 w-full self-stretch'>
<div className='flex items-start gap-2 self-stretch'>
<div className='flex flex-col justify-center items-start flex-grow text-text-secondary system-sm-semibold-uppercase'>{t(`${i18nPrefix}.variables`)}</div>
<ActionButton onClick={handleAddOperation}>
<RiAddLine className='w-4 h-4 shrink-0 text-text-tertiary' />
</ActionButton>
</div>
<VarList
readonly={readOnly}
nodeId={id}
list={inputs.items || []}
onChange={(newList) => {
handleOperationListChanges(newList)
}}
filterVar={filterAssignedVar}
filterToAssignedVar={filterToAssignedVar}
getAssignedVarType={getAssignedVarType}
writeModeTypes={writeModeTypes}
writeModeTypesArr={writeModeTypesArr}
writeModeTypesNum={writeModeTypesNum}
getToAssignedVarType={getToAssignedVarType}
/>
</div>
</div>
)