diff --git a/packages/amis-editor/src/plugin/Form/InputText.tsx b/packages/amis-editor/src/plugin/Form/InputText.tsx index 675f5b112ab..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: '密码类型时触发隐藏真实密码' } ]; 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}); }