Browse Source

fix: preserve table pagination className (#32131)

close #32130
pull/32128/head
JounQin 3 years ago
committed by GitHub
parent
commit
a9951d8421
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 21
      components/table/Table.tsx
  2. 18
      components/table/__tests__/Table.pagination.test.js
  3. 2
      components/table/__tests__/__snapshots__/Table.pagination.test.js.snap

21
components/table/Table.tsx

@ -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}
/>
);

18
components/table/__tests__/Table.pagination.test.js

@ -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',
);
});
});

2
components/table/__tests__/__snapshots__/Table.pagination.test.js.snap

@ -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

Loading…
Cancel
Save