diff --git a/src/useList/__tests__/useList.test.ts b/src/useList/__tests__/useList.test.ts index 965b765c0..f9b554219 100644 --- a/src/useList/__tests__/useList.test.ts +++ b/src/useList/__tests__/useList.test.ts @@ -154,4 +154,42 @@ describe('Test useList hook', () => { expect(result.current.params.total).toBe(0); expect(result.current.error).toBe(undefined); }); + + it('Should ONLY clear data while not reset loading', async () => { + const fetcher = jest.fn().mockImplementation( + () => + new Promise((resolve) => { + setTimeout(() => { + resolve({ + total: 1, + data: [{ uuid: 1 }], + }); + }, 1000); + }) + ); + + const { result } = renderHook(() => + useList(fetcher, { current: 1, pageSize: 20, search: '' }, { immediate: false }) + ); + act(() => { + result.current.mutate({ current: 2 }); + }); + + expect(result.current.loading).toBe(true); + expect(result.current.params.current).toBe(2); + + act(() => { + result.current.clearData(); + }); + // clearData won't reset params and loading status + expect(result.current.loading).toBe(true); + expect(result.current.params.current).toBe(2); + + act(() => { + result.current.clear(); + }); + // clear method will clear all data including params and loading status + expect(result.current.loading).toBe(false); + expect(result.current.params.current).toBe(1); + }); }); diff --git a/src/useList/demos/query.tsx b/src/useList/demos/query.tsx new file mode 100644 index 000000000..22ee1d0d2 --- /dev/null +++ b/src/useList/demos/query.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import { Input, Result, Table } from 'antd'; +import { Empty, useList } from 'dt-react-component'; + +import getMockData, { type MockData } from './data'; + +export default () => { + const { error, params, loading, data, mutate, clearData } = useList< + MockData, + { current: number; pageSize: number; search?: string } + >( + (params) => { + return new Promise<{ + data: MockData[]; + total: number; + }>((resolve) => { + setTimeout(() => { + resolve(getMockData(params)); + }, 1000); + }); + }, + () => ({ + current: 1, + pageSize: 20, + }) + ); + + if (error) return ; + + return ( + <> + { + mutate({ search: e.target.value }, { revalidate: false }); + clearData(); + }} + onSearch={() => mutate()} + style={{ marginBottom: 12 }} + /> + + mutate({ current: pagination.current, pageSize: pagination.pageSize }) + } + size="small" + scroll={{ y: 200 }} + dataSource={data} + pagination={{ + current: params.current, + pageSize: params.pageSize, + total: params.total, + }} + locale={{ + emptyText: () => + loading ? ( + + ) : ( + + ), + }} + rowKey="uuid" + bordered + /> + + ); +}; diff --git a/src/useList/index.md b/src/useList/index.md index 660a9754f..1c3c2c7be 100644 --- a/src/useList/index.md +++ b/src/useList/index.md @@ -17,6 +17,7 @@ toc: content + ## API diff --git a/src/useList/index.ts b/src/useList/index.ts index de5406374..3b923899e 100644 --- a/src/useList/index.ts +++ b/src/useList/index.ts @@ -21,11 +21,45 @@ export interface IUseListOptions { immediate?: boolean; } +/** + * 返回值 + */ +export interface UseListResponseState< + T extends Record, + P extends Record +> { + /** + * 请求是否执行中 + */ + loading: boolean; + /** + * 请求的相关参数以及结果数据的总数 + */ + params: P & { total: number }; + /** + * 错误信息 + */ + error?: Error; + /** + * 返回的数据 + */ + data: T[]; + mutate: (params?: Partial

| ((prev: P) => P), options?: IMutateOptions) => void; + /** + * 清空所有数据和状态 + */ + clear: () => void; + /** + * 清空数据 + */ + clearData: () => void; +} + export default function useList, P extends Record>( fetcher: Fetcher, initialParams: P | (() => P), rawOptions: IUseListOptions = { immediate: true } -) { +): UseListResponseState { const [error, setError] = useState(undefined); const [data, setData] = useState([]); const [total, setTotal] = useState(0); @@ -62,20 +96,22 @@ export default function useList, P extends Record< if (nextOptions.revalidate) { if (nextOptions.clearData) { - setData([]); - setTotal(0); - setError(undefined); + clearData(); } performFetch(tmp); } }; - const clear = () => { + const clearData = () => { setData([]); setTotal(0); + setError(undefined); + }; + + const clear = () => { + clearData(); setParams(initialParams); setLoading(false); - setError(undefined); }; useEffect(() => { @@ -84,5 +120,5 @@ export default function useList, P extends Record< } }, []); - return { loading, params: { ...params, total }, error, data, mutate, clear }; + return { loading, params: { ...params, total }, error, data, mutate, clear, clearData }; }