diff --git a/components/_util/extendsObject.ts b/components/_util/extendsObject.ts new file mode 100644 index 000000000000..80e033c9376b --- /dev/null +++ b/components/_util/extendsObject.ts @@ -0,0 +1,21 @@ +type RecordType = Record; + +function extendsObject(...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 index c22d084de994..2e431c030218 100644 --- 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`] = ` + +`; + exports[`List.pagination renders pagination correctly 1`] = `
{ it('should not crash when pagination is null', () => { render(createList({ pagination: null as unknown as ListProps['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 index d0bb0f7370d4..4b3d579f27c0 100644 --- 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({ hashId, ); - const paginationProps = { - ...defaultPaginationProps, - total: dataSource.length, - current: paginationCurrent, - pageSize: paginationSize, - ...(pagination || {}), - }; + const paginationProps = extendsObject( + 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 index 512c6a4bac5c..7e559e4ba928 100644 --- 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(...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,