youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-04 09:28:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support config modal edit

Browse Source
This commit is contained in:
Joel
2024-02-23 14:24:59 +08:00
parent f6c07c996b
commit 077de17cd5
4 changed files with 54 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/app/components/workflow/nodes/start/components/var-item.tsx
View File

@ -1,13 +1,14 @@
'use client'
import type { FC } from 'react'
import React, { useRef } from 'react'
import { useHover } from 'ahooks'
import React, { useCallback, useRef } from 'react'
import { useBoolean, useHover } from 'ahooks'
import { useTranslation } from 'react-i18next'
import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
import type { InputVar } from '@/app/components/workflow/types'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
type Props = {
readonly: boolean
@ -19,11 +20,22 @@ type Props = {
const VarItem: FC<Props> = ({
readonly,
payload,
onChange,
onRemove,
}) => {
const { t } = useTranslation()
const ref = useRef(null)
const isHovering = useHover(ref)
const [isShowEditVarModal, {
setTrue: showEditVarModal,
setFalse: hideEditVarModal,
}] = useBoolean(false)
const handlePayloadChange = useCallback((payload: InputVar) => {
onChange(payload)
hideEditVarModal()
}, [onChange, hideEditVarModal])
return (
<div ref={ref} className='flex items-center h-8 justify-between px-2.5 bg-white rounded-lg border border-gray-200 shadow-xs cursor-pointer hover:shadow-md'>
<div className='flex items-center space-x-1 grow w-0'>
@ -44,15 +56,25 @@ const VarItem: FC<Props> = ({
)
: (!readonly && (
<>
<div className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
<div onClick={showEditVarModal} className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
<Edit03 className='w-4 h-4 text-gray-500' />
</div>
<div className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
<div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
<Trash03 className='w-4 h-4 text-gray-500' />
</div>
</>
))}
</div>
{
isShowEditVarModal && (
<ConfigVarModal
isShow
payload={payload}
onClose={hideEditVarModal}
onConfirm={handlePayloadChange}
/>
)
}
</div>
)
}