From adaf1b3f0436fee09c8eba62e0dcaa1226f0a1be Mon Sep 17 00:00:00 2001
From: F-jianchao <161407305+F-jianchao@users.noreply.github.com>
Date: Fri, 6 Dec 2024 18:30:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BE=93=E5=85=A5=E6=A1=86=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=9F=A5=E7=9C=8B=E5=AF=86=E7=A0=81=E5=92=8C=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F=E5=AF=86=E7=A0=81=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8?=
 =?UTF-8?q?=E4=BD=9C=EF=BC=8C=E8=B0=83=E6=95=B4=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=85=8D=E7=BD=AE=20(#11334)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 文本框自定义样式配置调整

* feat: 输入框增加查看密码和隐藏密码事件和动作
---
 .../amis-editor/src/plugin/Form/InputText.tsx | 89 ++++++++++++++++---
 .../amis/src/renderers/Form/InputText.tsx     | 22 ++++-
 2 files changed, 98 insertions(+), 13 deletions(-)

diff --git a/packages/amis-editor/src/plugin/Form/InputText.tsx b/packages/amis-editor/src/plugin/Form/InputText.tsx
index 2465de4d427..727d909cd31 100644
--- a/packages/amis-editor/src/plugin/Form/InputText.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputText.tsx
@@ -16,7 +16,7 @@ import {
   getActionCommonProps
 } from '../../renderer/event-control/helper';
 import {inputStateTpl} from '../../renderer/style-control/helper';
-import {resolveOptionType} from '../../util';
+import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 
 const isText = 'this.type === "input-text"';
 const isPassword = 'this.type === "input-password"';
@@ -174,6 +174,52 @@ export class TextControlPlugin extends BasePlugin {
           }
         ];
       }
+    },
+    {
+      eventName: 'review',
+      eventLabel: '查看密码',
+      description: '点击查看密码图标时',
+      dataSchema: (manager: EditorManager) => {
+        const {value} = resolveOptionEventDataSchame(manager);
+
+        return [
+          {
+            type: 'object',
+            properties: {
+              data: {
+                type: 'object',
+                title: '数据',
+                properties: {
+                  value
+                }
+              }
+            }
+          }
+        ];
+      }
+    },
+    {
+      eventName: 'encrypt',
+      eventLabel: '隐藏密码',
+      description: '点击隐藏密码图标时',
+      dataSchema: (manager: EditorManager) => {
+        const {value} = resolveOptionEventDataSchame(manager);
+
+        return [
+          {
+            type: 'object',
+            properties: {
+              data: {
+                type: 'object',
+                title: '数据',
+                properties: {
+                  value
+                }
+              }
+            }
+          }
+        ];
+      }
     }
     // 貌似无效，先下掉
     // {
@@ -207,6 +253,16 @@ export class TextControlPlugin extends BasePlugin {
       actionLabel: '赋值',
       description: '触发组件数据更新',
       ...getActionCommonProps('setValue')
+    },
+    {
+      actionType: 'review',
+      actionLabel: '查看密码',
+      description: '密码类型时触发查看真实密码'
+    },
+    {
+      actionType: 'encrypt',
+      actionLabel: '隐藏密码',
+      description: '密码类型时触发隐藏真实密码'
     }
   ];
 
@@ -447,21 +503,30 @@ export class TextControlPlugin extends BasePlugin {
                 })
               ]
             },
-            getSchemaTpl('theme:cssCode', {
-              themeClass: [
+            getSchemaTpl('theme:singleCssCode', {
+              selectors: [
                 {
-                  name: '输入框',
-                  value: '',
-                  className: 'inputControlClassName',
-                  state: ['default', 'hover', 'active']
+                  label: '表单项基本样式',
+                  isRoot: true,
+                  selector: '.cxd-from-item'
                 },
                 {
-                  name: 'addOn',
-                  value: 'addOn',
-                  className: 'addOnClassName'
+                  label: '标题样式',
+                  selector: '.cxd-Form-label'
+                },
+                {
+                  label: '文本框基本样式',
+                  selector: '.cxd-TextControl'
+                },
+                {
+                  label: '输入框外层样式',
+                  selector: '.cxd-TextControl-input'
+                },
+                {
+                  label: '输入框样式',
+                  selector: '.cxd-TextControl-input input'
                 }
-              ],
-              isFormItem: true
+              ]
             })
           ],
           {...context?.schema, configTitle: 'style'}
diff --git a/packages/amis/src/renderers/Form/InputText.tsx b/packages/amis/src/renderers/Form/InputText.tsx
index 5643f022190..f7200a6794e 100644
--- a/packages/amis/src/renderers/Form/InputText.tsx
+++ b/packages/amis/src/renderers/Form/InputText.tsx
@@ -125,6 +125,8 @@ export type InputTextRendererEvent =
   | 'focus'
   | 'click'
   | 'change'
+  | 'review' // 查看密码事件
+  | 'encrypt' // 隐藏密码事件
   | 'enter';
 
 export interface TextProps extends OptionsControlProps, SpinnerExtraProps {
@@ -277,6 +279,10 @@ export default class TextControl extends React.PureComponent<
       this.clearValue();
     } else if (actionType === 'focus') {
       this.focus();
+    } else if (actionType === 'review') {
+      this.setState({revealPassword: true});
+    } else if (actionType === 'encrypt') {
+      this.setState({revealPassword: false});
     }
   }
 
@@ -986,7 +992,21 @@ export default class TextControl extends React.PureComponent<
     );
   }
 
-  toggleRevealPassword() {
+  async toggleRevealPassword() {
+    const {dispatchEvent, value} = this.props;
+    const eventName = this.state.revealPassword ? 'encrypt' : 'review';
+
+    const rendererEvent = await dispatchEvent(
+      eventName,
+      resolveEventData(this.props, {
+        value
+      })
+    );
+
+    if (rendererEvent?.prevented || rendererEvent?.stoped) {
+      return;
+    }
+
     this.setState({revealPassword: !this.state.revealPassword});
   }