fix(usePagination): defaultParams.current and `defaultParams.pageSi…

…ze` should work if `manual: true` #40
AttoJS · Apr 28, 2021 · 3ca5fd7 · 3ca5fd7
1 parent 9954357
commit 3ca5fd7
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 12 deletions.
diff --git 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 () => (
+            <div>
+              <button
+                class="params"
+                onClick={() => changeCurrent((_current += 1))}
+              >
+                {JSON.stringify(params.value)}
+              </button>
+              <div class="total">{total.value}</div>
+              <div class="current">{current.value}</div>
+              <div class="pageSize">{pageSize.value}</div>
+              <div class="totalPage">{totalPage.value}</div>
+            </div>
+          );
+        },
+      }),
+    );
+
+    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
@@ -91,15 +91,17 @@ function usePagination<R, P extends unknown[], FR>(
     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<R, P extends unknown[], FR>(
 
   const total = computed<number>(() => get(data.value, totalKey, 0));
   const current = computed({
-    get: () => (params.value[0] as Record<string, number>)?.[currentKey] ?? 0,
+    get: () =>
+      (params.value[0] as Record<string, number>)?.[currentKey] ??
+      finallyOptions.defaultParams[0][currentKey],
     set: (val: number) => {
       changeCurrent(val);
     },
   });
   const pageSize = computed({
-    get: () => (params.value[0] as Record<string, number>)?.[pageSizeKey] ?? 10,
+    get: () =>
+      (params.value[0] as Record<string, number>)?.[pageSizeKey] ??
+      finallyOptions.defaultParams[0][pageSizeKey],
     set: (val: number) => {
       changePageSize(val);
     },