feat: 输入框增加查看密码和隐藏密码事件和动作

baidu · Dec 6, 2024 · 5f5b918 · 5f5b918
1 parent d14c6b7
commit 5f5b918
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 2 deletions.
diff --git 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: '密码类型时触发隐藏真实密码'
     }
   ];
 

diff --git 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});
   }