From 2696d9a9e0ad4b64df107336efc04a09832088d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Thu, 15 Aug 2024 10:38:01 +0800
Subject: [PATCH] feat: add Password component to flow

---
 web/components/flow/node-param-handler.tsx     |  3 +++
 web/components/flow/node-renderer/index.ts     |  1 +
 web/components/flow/node-renderer/input.tsx    |  1 +
 web/components/flow/node-renderer/password.tsx | 18 ++++++++++++++++++
 4 files changed, 23 insertions(+)
 create mode 100644 web/components/flow/node-renderer/password.tsx

diff --git a/web/components/flow/node-param-handler.tsx b/web/components/flow/node-param-handler.tsx
index 2dbccd3fc..165eb59bb 100644
--- a/web/components/flow/node-param-handler.tsx
+++ b/web/components/flow/node-param-handler.tsx
@@ -15,6 +15,7 @@ import {
   RenderTreeSelect,
   RenderTimePicker,
   RenderTextArea,
+  RenderPassword,
 } from './node-renderer';
 import { convertKeysToCamelCase } from '@/utils/flow';
 
@@ -138,6 +139,8 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
       case 'time_picker':
         return <RenderTimePicker {...props} />;
       case 'tree_select':
+        return <RenderPassword {...props} />;
+      case 'password':
         return <RenderTreeSelect {...props} />;
       default:
         return null;
diff --git a/web/components/flow/node-renderer/index.ts b/web/components/flow/node-renderer/index.ts
index 4eb0d5c39..59f1e44ef 100644
--- a/web/components/flow/node-renderer/index.ts
+++ b/web/components/flow/node-renderer/index.ts
@@ -8,3 +8,4 @@ export * from './textarea';
 export * from './slider';
 export * from './time-picker';
 export * from './tree-select';
+export * from './password';
diff --git a/web/components/flow/node-renderer/input.tsx b/web/components/flow/node-renderer/input.tsx
index 538d14081..60c559baa 100644
--- a/web/components/flow/node-renderer/input.tsx
+++ b/web/components/flow/node-renderer/input.tsx
@@ -18,6 +18,7 @@ export const RenderInput = (params: Props) => {
       className="w-full"
       placeholder="please input"
       defaultValue={defaultValue}
+      allowClear
       onChange={(e) => {
         onChange(e.target.value);
       }}
diff --git a/web/components/flow/node-renderer/password.tsx b/web/components/flow/node-renderer/password.tsx
new file mode 100644
index 000000000..93dec6e85
--- /dev/null
+++ b/web/components/flow/node-renderer/password.tsx
@@ -0,0 +1,18 @@
+import { IFlowNodeParameter } from '@/types/flow';
+import { Input } from 'antd';
+import { convertKeysToCamelCase } from '@/utils/flow';
+
+const { Password } = Input;
+
+type TextAreaProps = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderPassword = (params: TextAreaProps) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  return <Password {...attr} placeholder="input password" defaultValue={defaultValue} onChange={onChange} />;
+};