diff --git a/components/input/Password.tsx b/components/input/Password.tsx index a1c4d8bb5fc7..490ce3713ce9 100644 --- a/components/input/Password.tsx +++ b/components/input/Password.tsx @@ -11,6 +11,7 @@ export interface PasswordProps extends InputProps { readonly inputPrefixCls?: string; readonly action?: string; visibilityToggle?: boolean; + iconRender?: (visible: boolean) => React.ReactNode; } export interface PasswordState { @@ -28,6 +29,7 @@ export default class Password extends React.Component (visible ? : ), }; state: PasswordState = { @@ -44,9 +46,10 @@ export default class Password extends React.Component { - const { action } = this.props; + const { action, iconRender = () => null } = this.props; + const { visible } = this.state; const iconTrigger = ActionMap[action!] || ''; - const icon = this.state.visible ? EyeOutlined : EyeInvisibleOutlined; + const icon = iconRender(visible); const iconProps = { [iconTrigger]: this.onVisibleChange, className: `${prefixCls}-icon`, @@ -62,7 +65,7 @@ export default class Password extends React.Component{icon}, iconProps); }; saveInput = (instance: Input) => { @@ -102,7 +105,7 @@ export default class Password extends React.Component - - - + - - - + + + + - - + +
+ + + + + + + + +
+ `; exports[`renders ./components/input/demo/presuffix.md correctly 1`] = ` diff --git a/components/input/demo/password-input.md b/components/input/demo/password-input.md index 5059b74988ba..5b293b64b7e7 100644 --- a/components/input/demo/password-input.md +++ b/components/input/demo/password-input.md @@ -14,7 +14,17 @@ title: Input type of password. ```jsx -import { Input } from 'antd'; +import { Input, Space } from 'antd'; +import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; -ReactDOM.render(, mountNode); +ReactDOM.render( + + + (visible ? : )} + /> + , + mountNode, +); ```