File size: 4,116 Bytes
4304c6d |
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 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { CodeLanguage } from '../code/types'
import useConfig from './use-config'
import type { TemplateTransformNodeType } from './types'
import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
import AddButton from '@/app/components/base/button/add-button'
import Field from '@/app/components/workflow/nodes/_base/components/field'
import Split from '@/app/components/workflow/nodes/_base/components/split'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars'
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
import type { NodePanelProps } from '@/app/components/workflow/types'
import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
import ResultPanel from '@/app/components/workflow/run/result-panel'
const i18nPrefix = 'workflow.nodes.templateTransform'
const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
id,
data,
}) => {
const { t } = useTranslation()
const {
readOnly,
inputs,
availableVars,
handleVarListChange,
handleVarNameChange,
handleAddVariable,
handleAddEmptyVariable,
handleCodeChange,
filterVar,
// single run
isShowSingleRun,
hideSingleRun,
runningStatus,
handleRun,
handleStop,
varInputs,
inputVarValues,
setInputVarValues,
runResult,
} = useConfig(id, data)
return (
<div className='mt-2'>
<div className='px-4 pb-4 space-y-4'>
<Field
title={t(`${i18nPrefix}.inputVars`)}
operations={
!readOnly ? <AddButton onClick={handleAddEmptyVariable} /> : undefined
}
>
<VarList
nodeId={id}
readonly={readOnly}
list={inputs.variables}
onChange={handleVarListChange}
onVarNameChange={handleVarNameChange}
filterVar={filterVar}
/>
</Field>
<Split />
<CodeEditor
availableVars={availableVars}
varList={inputs.variables}
onAddVar={handleAddVariable}
isInNode
readOnly={readOnly}
language={CodeLanguage.python3}
title={
<div className='uppercase'>{t(`${i18nPrefix}.code`)}</div>
}
headerRight={
<div className='flex items-center'>
<a
className='flex items-center space-x-0.5 h-[18px] text-xs font-normal text-gray-500'
href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
target='_blank'>
<span>{t(`${i18nPrefix}.codeSupportTip`)}</span>
<HelpCircle className='w-3 h-3' />
</a>
<div className='mx-1.5 w-px h-3 bg-gray-200'></div>
</div>
}
value={inputs.template}
onChange={handleCodeChange}
/>
</div>
<Split />
<div className='px-4 pt-4 pb-2'>
<OutputVars>
<>
<VarItem
name='output'
type='string'
description={t(`${i18nPrefix}.outputVars.output`)}
/>
</>
</OutputVars>
</div>
{isShowSingleRun && (
<BeforeRunForm
nodeName={inputs.title}
onHide={hideSingleRun}
forms={[
{
inputs: varInputs,
values: inputVarValues,
onChange: setInputVarValues,
},
]}
runningStatus={runningStatus}
onRun={handleRun}
onStop={handleStop}
result={<ResultPanel {...runResult} showSteps={false} />}
/>
)}
</div>
)
}
export default React.memo(Panel)
|