11import { WrappedFormUtils } from 'antd/lib/form/Form' ;
22import { PaginationConfig } from 'antd/lib/pagination' ;
3- import { DependencyList , useEffect , useReducer , useRef , useCallback } from 'react' ;
4- import { useUpdateEffect } from 'react-use' ;
3+ import { SorterResult } from 'antd/lib/table' ;
4+ import {
5+ DependencyList ,
6+ useCallback ,
7+ useEffect ,
8+ useReducer ,
9+ useRef ,
10+ useMemo ,
11+ Reducer ,
12+ } from 'react' ;
513import useAsync from '../useAsync' ;
14+ import useUpdateEffect from '../useUpdateEffect' ;
15+
16+ const isEqual = require ( 'lodash.isequal' ) ;
617
718interface UseAntdTableFormUtils extends WrappedFormUtils {
819 getFieldInstance ?: ( name : string ) => { } ;
@@ -13,7 +24,11 @@ export interface ReturnValue<Item> {
1324 table ?: {
1425 dataSource : Item [ ] ;
1526 loading : boolean ;
16- onChange : ( e : PaginationConfig ) => void ;
27+ onChange : (
28+ pagination : PaginationConfig ,
29+ filters ?: Record < keyof Item , string [ ] > ,
30+ sorter ?: SorterResult < Item > ,
31+ ) => void ;
1732 pagination : {
1833 current : number ;
1934 pageSize : number ;
@@ -23,13 +38,19 @@ export interface ReturnValue<Item> {
2338 tableProps : {
2439 dataSource : Item [ ] ;
2540 loading : boolean ;
26- onChange : ( e : PaginationConfig ) => void ;
41+ onChange : (
42+ pagination : PaginationConfig ,
43+ filters ?: Record < keyof Item , string [ ] > ,
44+ sorter ?: SorterResult < Item > ,
45+ ) => void ;
2746 pagination : {
2847 current : number ;
2948 pageSize : number ;
3049 total : number ;
3150 } ;
3251 } ;
52+ sorter : SorterResult < Item > ;
53+ filters : Record < keyof Item , string [ ] > ;
3354 refresh : ( ) => void ;
3455 search ?: {
3556 type : 'simple' | 'advance' ;
@@ -63,7 +84,7 @@ interface FormData {
6384 [ key : string ] : any ;
6485}
6586
66- class UseTableInitState {
87+ class UseTableInitState < Item > {
6788 // 搜索类型，简单、高级
6889 searchType : 'simple' | 'advance' = 'simple' ;
6990
@@ -86,16 +107,17 @@ class UseTableInitState {
86107 count = 0 ;
87108
88109 // 列表数据
89- data : any [ ] = [ ] ;
90- }
110+ data : Item [ ] = [ ] ;
91111
92- // 初始值
93- const initState = new UseTableInitState ( ) ;
112+ filters : Record < keyof Item , string [ ] > = { } as Record < keyof Item , string [ ] > ;
113+
114+ sorter : SorterResult < Item > = { } as SorterResult < Item > ;
115+ }
94116
95117// 缓存
96- const cacheData : { [ key : string ] : UseTableInitState } = { } ;
118+ const cacheData : { [ key : string ] : any } = { } ;
97119
98- const reducer = ( state = initState , action : { type : string ; payload ?: { } } ) => {
120+ const reducer = < Item > ( state : UseTableInitState < Item > , action : { type : string ; payload ?: { } } ) => {
99121 switch ( action . type ) {
100122 case 'updateState' :
101123 return { ...state , ...action . payload } ;
@@ -123,13 +145,18 @@ function useAntdTable<Result, Item>(
123145 ? deps
124146 : options || { } ) as Options < Result , Item > ;
125147
148+ const initState = useMemo ( ( ) => new UseTableInitState < Item > ( ) , [ ] ) ;
149+
126150 const { defaultPageSize = 10 , id, form, formatResult } = _options ;
127- const [ state , dispatch ] = useReducer ( reducer , { ...initState , pageSize : defaultPageSize } ) ;
151+ const [ state , dispatch ] = useReducer < Reducer < UseTableInitState < Item > , any > > ( reducer , {
152+ ...initState ,
153+ pageSize : defaultPageSize ,
154+ } ) ;
128155
129156 /* 临时记录切换前的表单数据 */
130157 const tempFieldsValueRef = useRef < FormData > ( { } ) ;
131158
132- const stateRef = useRef < UseTableInitState > ( ( { } as unknown ) as UseTableInitState ) ;
159+ const stateRef = useRef ( { } as UseTableInitState < Item > ) ;
133160 stateRef . current = state ;
134161 const { run, loading } = useAsync ( fn , _deps , {
135162 manual : true ,
@@ -166,6 +193,8 @@ function useAntdTable<Result, Item>(
166193 searchType : cache . searchType ,
167194 activeFormData : cache . activeFormData ,
168195 formData : cache . formData ,
196+ filters : cache . filters ,
197+ sorter : cache . sorter ,
169198 count : state . count + 1 ,
170199 } ,
171200 } ) ;
@@ -198,11 +227,19 @@ function useAntdTable<Result, Item>(
198227 formattedData [ key ] = state . activeFormData [ key ] ;
199228 }
200229 } ) ;
201- run ( {
230+
231+ const params : any = {
202232 current : state . current ,
203233 pageSize : state . pageSize ,
204234 ...formattedData ,
205- } ) . then ( res => {
235+ } ;
236+ if ( state . filters ) {
237+ params . filters = state . filters ;
238+ }
239+ if ( state . sorter ) {
240+ params . sorter = state . sorter ;
241+ }
242+ run ( params ) . then ( res => {
206243 const payload = formatResult ? formatResult ( res ) : res ;
207244 dispatch ( {
208245 type : 'updateState' ,
@@ -303,15 +340,26 @@ function useAntdTable<Result, Item>(
303340 } ) ;
304341 } , [ state . searchType ] ) ;
305342
306- // 表格翻页
343+ // 表格翻页 排序 筛选等
307344 const changeTable = useCallback (
308- ( e : PaginationConfig ) => {
345+ (
346+ p : PaginationConfig ,
347+ f : Record < keyof Item , string [ ] > = { } as Record < keyof Item , string [ ] > ,
348+ s : SorterResult < Item > = { } as SorterResult < Item > ,
349+ ) => {
350+ /* 如果 filter，或者 sort 变化，就初始化 current */
351+ const needReload =
352+ ! isEqual ( f , state . filters ) ||
353+ s . field !== state . sorter . field ||
354+ s . order !== state . sorter . order ;
309355 dispatch ( {
310356 type : 'updateState' ,
311357 payload : {
312- current : e . current ,
313- pageSize : e . pageSize ,
358+ current : needReload ? 1 : p . current ,
359+ pageSize : p . pageSize ,
314360 count : state . count + 1 ,
361+ filters : f ,
362+ sorter : s ,
315363 } ,
316364 } ) ;
317365 } ,
@@ -340,6 +388,8 @@ function useAntdTable<Result, Item>(
340388 total : state . total ,
341389 } ,
342390 } ,
391+ sorter : state . sorter ,
392+ filters : state . filters ,
343393 refresh,
344394 } ;
345395 if ( form ) {
0 commit comments