Browse Source

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: 3c87f1c5b1/src/utils/with-default-props.tsx (L5)

* chore: replace method

* chore: rename
pull/39788/head
Wuxh 2 years ago
committed by GitHub
parent
commit
951e0e2c79
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 21
      components/_util/extendsObject.ts
  2. 93
      components/list/__tests__/__snapshots__/pagination.test.tsx.snap
  3. 24
      components/list/__tests__/pagination.test.tsx
  4. 17
      components/list/index.tsx
  5. 18
      components/table/hooks/usePagination.ts

21
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
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"

24
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();
});
});

17
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) {

18
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,

Loading…
Cancel
Save