'use client'
|
import type { FC } from 'react'
|
import React, { useCallback } from 'react'
|
import { useTranslation } from 'react-i18next'
|
import produce from 'immer'
|
import type { KeyValue } from '../../../types'
|
import VarReferencePicker from '../../../../_base/components/variable/var-reference-picker'
|
import InputItem from './input-item'
|
import cn from '@/utils/classnames'
|
import { PortalSelect } from '@/app/components/base/select'
|
import type { ValueSelector, Var } from '@/app/components/workflow/types'
|
import { VarType } from '@/app/components/workflow/types'
|
// import Input from '@/app/components/base/input'
|
|
const i18nPrefix = 'workflow.nodes.http'
|
|
type Props = {
|
instanceId: string
|
className?: string
|
nodeId: string
|
readonly: boolean
|
canRemove: boolean
|
payload: KeyValue
|
onChange: (newPayload: KeyValue) => void
|
onRemove: () => void
|
isLastItem: boolean
|
onAdd: () => void
|
isSupportFile?: boolean
|
keyNotSupportVar?: boolean
|
insertVarTipToLeft?: boolean
|
}
|
|
const KeyValueItem: FC<Props> = ({
|
instanceId,
|
className,
|
nodeId,
|
readonly,
|
canRemove,
|
payload,
|
onChange,
|
onRemove,
|
isLastItem,
|
onAdd,
|
isSupportFile,
|
keyNotSupportVar,
|
insertVarTipToLeft,
|
}) => {
|
const { t } = useTranslation()
|
|
const handleChange = useCallback((key: string) => {
|
return (value: string | ValueSelector) => {
|
const newPayload = produce(payload, (draft: any) => {
|
draft[key] = value
|
})
|
onChange(newPayload)
|
}
|
}, [onChange, payload])
|
|
const filterOnlyFileVariable = (varPayload: Var) => {
|
return [VarType.file, VarType.arrayFile].includes(varPayload.type)
|
}
|
|
return (
|
// group class name is for hover row show remove button
|
<div className={cn(className, 'group flex h-min-7 border-t border-gray-200')}>
|
<div className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>
|
{!keyNotSupportVar
|
? (
|
<InputItem
|
instanceId={`http-key-${instanceId}`}
|
nodeId={nodeId}
|
value={payload.key}
|
onChange={handleChange('key')}
|
hasRemove={false}
|
placeholder={t(`${i18nPrefix}.key`)!}
|
readOnly={readonly}
|
insertVarTipToLeft={insertVarTipToLeft}
|
/>
|
)
|
: (
|
<input
|
className='appearance-none outline-none rounded-none bg-white border-none system-sm-regular focus:ring-0 focus:bg-gray-100! hover:bg-gray-50'
|
value={payload.key}
|
onChange={e => handleChange('key')(e.target.value)}
|
/>
|
)}
|
</div>
|
{isSupportFile && (
|
<div className='shrink-0 w-[70px] border-r border-divider-regular'>
|
<PortalSelect
|
value={payload.type!}
|
onSelect={item => handleChange('type')(item.value as string)}
|
items={[
|
{ name: 'text', value: 'text' },
|
{ name: 'file', value: 'file' },
|
]}
|
readonly={readonly}
|
triggerClassName='rounded-none h-7'
|
triggerClassNameFn={isOpen => isOpen ? 'bg-state-base-hover' : 'bg-transparent'}
|
popupClassName='w-[80px] h-7'
|
/>
|
</div>)}
|
<div className={cn(isSupportFile ? 'grow' : 'w-1/2')} onClick={() => isLastItem && onAdd()}>
|
{(isSupportFile && payload.type === 'file')
|
? (
|
<VarReferencePicker
|
nodeId={nodeId}
|
readonly={readonly}
|
value={payload.file || []}
|
onChange={handleChange('file')}
|
filterVar={filterOnlyFileVariable}
|
isInTable
|
onRemove={onRemove}
|
/>
|
)
|
: (
|
<InputItem
|
instanceId={`http-value-${instanceId}`}
|
nodeId={nodeId}
|
value={payload.value}
|
onChange={handleChange('value')}
|
hasRemove={!readonly && canRemove}
|
onRemove={onRemove}
|
placeholder={t(`${i18nPrefix}.value`)!}
|
readOnly={readonly}
|
isSupportFile={isSupportFile}
|
insertVarTipToLeft={insertVarTipToLeft}
|
/>
|
)}
|
|
</div>
|
</div>
|
)
|
}
|
export default React.memo(KeyValueItem)
|
