feat(form): ProFormCaptcha onTiming callback (ant-design#7908)

* feat(captcha): onTimingFinish callback * feat: rm onTimingFinish, add onTiming * feat: memo * fix: onTiming memo describe --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
jaulz · Nov 18, 2023 · b04a280 · b04a280
1 parent 4e1dc70
commit b04a280
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/packages/form/src/components/Captcha/index.tsx b/packages/form/src/components/Captcha/index.tsx
@@ -15,6 +15,9 @@ export type ProFormCaptchaProps = ProFormFieldItemProps<InputProps> & {
   /** @name 获取验证码的方法 */
   onGetCaptcha: (mobile: string) => Promise<void>;
 
+  /** @name 计时回调 */
+  onTiming?: (count: number) => void;
+
   /** @name 渲染按钮的文字 */
   captchaTextRender?: (timing: boolean, count: number) => React.ReactNode;
 
@@ -42,6 +45,7 @@ const BaseProFormCaptcha: React.FC<ProFormCaptchaProps> = React.forwardRef(
       name,
       phoneName,
       fieldProps,
+      onTiming,
       captchaTextRender = (paramsTiming, paramsCount) => {
         return paramsTiming ? `${paramsCount} 秒后重新获取` : '获取验证码';
       },
@@ -89,6 +93,13 @@ const BaseProFormCaptcha: React.FC<ProFormCaptchaProps> = React.forwardRef(
       return () => clearInterval(interval);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [timing]);
+
+    useEffect(() => {
+      if (onTiming) {
+        onTiming(count);
+      }
+    }, [count, onTiming]);
+
     return (
       <div
         style={{

diff --git a/packages/form/src/components/FieldSet/demos/pro-form-captCha.tsx b/packages/form/src/components/FieldSet/demos/pro-form-captCha.tsx
@@ -58,6 +58,9 @@ export default () => {
             reject();
           });
         }}
+        onTiming={(count) => {
+          console.log('timing:', count);
+        }}
         fieldRef={captchaRef}
         fieldProps={{ ref: inputRef }}
         name="code"

diff --git a/packages/form/src/components/FieldSet/index.md b/packages/form/src/components/FieldSet/index.md
@@ -141,6 +141,7 @@ ProFormCaptcha 是为了支持中后台中常见的验证码功能开发的组
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | onGetCaptcha | 点击获取验证码的事件，如果配置了 phoneName 会自动注入 | `(phone)=>Promise<any>` | - |
+| onTiming | 计时数字监听 | `(count: number)=>void` | - |
 | captchaProps | 获取验证码按钮的 props，与 antd 的 props 相同 | `ButtonProps` | - |
 | countDown | 倒计时的秒数 | number | 60 |
 | captchaTextRender | 渲染计时的文案 | `(timing: boolean, count: number) => React.ReactNode` | - |