From 3ca5fd7749a2aafb723797e299df5c6a8bd0e37f Mon Sep 17 00:00:00 2001 From: John Date: Wed, 28 Apr 2021 12:00:19 +0800 Subject: [PATCH] fix(usePagination): `defaultParams.current` and `defaultParams.pageSize` should work if `manual: true` #40 --- src/__tests__/pagination.test.tsx | 65 ++++++++++++++++++++++++++++++- src/usePagination.ts | 28 +++++++------ 2 files changed, 81 insertions(+), 12 deletions(-) diff --git a/src/__tests__/pagination.test.tsx b/src/__tests__/pagination.test.tsx index d199623..18d839d 100644 --- a/src/__tests__/pagination.test.tsx +++ b/src/__tests__/pagination.test.tsx @@ -472,7 +472,7 @@ describe('usePagination', () => { expect(paramsEl.text()).toBe('[]'); expect(totalEl.text()).toBe('0'); - expect(currentEl.text()).toBe('0'); + expect(currentEl.text()).toBe('1'); expect(pageSizeEl.text()).toBe('10'); expect(totalPageEl.text()).toBe('0'); @@ -488,6 +488,69 @@ describe('usePagination', () => { } }); + test('manual should work with defaltParams', async () => { + let _current = 1; + const wrapper = shallowMount( + defineComponent({ + setup() { + const { + total, + params, + current, + pageSize, + totalPage, + changeCurrent, + } = usePagination(normalApi, { + manual: true, + defaultParams: [ + { + pageSize: 20, + current: 2, + }, + ], + }); + return () => ( +
+ +
{total.value}
+
{current.value}
+
{pageSize.value}
+
{totalPage.value}
+
+ ); + }, + }), + ); + + const paramsEl = wrapper.find('.params'); + const totalEl = wrapper.find('.total'); + const currentEl = wrapper.find('.current'); + const pageSizeEl = wrapper.find('.pageSize'); + const totalPageEl = wrapper.find('.totalPage'); + + expect(paramsEl.text()).toBe('[]'); + expect(totalEl.text()).toBe('0'); + expect(currentEl.text()).toBe('2'); + expect(pageSizeEl.text()).toBe('20'); + expect(totalPageEl.text()).toBe('0'); + + for (let index = 0; index < 100; index++) { + await paramsEl.trigger('click'); + await waitForTime(1000); + + expect(paramsEl.text()).toBe(`[{"current":${_current}}]`); + expect(totalEl.text()).toBe('100'); + expect(currentEl.text()).toBe(`${_current}`); + expect(pageSizeEl.text()).toBe('20'); + expect(totalPageEl.text()).toBe('5'); + } + }); + test('global config should work', async () => { const createComponent = (id: string, requestOptions: GlobalOptions = {}) => defineComponent({ diff --git a/src/usePagination.ts b/src/usePagination.ts index b7c68af..2b52dae 100644 --- a/src/usePagination.ts +++ b/src/usePagination.ts @@ -91,15 +91,17 @@ function usePagination( throw new Error('usePagination does not support concurrent request'); } - const finallyOptions = { - defaultParams: [ - { - [currentKey]: 1, - [pageSizeKey]: 10, - }, - ], - ...restOptions, - }; + const finallyOptions = merge( + { + defaultParams: [ + { + [currentKey]: 1, + [pageSizeKey]: 10, + }, + ], + }, + restOptions, + ); const { data, params, queries, run, reset, ...rest } = useAsyncQuery< R, @@ -135,13 +137,17 @@ function usePagination( const total = computed(() => get(data.value, totalKey, 0)); const current = computed({ - get: () => (params.value[0] as Record)?.[currentKey] ?? 0, + get: () => + (params.value[0] as Record)?.[currentKey] ?? + finallyOptions.defaultParams[0][currentKey], set: (val: number) => { changeCurrent(val); }, }); const pageSize = computed({ - get: () => (params.value[0] as Record)?.[pageSizeKey] ?? 10, + get: () => + (params.value[0] as Record)?.[pageSizeKey] ?? + finallyOptions.defaultParams[0][pageSizeKey], set: (val: number) => { changePageSize(val); },