feat: PasswordInput 新增清空输入框ref函数 (#58)

Author: AlwaysLoveme

packages/rc-ui-lib/src/password-input/PasswordInput.tsx

@@ -63,6 +63,9 @@ const PasswordInput = forwardRef<PasswordInputInstance, PasswordInputProps>((pro
       onBlur();
       nativeInputRef.current?.blur();
     },
+    resetValue: () => {
+      setInputValue('');
+    },
   }));
 
   const onTouchStart = (event) => {

packages/rc-ui-lib/src/password-input/PropsType.ts

@@ -32,4 +32,9 @@ export interface PasswordInputProps {
 export type PasswordInputInstance = {
   focus: () => void;
   blur: () => void;
+  /**
+   * 清空密码
+   * @returns
+   */
+  resetValue: () => void;
 };

packages/rc-ui-lib/src/password-input/README.md

@@ -145,12 +145,20 @@ const handleFill = () => {
 | onBlur   | 输入框失焦回调 | -             |
 | onFocus  | 输入框聚焦回调 | -             |
 
+### Ref
+
+| 事件名     | 说明                                     | 回调参数 |
+| ---------- | ---------------------------------------- | -------- |
+| focus      | 输入框聚焦回调，若是原生输入则会自动聚焦 | -        |
+| blur       | 输入框失焦，若是原生输入则会自动失焦     | -        |
+| resetValue | 清空输入框                               | -        |
+
 ### 类型定义
 
 组件导出以下类型定义：
 
 ```js
-import type { PasswordInputProps } from 'rc-ui-lib';
+import type { PasswordInputProps, PasswordInputInstance } from 'rc-ui-lib';
 ```
 
 ## 主题定制

packages/rc-ui-lib/src/password-input/demo/index.tsx

@@ -1,22 +1,26 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { components } from 'site-mobile-demo';
 import PasswordInput from '..';
+import Button from '../../button';
 import { NumberKeyboard } from '../..';
 import './style.less';
 
+import type { PasswordInputInstance } from '..';
+
 const initialValue = {
   nativeInput: '123',
   showInfo: '123',
   addGutter: '123',
   basicUsage: '123',
   removeMask: '123',
   customLength: '123',
+  setValue: '123',
 };
 
 export default (): React.ReactNode => {
   const { DemoSection, DemoBlock } = components;
 
-  const [values] = useState(initialValue);
+  const [values, setValues] = useState(initialValue);
   const [current, setCurrent] = useState(null);
 
   const [errorInfo, setErrorInfo] = useState<string>('');
@@ -27,6 +31,9 @@ export default (): React.ReactNode => {
   const addGutterRef = useRef(null);
   const removeMaskRef = useRef(null);
   const showInfoRef = useRef(null);
+  const setValueRef = useRef(null);
+
+  const psdRef = useRef<PasswordInputInstance>(null);
 
   const refMap = {
     showInfo: showInfoRef,
@@ -35,6 +42,7 @@ export default (): React.ReactNode => {
     basicUsage: basicUsageRef,
     removeMask: removeMaskRef,
     customLength: customLengthRef,
+    setValue: setValueRef,
   };
 
   useEffect(() => {
@@ -127,6 +135,27 @@ export default (): React.ReactNode => {
           keyboard={<NumberKeyboard />}
         />
       </DemoBlock>
+      <DemoBlock ref={setValueRef} card title="手动清空密码">
+        <Button
+          type="primary"
+          onClick={() => {
+            psdRef.current?.resetValue();
+          }}
+          style={{
+            margin: 'var(--rc-password-input-margin) var(--rc-padding-md)',
+          }}
+        >
+          清空密码
+        </Button>
+        <PasswordInput
+          ref={psdRef}
+          value={values.setValue}
+          mask={false}
+          focused={current === 'setValue'}
+          onBlur={handleBlur}
+          onFocus={() => handleFocus('setValue')}
+        />
+      </DemoBlock>
     </DemoSection>
   );
 };