feat/use_antd_table (#51)

* refactor: 重新调整 useAntdTable 的 API * feat: change useAntdTable API table to tableProps
alibaba · Aug 30, 2019 · b7043c8 · b7043c8
1 parent 96eb72e
commit b7043c8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 35 deletions.
diff --git a/src/useAntdTable/index.mdx b/src/useAntdTable/index.mdx
@@ -45,7 +45,7 @@ import useAntdTable from './';
           }));
       }
 
-      const { table } = useAntdTable(getTableData, [gender], {
+      const { tableProps } = useAntdTable(getTableData, [gender], {
         defaultPageSize: 5
       });
 
@@ -87,7 +87,7 @@ import useAntdTable from './';
           <Table
             columns={columns}
             rowKey='email'
-            {...table}
+            {...tableProps}
           />
         </>
       )
@@ -112,7 +112,7 @@ import useAntdTable from './';
 
 ```
 const {
-  table:{
+  tableProps:{
     dataSource: any[],
     loading: boolean,
     onChange: (e: PaginationConfig) => void,
@@ -155,12 +155,12 @@ params:(
 
 | 参数                      | 说明                            | 类型                          | 默认值             |
 |---------------------------|---------------------------------|-------------------------------|--------------------|
-| table.loading             | 是否正在加载                    | boolean                       | false              |
-| table.dataSource          | table 需要使用的数据            | array                         | -                  |
-| table.onChange            | antd Table 组件的 onChange 函数 | (e: PaginationConfig) => void | -                  |
-| table.pagination.current  | 当前页数                        | number                        | 1                  |
-| table.pagination.pageSize | 每页数据量                      | number                        | 10                 |
-| table.pagination.total    | 数据总量                        | number                        | 0                  |
+| tableProps.loading             | 是否正在加载                    | boolean                       | false              |
+| tableProps.dataSource          | table 需要使用的数据            | array                         | -                  |
+| tableProps.onChange            | antd Table 组件的 onChange 函数 | (e: PaginationConfig) => void | -                  |
+| tableProps.pagination.current  | 当前页数                        | number                        | 1                  |
+| tableProps.pagination.pageSize | 每页数据量                      | number                        | 10                 |
+| tableProps.pagination.total    | 数据总量                        | number                        | 0                  |
 | refresh                   | 刷新当前数据                    | () => void                    | -                  |
 | search.type               | 搜索类型                        | 'simple' \| 'advance'        |'simple' |
 | search.changeType         | 触发搜索类型切换                | () => void                    | -                  |

diff --git a/src/useAntdTable/index.ts b/src/useAntdTable/index.ts
@@ -2,13 +2,25 @@ import { WrappedFormUtils } from 'antd/lib/form/Form';
 import { PaginationConfig } from 'antd/lib/pagination';
 import { DependencyList, useEffect, useReducer, useRef } from 'react';
 import { useUpdateEffect } from 'react-use';
+import useAsync from '../useAsync';
 
 interface UseTableFormUtils extends WrappedFormUtils {
   getFieldInstance?: (name: string) => {};
 }
 
 export interface ReturnValue<T> {
-  table: {
+  /* table 已经废弃 */
+  table?: {
+    dataSource: T;
+    loading: boolean;
+    onChange: (e: PaginationConfig) => void;
+    pagination: {
+      current: number;
+      pageSize: number;
+      total: number;
+    };
+  };
+  tableProps: {
     dataSource: T;
     loading: boolean;
     onChange: (e: PaginationConfig) => void;
@@ -53,9 +65,6 @@ class UseTableInitState {
   // 搜索类型，简单、高级
   searchType: 'simple' | 'advance' = 'simple';
 
-  // 数据加载状态
-  loading = false;
-
   // 当前页码
   current = 1;
 
@@ -68,11 +77,11 @@ class UseTableInitState {
   // 表单数据
   formData: { simple: IHistoryData; advance: IHistoryData } = { simple: {}, advance: {} };
 
-  // 服务端返回的数据
-  data: unknown = null;
-
   // 计数器
   count = 0;
+
+  // 服务端返回的数据
+  data: unknown = null;
 }
 
 // 初始值
@@ -100,12 +109,12 @@ export default function useAntdTable<T>(
   const { defaultPageSize = 10, id, form, formatResult } = options;
   const [state, dispatch] = useReducer(reducer, { ...initState, pageSize: defaultPageSize });
   const stateRef = useRef<UseTableInitState>(({} as unknown) as UseTableInitState);
-
-  /* 控制异步请求时序 */
-  const runCount = useRef(0);
-
   stateRef.current = state;
 
+  const { run, loading } = useAsync(fn, [], {
+    manual: true,
+  });
+
   const reload = () => {
     dispatch({
       type: 'updateState',
@@ -165,33 +174,21 @@ export default function useAntdTable<T>(
   }, deps);
 
   useUpdateEffect(() => {
-    runCount.current += 1;
-    const currentCount = runCount.current;
-
-    dispatch({
-      type: 'updateState',
-      payload: { loading: true },
-    });
-
     const queryParams = form ? state.formData[state.searchType] : {};
 
-    fn({
+    run({
       current: state.current,
       pageSize: state.pageSize,
       ...queryParams,
     }).then(res => {
-      if (currentCount !== runCount.current) {
-        return;
-      }
-
       let formatData = res;
       if (formatResult) {
         formatData = formatResult(res);
       }
 
       dispatch({
         type: 'updateState',
-        payload: { loading: false, ...formatData },
+        payload: { ...formatData },
       });
     });
   }, [state.current, state.pageSize, state.count]);
@@ -265,9 +262,20 @@ export default function useAntdTable<T>(
   };
 
   const result: ReturnValue<T> = {
+    /* table 已经废弃 */
     table: {
       dataSource: state.data as T,
-      loading: state.loading,
+      loading,
+      onChange: changeTable,
+      pagination: {
+        current: state.current,
+        pageSize: state.pageSize,
+        total: state.total,
+      },
+    },
+    tableProps: {
+      dataSource: state.data as T,
+      loading,
       onChange: changeTable,
       pagination: {
         current: state.current,