feat(antd/next): improve Submit/Reset API

alibaba · Jun 21, 2021 · 4eb2af0 · 4eb2af0
1 parent 6eef8c8
commit 4eb2af0
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 23 deletions.
diff --git a/packages/antd/docs/components/Reset.md b/packages/antd/docs/components/Reset.md
@@ -183,3 +183,9 @@ export default () => (
 ### Reset
 
 其余 API 参考 https://ant.design/components/button-cn/
+
+| 属性名                 | 类型                                                                                             | 描述                                  | 默认值 |
+| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------- | ------ |
+| onClick                | `(event: MouseEvent) => void \| boolean`                                                         | 点击事件，如果返回 false 可以阻塞重置 | -      |
+| onResetValidateSuccess | (payload: any) => void                                                                           | 重置校验成功事件                      | -      |
+| onResetValidateFailed  | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 重置校验失败事件                      | -      |
diff --git a/packages/antd/docs/components/Submit.md b/packages/antd/docs/components/Submit.md
@@ -104,7 +104,9 @@ export default () => (
 
 按钮相关的 API 属性，我们参考 https://ant.design/components/button-cn/ 即可，剩下是 Submit 组件独有的 API 属性
 
-| 属性名         | 类型                                                                                             | 描述                 | 默认值 |
-| -------------- | ------------------------------------------------------------------------------------------------ | -------------------- | ------ |
-| onSubmit       | `(values: any) => Promise<any> \| any`                                                           | 提交事件回调         | -      |
-| onSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调 | -      |
+| 属性名          | 类型                                                                                             | 描述                                  | 默认值 |
+| --------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------- | ------ |
+| onClick         | `(event: MouseEvent) => void \| boolean`                                                         | 点击事件，如果返回 false 可以阻塞提交 | -      |
+| onSubmit        | `(values: any) => Promise<any> \| any`                                                           | 提交事件回调                          | -      |
+| onSubmitSuccess | (payload: any) => void                                                                           | 提交成功响应事件                      | -      |
+| onSubmitFailed  | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调                  | -      |
diff --git a/packages/antd/src/reset/index.tsx b/packages/antd/src/reset/index.tsx
@@ -3,11 +3,21 @@ import { Button } from 'antd'
 import { ButtonProps } from 'antd/lib/button'
 import { useForm } from '@formily/react'
 
-export type IResetProps = Formily.Core.Types.IFieldResetOptions & ButtonProps
+export interface IResetProps
+  extends Formily.Core.Types.IFieldResetOptions,
+    ButtonProps {
+  onClick?: (e: React.MouseEvent<Element, MouseEvent>) => boolean | void
+  onResetValidateSuccess?: (payload: any) => void
+  onResetValidateFailed?: (
+    feedbacks: Formily.Core.Types.IFormFeedback[]
+  ) => void
+}
 
 export const Reset: React.FC<IResetProps> = ({
   forceClear,
   validate,
+  onResetValidateSuccess,
+  onResetValidateFailed,
   ...props
 }) => {
   const form = useForm()
@@ -16,12 +26,15 @@ export const Reset: React.FC<IResetProps> = ({
       {...props}
       onClick={(e) => {
         if (props.onClick) {
-          props.onClick(e)
+          if (props.onClick(e) === false) return
         }
-        form.reset('*', {
-          forceClear,
-          validate,
-        })
+        form
+          .reset('*', {
+            forceClear,
+            validate,
+          })
+          .then(onResetValidateSuccess)
+          .catch(onResetValidateFailed)
       }}
     >
       {props.children}

diff --git a/packages/next/docs/components/Reset.md b/packages/next/docs/components/Reset.md
@@ -183,3 +183,9 @@ export default () => (
 ### Reset
 
 其余 API 参考 https://fusion.design/pc/component/basic/button
+
+| 属性名                 | 类型                                                                                             | 描述                                  | 默认值 |
+| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------- | ------ |
+| onClick                | `(event: MouseEvent) => void \| boolean`                                                         | 点击事件，如果返回 false 可以阻塞重置 | -      |
+| onResetValidateSuccess | (payload: any) => void                                                                           | 重置校验成功事件                      | -      |
+| onResetValidateFailed  | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 重置校验失败事件                      | -      |
diff --git a/packages/next/docs/components/Submit.md b/packages/next/docs/components/Submit.md
@@ -104,7 +104,9 @@ export default () => (
 
 按钮相关的 API 属性，我们参考 https://fusion.design/pc/component/basic/button 即可，剩下是 Submit 组件独有的 API 属性
 
-| 属性名         | 类型                                                                                             | 描述                 | 默认值 |
-| -------------- | ------------------------------------------------------------------------------------------------ | -------------------- | ------ |
-| onSubmit       | `(values: any) => Promise<any> \| any`                                                           | 提交事件回调         | -      |
-| onSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调 | -      |
+| 属性名          | 类型                                                                                             | 描述                                  | 默认值 |
+| --------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------- | ------ |
+| onClick         | `(event: MouseEvent) => void \| boolean`                                                         | 点击事件，如果返回 false 可以阻塞提交 | -      |
+| onSubmit        | `(values: any) => Promise<any> \| any`                                                           | 提交事件回调                          | -      |
+| onSubmitSuccess | (payload: any) => void                                                                           | 提交成功响应事件                      | -      |
+| onSubmitFailed  | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调                  | -      |
diff --git a/packages/next/src/reset/index.tsx b/packages/next/src/reset/index.tsx
@@ -3,11 +3,21 @@ import { Button } from '@alifd/next'
 import { ButtonProps } from '@alifd/next/lib/button'
 import { useForm } from '@formily/react'
 
-export type IResetProps = Formily.Core.Types.IFieldResetOptions & ButtonProps
+export interface IResetProps
+  extends Formily.Core.Types.IFieldResetOptions,
+    ButtonProps {
+  onClick?: (e: React.MouseEvent<Element, MouseEvent>) => boolean | void
+  onResetValidateSuccess?: (payload: any) => void
+  onResetValidateFailed?: (
+    feedbacks: Formily.Core.Types.IFormFeedback[]
+  ) => void
+}
 
 export const Reset: React.FC<IResetProps> = ({
   forceClear,
   validate,
+  onResetValidateFailed,
+  onResetValidateSuccess,
   ...props
 }: IResetProps) => {
   const form = useForm()
@@ -16,12 +26,15 @@ export const Reset: React.FC<IResetProps> = ({
       {...props}
       onClick={(e) => {
         if (props.onClick) {
-          props.onClick(e)
+          if (props.onClick(e) === false) return
         }
-        form.reset('*', {
-          forceClear,
-          validate,
-        })
+        form
+          .reset('*', {
+            forceClear,
+            validate,
+          })
+          .then(onResetValidateSuccess)
+          .catch(onResetValidateFailed)
       }}
     >
       {props.children}

diff --git a/packages/next/src/submit/index.tsx b/packages/next/src/submit/index.tsx
@@ -4,12 +4,14 @@ import { ButtonProps } from '@alifd/next/lib/button'
 import { useForm, observer } from '@formily/react'
 
 interface ISubmitProps extends ButtonProps {
+  onClick?: (e: React.MouseEvent<Element, MouseEvent>) => boolean | void
   onSubmit?: (values: any) => Promise<any> | any
+  onSubmitSuccess?: (payload: any) => void
   onSubmitFailed?: (feedbacks: Formily.Core.Types.IFormFeedback[]) => void
 }
 
 export const Submit: React.FC<ISubmitProps> = observer(
-  ({ onSubmit, onSubmitFailed, ...props }: ISubmitProps) => {
+  ({ onSubmit, onSubmitFailed, onSubmitSuccess, ...props }: ISubmitProps) => {
     const form = useForm()
     return (
       <Button
@@ -19,10 +21,10 @@ export const Submit: React.FC<ISubmitProps> = observer(
         loading={props.loading !== undefined ? props.loading : form.submitting}
         onClick={(e) => {
           if (props.onClick) {
-            props.onClick(e)
+            if (props.onClick(e) === false) return
           }
           if (onSubmit) {
-            form.submit(onSubmit).catch(onSubmitFailed)
+            form.submit(onSubmit).then(onSubmitSuccess).catch(onSubmitFailed)
           }
         }}
       >