feat(hooks): add onSubmit hook and docs (#727)

alibaba · Mar 17, 2020 · b99be56 · b99be56
1 parent c0798c6
commit b99be56
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 7 deletions.
diff --git a/docs/zh-cn/jsx-develop/lifecycle.md b/docs/zh-cn/jsx-develop/lifecycle.md
@@ -30,6 +30,8 @@
 | ON_FORM_SUBMIT_VALIDATE_START   | "onFormSubmitValidateStart"   | 表单提交校验开始时触发                           | ` onFormSubmitValidateStart$ `   | FormState  |
 | ON_FORM_SUBMIT_VALIDATE_SUCCESS | "onFormSubmitValidateSuccess" | 表单提交校验成功时触发                           | ` onFormSubmitValidateSuccess$ ` | FormState  |
 | ON_FORM_SUBMIT_VALIDATE_FAILED  | "onFormSubmitValidateFailed"  | 表单提交校验失败时触发                           | ` onFormSubmitValidateFailed$ `  | FormState  |
+| ON_FORM_ON_SUBMIT_SUCCESS   | "onFormOnSubmitSuccess"   | 表单自定义onSubmit成功，入参为onSubmit返回值                           | ` onFormOnSubmitSuccess$ `   | any  |
+| ON_FORM_ON_SUBMIT_FAILED | "onFormOnSubmitFailed" | 表单自定义onSubmit失败，入参为onSubmit抛出异常                           | ` onFormOnSubmitFailed$ ` | Error  |
 | ON_FORM_VALUES_CHANGE           | "onFormValuesChange"          | 表单值变化时触发                                 | ` onFormValuesChange$ `          | FormState  |
 | ON_FORM_INITIAL_VALUES_CHANGE   | "onFormInitialValuesChange"   | 表单初始值变化时触发                             | ` onFormInitialValuesChange$ `   | FormState  |
 | ON_FORM_VALIDATE_START          | "onFormValidateStart"         | 表单校验开始时触发                               | ` onFormValidateStart$ `         | FormState  |

diff --git a/docs/zh-cn/schema-develop/lifecycle.md b/docs/zh-cn/schema-develop/lifecycle.md
@@ -30,6 +30,8 @@
 | ON_FORM_SUBMIT_VALIDATE_START   | "onFormSubmitValidateStart"   | 表单提交校验开始时触发                           | ` onFormSubmitValidateStart$ `   | FormState  |
 | ON_FORM_SUBMIT_VALIDATE_SUCCESS | "onFormSubmitValidateSuccess" | 表单提交校验成功时触发                           | ` onFormSubmitValidateSuccess$ ` | FormState  |
 | ON_FORM_SUBMIT_VALIDATE_FAILED  | "onFormSubmitValidateFailed"  | 表单提交校验失败时触发                           | ` onFormSubmitValidateFailed$ `  | FormState  |
+| ON_FORM_ON_SUBMIT_SUCCESS   | "onFormOnSubmitSuccess"   | 表单自定义onSubmit成功，入参为onSubmit返回值                           | ` onFormOnSubmitSuccess$ `   | any  |
+| ON_FORM_ON_SUBMIT_FAILED | "onFormOnSubmitFailed" | 表单自定义onSubmit失败，入参为onSubmit抛出异常                           | ` onFormOnSubmitFailed$ ` | Error  |
 | ON_FORM_VALUES_CHANGE           | "onFormValuesChange"          | 表单值变化时触发                                 | ` onFormValuesChange$ `          | FormState  |
 | ON_FORM_INITIAL_VALUES_CHANGE   | "onFormInitialValuesChange"   | 表单初始值变化时触发                             | ` onFormInitialValuesChange$ `   | FormState  |
 | ON_FORM_VALIDATE_START          | "onFormValidateStart"         | 表单校验开始时触发                               | ` onFormValidateStart$ `         | FormState  |

diff --git a/packages/antd/README.zh-cn.md b/packages/antd/README.zh-cn.md
@@ -2466,7 +2466,7 @@ interface IForm {
   unsafe_do_not_use_transform_data_path(path: FormPathPattern): FormPathPattern //eslint-disable-line
   registerField(props: IFieldStateProps): IField
   registerVirtualField(props: IVirtualFieldStateProps): IVirtualField
-  createMutators(field: IField): IMutators
+  createMutators(field: IField | FormPathPattern): IMutators
   getFormGraph(): IFormGraph
   setFormGraph(graph: IFormGraph): void
   subscribe(callback?: FormHeartSubscriber): number
@@ -2529,6 +2529,27 @@ interface IFormValidateResult {
 }
 ```
 
+#### IFormProps
+
+```typescript
+interface IFormProps<Value = {}, DefaultValue = {}, FormEffectPayload = any, FormActions = any> {
+    value?: Value;
+    defaultValue?: DefaultValue;
+    initialValues?: DefaultValue;
+    actions?: FormActions;
+    effects?: IFormEffect<FormEffectPayload, FormActions>;
+    form?: IForm;
+    onChange?: (values: Value) => void;
+    onSubmit?: (values: Value) => void | Promise<Value>;
+    onReset?: () => void;
+    onValidateFailed?: (valideted: IFormValidateResult) => void;
+    children?: React.ReactElement | React.ReactElement[] | ((form: IForm) => React.ReactElement);
+    useDirty?: boolean;
+    editable?: boolean | ((name: string) => boolean);
+    validateFirst?: boolean;
+}
+```
+
 #### ISchemaFormProps
 
 ```typescript

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -441,6 +441,12 @@ enum LifeCycleTypes { // Form pre-initialization trigger
   // Triggered when the form submission ends due to validate failed
   ON_FORM_SUBMIT_VALIDATE_FAILED = 'onFormSubmitValidateFailed',
 
+  // Triggered when the onSubmit success
+  ON_FORM_ON_SUBMIT_SUCCESS = 'onFormOnSubmitSuccess',
+
+  // Triggered when the onSubmit failed
+  ON_FORM_ON_SUBMIT_FAILED = 'onFormOnSubmitFailed',
+
   // Triggered when the form value changes
   ON_FORM_VALUES_CHANGE = 'onFormValuesChange',
 
@@ -629,7 +635,7 @@ interface IForm {
   /*
    * Create a field data operator, which will explain the returned API in detail later.
    */
-  createMutators(field: IField): IMutators
+  createMutators(field: IField | FormPathPattern): IMutators
   /*
    * Get the form observer tree
    */

diff --git a/packages/core/README.zh-cn.md b/packages/core/README.zh-cn.md
@@ -439,6 +439,8 @@ enum LifeCycleTypes {
   ON_FORM_SUBMIT_VALIDATE_START = 'onFormSubmitValidateStart', // 表单提交触发的校验
   ON_FORM_SUBMIT_VALIDATE_SUCCESS= 'onFormSubmitValidateSuccess', // 表单提交时因为校验成功而触发
   ON_FORM_SUBMIT_VALIDATE_FAILED = 'onFormSubmitValidateFailed', // 表单提交时因为校验失败而触发
+  ON_FORM_ON_SUBMIT_SUCCESS = 'onFormOnSubmitSuccess', // 表单自定义onSubmit成功
+  ON_FORM_ON_SUBMIT_FAILED = 'onFormOnSubmitFailed', // 表单自定义onSubmit失败
   ON_FORM_VALUES_CHANGE = 'onFormValuesChange', //表单值变化时触发
   ON_FORM_INITIAL_VALUES_CHANGE = 'onFormInitialValuesChange', //表单初始值变化时触发
   ON_FORM_VALIDATE_START = 'onFormValidateStart', //表单校验开始时触发
@@ -644,7 +646,7 @@ interface IForm {
   /*
    * 创建字段数据操作器，后面会详细解释返回的API
    */
-  createMutators(field: IField): IMutators
+  createMutators(field: IField | FormPathPattern): IMutators
 
   /*
    * 获取表单观察者树

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1045,7 +1045,9 @@ export function createForm<FieldProps, VirtualFieldProps>(
       if (isFn(onSubmit)) {
         try {
           payload = await Promise.resolve(onSubmit(values))
+          heart.publish(LifeCycleTypes.ON_FORM_ON_SUBMIT_SUCCESS, payload)
         } catch (e) {
+          heart.publish(LifeCycleTypes.ON_FORM_ON_SUBMIT_FAILED, e)
           new Promise(() => {
             throw e
           })

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -35,6 +35,8 @@ export enum LifeCycleTypes {
   ON_FORM_SUBMIT_VALIDATE_START = 'onFormSubmitValidateStart',
   ON_FORM_SUBMIT_VALIDATE_SUCCESS = 'onFormSubmitValidateSuccess',
   ON_FORM_SUBMIT_VALIDATE_FAILED = 'onFormSubmitValidateFailed',
+  ON_FORM_ON_SUBMIT_SUCCESS = 'onFormOnSubmitSuccess',
+  ON_FORM_ON_SUBMIT_FAILED = 'onFormOnSubmitFailed',
   ON_FORM_VALUES_CHANGE = 'onFormValuesChange',
   ON_FORM_INITIAL_VALUES_CHANGE = 'onFormInitialValuesChange',
   ON_FORM_VALIDATE_START = 'onFormValidateStart',

diff --git a/packages/meet/README.zh-cn.md b/packages/meet/README.zh-cn.md
@@ -1704,7 +1704,7 @@ interface IForm {
   unsafe_do_not_use_transform_data_path(path: FormPathPattern): FormPathPattern //eslint-disable-line
   registerField(props: IFieldStateProps): IField
   registerVirtualField(props: IVirtualFieldStateProps): IVirtualField
-  createMutators(field: IField): IMutators
+  createMutators(field: IField | FormPathPattern): IMutators
   getFormGraph(): IFormGraph
   setFormGraph(graph: IFormGraph): void
   subscribe(callback?: FormHeartSubscriber): number

diff --git a/packages/next/README.zh-cn.md b/packages/next/README.zh-cn.md
@@ -2568,7 +2568,7 @@ interface IForm {
   unsafe_do_not_use_transform_data_path(path: FormPathPattern): FormPathPattern //eslint-disable-line
   registerField(props: IFieldStateProps): IField
   registerVirtualField(props: IVirtualFieldStateProps): IVirtualField
-  createMutators(field: IField): IMutators
+  createMutators(field: IField | FormPathPattern): IMutators
   getFormGraph(): IFormGraph
   setFormGraph(graph: IFormGraph): void
   subscribe(callback?: FormHeartSubscriber): number
@@ -2631,6 +2631,27 @@ interface IFormValidateResult {
 }
 ```
 
+#### IFormProps
+
+```typescript
+interface IFormProps<Value = {}, DefaultValue = {}, FormEffectPayload = any, FormActions = any> {
+    value?: Value;
+    defaultValue?: DefaultValue;
+    initialValues?: DefaultValue;
+    actions?: FormActions;
+    effects?: IFormEffect<FormEffectPayload, FormActions>;
+    form?: IForm;
+    onChange?: (values: Value) => void;
+    onSubmit?: (values: Value) => void | Promise<Value>;
+    onReset?: () => void;
+    onValidateFailed?: (valideted: IFormValidateResult) => void;
+    children?: React.ReactElement | React.ReactElement[] | ((form: IForm) => React.ReactElement);
+    useDirty?: boolean;
+    editable?: boolean | ((name: string) => boolean);
+    validateFirst?: boolean;
+}
+```
+
 #### ISchemaFormProps
 
 ```typescript

diff --git a/packages/react/README.md b/packages/react/README.md
@@ -2661,7 +2661,7 @@ interface IForm {
   /*
    * Create a field data operator, which will explain the returned API in detail later.
    */
-  createMutators(field: IField): IMutators
+  createMutators(field: IField | FormPathPattern): IMutators
   
   /*
    * Get the form observer tree

diff --git a/packages/react/README.zh-cn.md b/packages/react/README.zh-cn.md
@@ -2675,7 +2675,7 @@ interface IForm {
   /*
    * 创建字段数据操作器，后面会详细解释返回的API
    */
-  createMutators(field: IField): IMutators
+  createMutators(field: IField | FormPathPattern): IMutators
 
   /*
    * 获取表单观察者树

diff --git a/packages/react/src/shared.ts b/packages/react/src/shared.ts
@@ -27,6 +27,7 @@ export const createFormActions = (): IFormActions => {
     'hasChanged',
     'validate',
     'clearErrors',
+    'createMutators',
     'setFormState',
     'getFormState',
     'setFieldState',
@@ -215,6 +216,12 @@ export const FormEffectHooks = {
   ),
   onFormInit$: createEffectHook<IFormState>(LifeCycleTypes.ON_FORM_INIT),
   onFormChange$: createEffectHook<IFormState>(LifeCycleTypes.ON_FORM_CHANGE),
+  onFormOnSubmitSuccess$: createEffectHook<IFormState>(
+    LifeCycleTypes.ON_FORM_ON_SUBMIT_SUCCESS
+  ),
+  onFormOnSubmitFailed$: createEffectHook<IFormState>(
+    LifeCycleTypes.ON_FORM_ON_SUBMIT_FAILED
+  ),
   onFormInputChange$: createEffectHook<IFormState>(
     LifeCycleTypes.ON_FORM_INPUT_CHANGE
   ),