mirror of
https://github.com/langgenius/dify.git
synced 2026-02-01 16:41:58 +08:00
chore: pre popular placeholder ui
This commit is contained in:
parent
fda19d3f0e
commit
305b5da764
@ -81,25 +81,33 @@ const PrePopulate: FC<Props> = ({
|
||||
|
||||
if (isVariable) {
|
||||
return (
|
||||
<div>
|
||||
<div className='relative h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2'>
|
||||
<VarReferencePicker
|
||||
{...varPickerProps}
|
||||
isJustShowValue
|
||||
/>
|
||||
<TypeSwitch
|
||||
className='absolute bottom-1 left-1.5'
|
||||
isVariable={isVariable}
|
||||
onIsVariableChange={handleTypeChange}
|
||||
/>
|
||||
<TypeSwitch isVariable={isVariable} onIsVariableChange={handleTypeChange} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className={cn('relative rounded-md border border-transparent bg-components-input-bg-normal pb-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs')}>
|
||||
<div className={cn('relative min-h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal pb-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs')}>
|
||||
<Textarea
|
||||
value={value || ''}
|
||||
className='rounded-b-none border-none bg-transparent px-3 pb-8 hover:bg-transparent focus:bg-transparent focus:shadow-none'
|
||||
className='h-[43px] min-h-[43px] rounded-none border-none bg-transparent px-3 hover:bg-transparent focus:bg-transparent focus:shadow-none'
|
||||
onChange={e => onValueChange?.(e.target.value)}
|
||||
onFocus={() => setIsFocus(true)}
|
||||
onFocus={() => {
|
||||
setOnPlaceholderClicked(true)
|
||||
setIsFocus(true)
|
||||
}}
|
||||
onBlur={() => setIsFocus(false)}
|
||||
/>
|
||||
<TypeSwitch
|
||||
className='ml-1.5'
|
||||
className='absolute bottom-1 left-1.5'
|
||||
isVariable={isVariable}
|
||||
onIsVariableChange={handleTypeChange}
|
||||
/>
|
||||
|
||||
@ -18,7 +18,7 @@ const TypeSwitch: FC<Props> = ({
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className={cn('inline-flex h-6 cursor-pointer items-center space-x-1 rounded-md pl-1.5 pr-2 text-text-tertiary hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
|
||||
<div className={cn('inline-flex h-6 cursor-pointer select-none items-center space-x-1 rounded-md pl-1.5 pr-2 text-text-tertiary hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
|
||||
<Variable02 className='size-3.5' />
|
||||
<div className='system-xs-medium'>{t(`workflow.nodes.humanInput.insertInputField.${isVariable ? 'useConstantInstead' : 'useVarInstead'}`)}</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,7 @@ type Props = {
|
||||
availableNodes?: Node[]
|
||||
availableVars?: NodeOutPutVar[]
|
||||
trigger?: React.ReactNode
|
||||
isJustShowValue?: boolean
|
||||
isAddBtnTrigger?: boolean
|
||||
schema?: Partial<CredentialFormSchema>
|
||||
valueTypePlaceHolder?: string
|
||||
@ -94,6 +95,7 @@ const VarReferencePicker: FC<Props> = ({
|
||||
availableNodes: passedInAvailableNodes,
|
||||
availableVars: passedInAvailableVars,
|
||||
trigger,
|
||||
isJustShowValue,
|
||||
isAddBtnTrigger,
|
||||
schema,
|
||||
valueTypePlaceHolder,
|
||||
@ -408,7 +410,7 @@ const VarReferencePicker: FC<Props> = ({
|
||||
<AddButton onClick={noop}></AddButton>
|
||||
</div>
|
||||
)
|
||||
: (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled')}>
|
||||
: (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled', isJustShowValue && 'h-6 bg-transparent p-0')}>
|
||||
{isSupportConstantValue
|
||||
? <div onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
@ -516,7 +518,7 @@ const VarReferencePicker: FC<Props> = ({
|
||||
|
||||
</VarPickerWrap>
|
||||
)}
|
||||
{(hasValue && !readonly && !isInTable) && (<div
|
||||
{(hasValue && !readonly && !isInTable && !isJustShowValue) && (<div
|
||||
className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-state-base-hover group-hover/wrap:visible'
|
||||
onClick={handleClearVar}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user