Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from Dec 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 21 additions & 0 deletions 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;
93 changes: 93 additions & 0 deletions 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"
Expand Down
24 changes: 24 additions & 0 deletions components/list/__tests__/pagination.test.tsx
Expand Up @@ -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();
});
});
17 changes: 10 additions & 7 deletions components/list/index.tsx
Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand Down
18 changes: 1 addition & 17 deletions 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;

Expand All @@ -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,
Expand Down