From 9a23cd08d8b1099da825786f4b24af7f40853e20 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 19 Aug 2024 16:49:43 +0800
Subject: [PATCH] fix: sub varibale select  trigger

---
 web/app/components/base/select/index.tsx      | 46 ++++++++++---------
 .../condition-list/condition-item.tsx         | 13 ++++++
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 362b56e0a4..472b5be508 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -29,6 +29,7 @@ export type Item = {
 export type ISelectProps = {
   className?: string
   wrapperClassName?: string
+  renderTrigger?: (value: Item | null) => JSX.Element | null
   items?: Item[]
   defaultValue?: number | string
   disabled?: boolean
@@ -168,6 +169,7 @@ const Select: FC<ISelectProps> = ({
 const SimpleSelect: FC<ISelectProps> = ({
   className,
   wrapperClassName = '',
+  renderTrigger,
   items = defaultItems,
   defaultValue = 1,
   disabled = false,
@@ -203,27 +205,29 @@ const SimpleSelect: FC<ISelectProps> = ({
     >
       <div className={classNames('relative h-9', wrapperClassName)}>
         <Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
-          <span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
-          <span className="absolute inset-y-0 right-0 flex items-center pr-2">
-            {selectedItem
-              ? (
-                <XMarkIcon
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setSelectedItem(null)
-                    onSelect({ name: '', value: '' })
-                  }}
-                  className="h-5 w-5 text-gray-400 cursor-pointer"
-                  aria-hidden="false"
-                />
-              )
-              : (
-                <ChevronDownIcon
-                  className="h-5 w-5 text-gray-400"
-                  aria-hidden="true"
-                />
-              )}
-          </span>
+          {renderTrigger ? renderTrigger(selectedItem) : <span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>}
+          {!renderTrigger && (
+            <span className="absolute inset-y-0 right-0 flex items-center pr-2">
+              {selectedItem
+                ? (
+                  <XMarkIcon
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setSelectedItem(null)
+                      onSelect({ name: '', value: '' })
+                    }}
+                    className="h-5 w-5 text-gray-400 cursor-pointer"
+                    aria-hidden="false"
+                  />
+                )
+                : (
+                  <ChevronDownIcon
+                    className="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                )}
+            </span>
+          )}
         </Listbox.Button>
         {!disabled && (
           <Transition
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index 35dae924be..b220f85ec8 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -6,6 +6,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { RiDeleteBinLine } from '@remixicon/react'
 import produce from 'immer'
+import { XMarkIcon } from '@heroicons/react/20/solid'
 import type { VarType as NumberVarType } from '../../../tool/types'
 import type {
   Condition,
@@ -33,6 +34,7 @@ import type {
 import { VarType } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 import { SimpleSelect as Select } from '@/app/components/base/select'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 const optionNameI18NPrefix = 'workflow.nodes.ifElse.optionName'
 
 type ConditionItemProps = {
@@ -166,6 +168,17 @@ const ConditionItem = ({
                   defaultValue={condition.key}
                   items={subVarOptions}
                   onSelect={item => handleSubVarKeyChange(item.value as string)}
+                  renderTrigger={item => (
+                    item
+                      ? <div className='flex items-center'>
+                        <div className='flex px-1.5 items-center h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark shadow-xs text-text-accent'>
+                          <Variable02 className='w-3.5 h-3.5 text-text-accent' />
+                          <div className='ml-0.5 system-xs-medium'>{item?.name}</div>
+                        </div>
+                        <XMarkIcon className='ml-0.5 w-3.5 h-3.5 text-gray-400' onClick={() => handleSubVarKeyChange('')} />
+                      </div>
+                      : <div className='text-gray-300 system-xs-medium'>{t('common.placeholder.select')}</div>
+                  )}
                 />
               )
               : (