fix: preserve table pagination className (#32131)

close #32130
This commit is contained in:
JounQin 2021-09-11 21:44:03 +08:00 committed by GitHub
parent 9f2560fe00
commit a9951d8421
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 9 deletions

View File

@ -148,9 +148,11 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
const tableProps = omit(props, ['className', 'style', 'columns']) as TableProps<RecordType>;
const size = React.useContext(SizeContext);
const { locale: contextLocale = defaultLocale, renderEmpty, direction } = React.useContext(
ConfigContext,
);
const {
locale: contextLocale = defaultLocale,
renderEmpty,
direction,
} = React.useContext(ConfigContext);
const mergedSize = customizeSize || size;
const tableLocale = { ...contextLocale.Table, ...locale } as TableLocale;
const rawData: readonly RecordType[] = dataSource || EMPTY_LIST;
@ -263,10 +265,10 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
tableLocale,
showSorterTooltip,
});
const sortedData = React.useMemo(() => getSortData(rawData, sortStates, childrenColumnName), [
rawData,
sortStates,
]);
const sortedData = React.useMemo(
() => getSortData(rawData, sortStates, childrenColumnName),
[rawData, sortStates],
);
changeEventInfo.sorter = getSorters();
changeEventInfo.sorterStates = sortStates;
@ -432,8 +434,11 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
const renderPagination = (position: string) => (
<Pagination
className={`${prefixCls}-pagination ${prefixCls}-pagination-${position}`}
{...mergedPagination}
className={classNames(
`${prefixCls}-pagination ${prefixCls}-pagination-${position}`,
mergedPagination.className,
)}
size={paginationSize}
/>
);

View File

@ -535,4 +535,22 @@ describe('Table.pagination', () => {
wrapper.find('.ant-pagination-item-2').simulate('click');
expect(wrapper.find('.ant-pagination-total-text')).toHaveLength(0);
});
it('should preserve table pagination className', () => {
const wrapper = mount(
<Table
data={[]}
columns={[]}
pagination={{
className: 'pagination',
total: 200,
current: 1,
pageSize: 10,
}}
/>,
);
expect(wrapper.find('.ant-pagination').prop('className')).toEqual(
'ant-pagination ant-table-pagination ant-table-pagination-right pagination',
);
});
});

View File

@ -230,7 +230,7 @@ exports[`Table.pagination renders pagination correctly 1`] = `
</div>
</div>
<ul
class="ant-pagination my-page"
class="ant-pagination ant-table-pagination ant-table-pagination-right my-page"
unselectable="unselectable"
>
<li