mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
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
This commit is contained in:
parent
056dabc5b6
commit
951e0e2c79
21
components/_util/extendsObject.ts
Normal file
21
components/_util/extendsObject.ts
Normal file
@ -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;
|
@ -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"
|
||||
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
@ -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) {
|
||||
|
@ -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…
Reference in New Issue
Block a user