feat(utils): 新增 createSubmit

src/taro/submit.ts

@@ -1,77 +1,30 @@
+import { createSubmit } from '../utils'
 import { hideLoading, showLoading, showToast } from '@tarojs/taro'
-import { wait } from '../utils'
 
-export interface SubmitActionPayload {
-  /**
-   * 开始提示。
-   *
-   * @param message 提示信息
-   */
-  start(message: string): Promise<any>
-
-  /**
-   * 失败提示。
-   *
-   * @param message 提示信息
-   * @param duration 持续时间（毫秒），默认 1500
-   */
-  fail(message: string, duration?: number): Promise<any>
-
-  /**
-   * 成功提示。
-   *
-   * @param message 提示信息
-   * @param duration 持续时间（毫秒），默认 1500
-   */
-  success(message: string, duration?: number): Promise<any>
-}
-
-/**
- * 对提交类行为的封装。
- *
- * @param action 行为
- * @returns 返回行为结果
- * @example
- * ```typescript
- * await submit(async _ => {
- *   await _.start('保存中...')
- *   await save(data)
- *   await _.success('保存成功')
- * })
- * ```
- */
-export function submit<TResult>(
-  action: (payload: SubmitActionPayload) => Promise<TResult>,
-): Promise<TResult> {
-  const payload: SubmitActionPayload = {
-    start(message) {
-      showLoading({
-        title: message,
-        mask: true,
-      })
-      return Promise.resolve()
-    },
-    fail(message, duration = 1500) {
-      hideLoading()
-      showToast({
-        title: message,
-        icon: 'none',
-        duration: duration,
-      })
-      return wait(duration)
-    },
-    success(message, duration = 1500) {
-      hideLoading()
-      showToast({
-        title: message,
-        icon: 'success',
-        duration: duration,
-      })
-      return wait(duration)
-    },
-  }
-  return action(payload).then(res => {
+export const submit = createSubmit({
+  start(message) {
+    showLoading({
+      title: message,
+      mask: true,
+    })
+  },
+  fail(message, duration) {
+    hideLoading()
+    showToast({
+      title: message,
+      icon: 'none',
+      duration: duration,
+    })
+  },
+  success(message, duration) {
+    hideLoading()
+    showToast({
+      title: message,
+      icon: 'success',
+      duration: duration,
+    })
+  },
+  complete() {
     hideLoading()
-    return res
-  })
-}
+  },
+})

src/taro/useSubmit.ts

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react'
-import { submit, SubmitActionPayload } from './submit'
+import { submit } from './submit'
+import { SubmitActionPayload } from '../utils'
 
 export function useSubmit<TResult>(
   action: (payload: SubmitActionPayload) => Promise<TResult>,

src/utils/createSubmit.test.ts

@@ -0,0 +1,28 @@
+import { createSubmit } from './createSubmit'
+
+describe('createSubmit', () => {
+  test('表现正常', async () => {
+    const start = jest.fn()
+    const fail = jest.fn()
+    const success = jest.fn().mockImplementation(async () => 0)
+    const complete = jest.fn()
+
+    const submit = createSubmit({
+      start,
+      fail,
+      success,
+      complete,
+    })
+
+    await submit(async _ => {
+      await _.start('开始')
+      await _.fail('失败', 10)
+      await _.success('成功', 20)
+    })
+
+    expect(start).toBeCalled().toBeCalledTimes(1).toBeCalledWith('开始')
+    expect(fail).toBeCalled().toBeCalledTimes(1).toBeCalledWith('失败', 10)
+    expect(success).toBeCalled().toBeCalledTimes(1).toBeCalledWith('成功', 20)
+    expect(complete).toBeCalled().toBeCalledTimes(1)
+  })
+})

src/utils/createSubmit.ts

@@ -0,0 +1,90 @@
+import { AsyncOrSync } from '../types'
+import { run } from './run'
+import { wait } from './wait'
+
+export interface CreateSubmitOptions {
+  /**
+   * 开始回调。
+   *
+   * @param message 提示信息
+   */
+  start(message: string): AsyncOrSync<any>
+
+  /**
+   * 失败回调。
+   *
+   * @param message 提示信息
+   * @param duration 持续时间（毫秒）
+   */
+  fail(message: string, duration: number): AsyncOrSync<any>
+
+  /**
+   * 成功回调。
+   *
+   * @param message 提示信息
+   * @param duration 持续时间（毫秒）
+   */
+  success(message: string, duration: number): AsyncOrSync<any>
+
+  /**
+   * 完成回调。
+   */
+  complete(): AsyncOrSync<any>
+}
+
+export interface SubmitActionPayload {
+  /**
+   * 开始提示。
+   *
+   * @param message 提示信息
+   */
+  start(message: string): Promise<any>
+
+  /**
+   * 失败提示。
+   *
+   * @param message 提示信息
+   * @param duration 持续时间（毫秒），默认 1500
+   */
+  fail(message: string, duration?: number): Promise<any>
+
+  /**
+   * 成功提示。
+   *
+   * @param message 提示信息
+   * @param duration 持续时间（毫秒），默认 1500
+   */
+  success(message: string, duration?: number): Promise<any>
+}
+
+export type CreateSubmitResult = <TResult>(
+  action: (payload: SubmitActionPayload) => Promise<TResult>,
+) => Promise<TResult>
+
+/**
+ * 创建提交类行为。
+ *
+ * @param options 选项
+ */
+export function createSubmit(options: CreateSubmitOptions): CreateSubmitResult {
+  const payload: SubmitActionPayload = {
+    start(message) {
+      return run(() => options.start(message))
+    },
+    fail(message, duration = 1500) {
+      return run(() => options.fail(message, duration)).then(() =>
+        wait(duration),
+      )
+    },
+    success(message, duration = 1500) {
+      return run(() => options.success(message, duration)).then(() =>
+        wait(duration),
+      )
+    },
+  }
+  return action => {
+    return action(payload).then(res => {
+      return run(() => options.complete()).then(() => res)
+    })
+  }
+}

src/utils/index.ts

@@ -11,6 +11,7 @@ export * from 'lodash-es'
 // @index(['./**/*.ts', '!./**/*.test.*'], f => `export * from '${f.path}'`)
 export * from './base64'
 export * from './bindEvent'
+export * from './createSubmit'
 export * from './dedent'
 export * from './EventBus'
 export * from './formatNumber'