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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with
149 additions and
24 deletions
-
components/_util/extendsObject.ts
-
components/list/__tests__/__snapshots__/pagination.test.tsx.snap
-
components/list/__tests__/pagination.test.tsx
-
components/list/index.tsx
-
components/table/hooks/usePagination.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; |
|
|
@ -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, |
|
|
|