feat(usePagination): add changePagination to modify both current …

…and `pageSize` #43
AttoJS · May 8, 2021 · c3822f0 · c3822f0
1 parent 135e76f
commit c3822f0
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 0 deletions.
diff --git a/src/__tests__/pagination.test.tsx b/src/__tests__/pagination.test.tsx
@@ -497,6 +497,70 @@ describe('usePagination', () => {
     }
   });
 
+  test('changePagination should work', async () => {
+    let _current = 1;
+    let _pageSize = 1;
+    const wrapper = shallowMount(
+      defineComponent({
+        setup() {
+          const {
+            total,
+            params,
+            current,
+            pageSize,
+            totalPage,
+            changePagination,
+          } = usePagination(normalApi, {
+            manual: true,
+          });
+          return () => (
+            <div>
+              <button
+                class="params"
+                onClick={() => {
+                  _current += 1;
+                  _pageSize += 1;
+                  changePagination(_current, _pageSize);
+                }}
+              >
+                {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(`${_current}`);
+    expect(pageSizeEl.text()).toBe('10');
+    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},"pageSize":${_pageSize}}]`,
+      );
+      expect(totalEl.text()).toBe('100');
+      expect(currentEl.text()).toBe(`${_current}`);
+      expect(pageSizeEl.text()).toBe(`${_pageSize}`);
+      expect(totalPageEl.text()).toBe(`${Math.ceil(100 / _pageSize)}`);
+    }
+  });
+
   test('manual should work with defaltParams', async () => {
     let _current = 1;
     const wrapper = shallowMount(

diff --git a/src/usePagination.ts b/src/usePagination.ts
@@ -22,6 +22,7 @@ export interface PaginationResult<R, P extends unknown[]>
   reloading: Ref<boolean>;
   changeCurrent: (current: number) => void;
   changePageSize: (pageSize: number) => void;
+  changePagination: (current: number, pageSize: number) => void;
   reload: () => void;
 }
 
@@ -130,6 +131,11 @@ function usePagination<R, P extends unknown[], FR>(
     paging({ [pageSizeKey]: pageSize });
   };
 
+  // changePagination	change current and pageSize	(current: number, pageSize: number) => void
+  const changePagination = (current: number, pageSize: number) => {
+    paging({ [currentKey]: current, [pageSizeKey]: pageSize });
+  };
+
   const reloading = ref(false);
   const reload = async () => {
     const { defaultParams, manual } = finallyOptions;
@@ -173,6 +179,7 @@ function usePagination<R, P extends unknown[], FR>(
     run,
     changeCurrent,
     changePageSize,
+    changePagination,
     reload,
     ...rest,
   };