fix: InputPassword组件revealPassword属性没有update问题 (#4738)

This commit is contained in:
RUNZE LU 2022-06-29 20:35:44 +08:00 committed by GitHub
parent 4822f8d2ea
commit 0017d9c9fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 2 deletions

View File

@ -24,10 +24,33 @@ order: 35
} }
``` ```
## 配置密码显/隐藏
`revealPassword`属性可以设置是否展示密码显/隐按钮,默认为`true`。
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-password",
"name": "password",
"label": "密码",
"revealPassword": false
}
]
}
```
## 属性表 ## 属性表
请参考[输入框](./input-text) 请参考[输入框](./input-text)
| 属性名 | 类型 | 默认值 | 说明 |
| -------------- | --------- | ------ | --------------------- |
| revealPassword | `boolean` | `true` | 是否展示密码显/隐按钮 |
## 事件表 ## 事件表
请参考[输入框](./input-text) 请参考[输入框](./input-text)

View File

@ -220,6 +220,10 @@ export default class TextControl extends React.PureComponent<
: this.valueToString(props.value) : this.valueToString(props.value)
}); });
} }
if (prevProps.revealPassword !== props.revealPassword) {
/** 隐藏按钮的同时将密码设置为隐藏态 */
!props.revealPassword && this.setState({revealPassword: false});
}
} }
componentWillUnmount() { componentWillUnmount() {
@ -835,7 +839,11 @@ export default class TextControl extends React.PureComponent<
step={step} step={step}
onChange={this.handleNormalInputChange} onChange={this.handleNormalInputChange}
value={this.valueToString(value)} value={this.valueToString(value)}
className={cx(type === 'password' && revealPassword && 'TextControl-input-password')} className={cx(
type === 'password' &&
revealPassword &&
'TextControl-input-password'
)}
/> />
{clearable && !disabled && !readOnly && value ? ( {clearable && !disabled && !readOnly && value ? (
<a onClick={this.clearValue} className={`${ns}TextControl-clear`}> <a onClick={this.clearValue} className={`${ns}TextControl-clear`}>

View File

@ -1184,7 +1184,8 @@ export const detectProps = [
'minLength', 'minLength',
'maxLength', 'maxLength',
'embed', 'embed',
'displayMode' 'displayMode',
'revealPassword'
]; ];
export function asFormItem(config: Omit<FormItemConfig, 'component'>) { export function asFormItem(config: Omit<FormItemConfig, 'component'>) {