From db7dccf349f96372955e4802930669b7a8165cda Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 21 Feb 2024 11:33:25 +0800
Subject: [PATCH] feat: type selector

---
 .../_base/components/editor/code-editor.tsx   |  4 +-
 .../_base/components/editor/type-selector.tsx | 59 +++++++++++++++++++
 .../components/workflow/nodes/code/panel.tsx  | 19 ++++++
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/workflow/nodes/_base/components/editor/type-selector.tsx

diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
index 82d62f8695..e684d74b9e 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
@@ -7,6 +7,7 @@ import Base from './base'
 type Props = {
   value: string
   onChange: (value: string) => void
+  title: JSX.Element
   codeLanguage: string
   onCodeLanguageChange: (codeLanguage: CodeLanguage) => void
 }
@@ -14,13 +15,14 @@ type Props = {
 const CodeEditor: FC<Props> = ({
   value,
   onChange,
+  title,
 }) => {
   const [isFocus, setIsFocus] = React.useState(false)
 
   return (
     <div>
       <Base
-        title={<div>Code</div>}
+        title={title}
         value={value}
         isFocus={isFocus}
         minHeight={86}
diff --git a/web/app/components/workflow/nodes/_base/components/editor/type-selector.tsx b/web/app/components/workflow/nodes/_base/components/editor/type-selector.tsx
new file mode 100644
index 0000000000..6fc6c295fe
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/editor/type-selector.tsx
@@ -0,0 +1,59 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useBoolean, useClickAway } from 'ahooks'
+import cn from 'classnames'
+import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
+type Item = {
+  value: string
+  label: string
+}
+type Props = {
+  list: Item[]
+  value: string
+  onChange: (value: any) => void
+  uppercase?: boolean
+  popupClassName?: string
+}
+
+const TypeSelector: FC<Props> = ({
+  list,
+  value,
+  onChange,
+  uppercase,
+  popupClassName,
+}) => {
+  const item = list.find(item => item.value === value)
+  const [showOption, { setFalse: setHide, toggle: toggleShow }] = useBoolean(false)
+  const ref = React.useRef(null)
+  useClickAway(() => {
+    setHide()
+  }, ref)
+  return (
+    <div className='relative left-[-8px]' ref={ref}>
+      <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('text-sm font-semibold', uppercase && 'uppercase')}>{item?.label}</div>
+        <ChevronSelectorVertical className='w-3 h-3 ' />
+      </div>
+      {showOption && (
+        <div className={cn(popupClassName, 'absolute z-10 top-[24px] w-[120px]  p-1 border border-gray-200 shadow-lg rounded-lg bg-white')}>
+          {list.map(item => (
+            <div
+              key={item.value}
+              onClick={() => {
+                setHide()
+                onChange(item.value)
+              }}
+              className={cn(uppercase && 'uppercase', 'flex items-center h-[30px] min-w-[44px] px-3 rounded-lg cursor-pointer text-[13px] font-medium text-gray-700 hover:bg-gray-50')}
+            >{item.label}</div>
+          ))
+          }
+        </div>
+      )
+      }
+    </div>
+  )
+}
+export default React.memo(TypeSelector)
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index aa5c949768..83ebab7d8b 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -2,13 +2,25 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
 import { mockData } from './mock'
+import { CodeLanguage } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import TypeSelector from '@/app/components/workflow/nodes/_base/components/editor/type-selector'
 const i18nPrefix = 'workflow.nodes.code'
 
+const codeLanguages = [
+  {
+    label: 'Python3',
+    value: CodeLanguage.python3,
+  },
+  {
+    label: 'JavaScript',
+    value: CodeLanguage.javascript,
+  },
+]
 const Panel: FC = () => {
   const { t } = useTranslation()
   const readOnly = false
@@ -36,6 +48,13 @@ const Panel: FC = () => {
       </Field>
       <Split />
       <CodeEditor
+        title={
+          <TypeSelector
+            list={codeLanguages}
+            value={inputs.code_language}
+            onChange={handleCodeLanguageChange}
+          />
+        }
         value={inputs.code}
         onChange={handleCodeChange}
         codeLanguage={inputs.code_language}