fix(list): fix error reported due to incorrect paginator parameters (#…

…39681) * fix(list): fix pagination parameter error * test: add case * test: update snapshot * chore: update case * feat(util): add mergeProps ref: https://github.com/ant-design/ant-design-mobile/blob/3c87f1c5b16c39c70e494159732f6bb1f0a08c01/src/utils/with-default-props.tsx#L5 * chore: replace method * chore: rename
ant-design · Dec 24, 2022 · 951e0e2 · 951e0e2
1 parent 056dabc
commit 951e0e2
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 24 deletions.
diff --git a/components/_util/extendsObject.ts b/components/_util/extendsObject.ts
@@ -0,0 +1,21 @@
+type RecordType = Record<string, any>;
+
+function extendsObject<T extends RecordType>(...list: T[]) {
+  const result: RecordType = { ...list[0] };
+
+  for (let i = 1; i < list.length; i++) {
+    const obj = list[i];
+    if (obj) {
+      Object.keys(obj).forEach((key) => {
+        const val = obj[key];
+        if (val !== undefined) {
+          result[key] = val;
+        }
+      });
+    }
+  }
+
+  return result;
+}
+
+export default extendsObject;
diff --git a/components/list/__tests__/__snapshots__/pagination.test.tsx.snap b/components/list/__tests__/__snapshots__/pagination.test.tsx.snap
@@ -1,5 +1,98 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`List.pagination pagination button should be displayed normally, when the paginator total is not defined 1`] = `
+<ul
+  class="ant-pagination"
+>
+  <li
+    aria-disabled="true"
+    class="ant-pagination-prev ant-pagination-disabled"
+    title="Previous Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="left"
+        class="anticon anticon-left"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="left"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+    tabindex="0"
+    title="1"
+  >
+    <a
+      rel="nofollow"
+    >
+      1
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-2"
+    tabindex="0"
+    title="2"
+  >
+    <a
+      rel="nofollow"
+    >
+      2
+    </a>
+  </li>
+  <li
+    aria-disabled="false"
+    class="ant-pagination-next"
+    tabindex="0"
+    title="Next Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="right"
+        class="anticon anticon-right"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="right"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+</ul>
+`;
+
 exports[`List.pagination renders pagination correctly 1`] = `
 <div
   class="ant-list ant-list-vertical ant-list-split ant-list-something-after-last-item"

diff --git a/components/list/__tests__/pagination.test.tsx b/components/list/__tests__/pagination.test.tsx
@@ -202,4 +202,28 @@ describe('List.pagination', () => {
   it('should not crash when pagination is null', () => {
     render(createList({ pagination: null as unknown as ListProps<DataSourceItem>['pagination'] }));
   });
+
+  // https://github.com/ant-design/ant-design/issues/39496
+  it('should not crash when pagination pageSize is not defined', () => {
+    expect(() => {
+      render(
+        createList({
+          pagination: {
+            pageSize: undefined,
+          },
+        }),
+      );
+    }).not.toThrow();
+  });
+
+  it('pagination button should be displayed normally, when the paginator total is not defined', () => {
+    const { container } = render(
+      createList({
+        pagination: { total: undefined },
+        dataSource: Array.from({ length: 11 }, (_, key) => ({ key, name: `name${key}` })),
+      }),
+    );
+
+    expect(container.querySelector('.ant-pagination')).toMatchSnapshot();
+  });
 });
diff --git a/components/list/index.tsx b/components/list/index.tsx
@@ -12,6 +12,7 @@ import type { SpinProps } from '../spin';
 import Spin from '../spin';
 import type { Breakpoint } from '../_util/responsiveObserver';
 import { responsiveArray } from '../_util/responsiveObserver';
+import extendsObject from '../_util/extendsObject';
 import Item from './Item';
 
 // CSSINJS
@@ -190,13 +191,15 @@ function List<T>({
     hashId,
   );
 
-  const paginationProps = {
-    ...defaultPaginationProps,
-    total: dataSource.length,
-    current: paginationCurrent,
-    pageSize: paginationSize,
-    ...(pagination || {}),
-  };
+  const paginationProps = extendsObject<PaginationConfig>(
+    defaultPaginationProps,
+    {
+      total: dataSource.length,
+      current: paginationCurrent,
+      pageSize: paginationSize,
+    },
+    pagination || {},
+  );
 
   const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
   if (paginationProps.current > largestPage) {

diff --git a/components/table/hooks/usePagination.ts b/components/table/hooks/usePagination.ts
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { PaginationProps } from '../../pagination';
 import type { TablePaginationConfig } from '../interface';
+import extendsObject from '../../_util/extendsObject';
 
 export const DEFAULT_PAGE_SIZE = 10;
 
@@ -25,23 +26,6 @@ export function getPaginationParam(
   return param;
 }
 
-function extendsObject<T extends Object>(...list: T[]) {
-  const result: T = {} as T;
-
-  list.forEach((obj) => {
-    if (obj) {
-      Object.keys(obj).forEach((key) => {
-        const val = (obj as any)[key];
-        if (val !== undefined) {
-          (result as any)[key] = val;
-        }
-      });
-    }
-  });
-
-  return result;
-}
-
 export default function usePagination(
   total: number,
   pagination: TablePaginationConfig | false | undefined,