estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: added ActionButton component (#6631)

Browse Source
This commit is contained in:
Yi Xiao
2024-07-24 18:09:44 +08:00
committed by GitHub
parent 5af2df0cd5
commit c112188207
9 changed files with 151 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
View File

@@ -30,6 +30,7 @@ import s from '@/app/components/app/configuration/config-prompt/style.module.css
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import ActionButton from '@/app/components/base/action-button'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars'
import Switch from '@/app/components/base/switch'
@@ -128,7 +129,7 @@ const Editor: FC<Props> = ({
<Wrap className={cn(className, wrapClassName)} style={wrapStyle} isInNode isExpand={isExpand}>
<div ref={ref} className={cn(isFocus ? s.gradientBorder : 'bg-gray-100', isExpand && 'h-full', '!rounded-[9px] p-0.5')}>
<div className={cn(isFocus ? 'bg-gray-50' : 'bg-gray-100', isExpand && 'h-full flex flex-col', 'rounded-lg')}>
<div className={cn(headerClassName, 'pt-1 pl-3 pr-2 flex justify-between h-6 items-center')}>
<div className={cn(headerClassName, 'pt-1 pl-3 pr-2 flex justify-between items-center')}>
<div className='leading-4 text-xs font-semibold text-gray-700 uppercase'>{title}</div>
<div className='flex items-center'>
<div className='leading-[18px] text-xs font-medium text-gray-500'>{value?.length || 0}</div>
@@ -138,7 +139,7 @@ const Editor: FC<Props> = ({
<div className='w-px h-3 ml-2 mr-2 bg-gray-200'></div>
{/* Operations */}
<div className='flex items-center space-x-2'>
<div className='flex items-center space-x-[2px]'>
{isSupportJinja && (
<TooltipPlus
popupContent={
@@ -165,19 +166,28 @@ const Editor: FC<Props> = ({
{!readOnly && (
<TooltipPlus
popupContent={`${t('workflow.common.insertVarTip')}`}
asChild
>
<Variable02 className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleInsertVariable} />
<ActionButton onClick={handleInsertVariable}>
<Variable02 className='w-4 h-4' />
</ActionButton>
</TooltipPlus>
)}
{showRemove && (
<RiDeleteBinLine className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={onRemove} />
<ActionButton onClick={onRemove}>
<RiDeleteBinLine className='w-4 h-4' />
</ActionButton>
)}
{!isCopied
? (
<Clipboard className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleCopy} />
<ActionButton onClick={handleCopy}>
<Clipboard className='w-4 h-4' />
</ActionButton>
)
: (
<ClipboardCheck className='mx-1 w-3.5 h-3.5 text-gray-500' />
<ActionButton>
<ClipboardCheck className='w-4 h-4' />
</ActionButton>
)
}
<ToggleExpandBtn isExpand={isExpand} onExpandChange={setIsExpand} />

2
web/app/components/workflow/nodes/_base/components/selector.tsx
View File

@@ -63,7 +63,7 @@ const TypeSelector: FC<Props> = ({
<div
onClick={toggleShow}
className={cn(showOption && 'bg-black/5', 'flex items-center h-5 pl-1 pr-0.5 rounded-md text-xs font-semibold text-gray-700 cursor-pointer hover:bg-black/5')}>
<div className={cn(triggerClassName, 'text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-gray-400')}>{!noValue ? item?.label : placeholder}</div>
<div className={cn(triggerClassName, 'text-xs font-semibold', uppercase && 'uppercase', noValue && 'text-gray-400')}>{!noValue ? item?.label : placeholder}</div>
{!readonly && <DropDownIcon className='w-3 h-3 ' />}
</div>
)}

5
web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
View File

@@ -5,6 +5,7 @@ import {
RiCollapseDiagonalLine,
RiExpandDiagonalLine,
} from '@remixicon/react'
import ActionButton from '@/app/components/base/action-button'
type Props = {
isExpand: boolean
@@ -21,7 +22,9 @@ const ExpandBtn: FC<Props> = ({
const Icon = isExpand ? RiCollapseDiagonalLine : RiExpandDiagonalLine
return (
<Icon className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleToggle} />
<ActionButton onClick={handleToggle}>
<Icon className='w-4 h-4' />
</ActionButton>
)
}
export default React.memo(ExpandBtn)