Browse Source

feat: CP support Pagination className and style (#43100)

* feat: CP support Pagination className and style

* Update BrowserMockup.tsx

* Update Reset.tsx

* Update Responsive.tsx

* Update index.en-US.md

* fix

* update showSizeChanger

* fix
pull/43061/head
lijianan 1 year ago
committed by GitHub
parent
commit
a9eaa00b4e
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 18
      components/config-provider/__tests__/style.test.tsx
  2. 4
      components/config-provider/context.ts
  3. 1
      components/config-provider/index.en-US.md
  4. 6
      components/config-provider/index.tsx
  5. 1
      components/config-provider/index.zh-CN.md
  6. 6
      components/pagination/Pagination.tsx

18
components/config-provider/__tests__/style.test.tsx

@ -6,6 +6,7 @@ import Checkbox from '../../checkbox';
import Descriptions from '../../descriptions';
import Divider from '../../divider';
import Image from '../../image';
import Pagination from '../../pagination';
import Result from '../../result';
import Segmented from '../../segmented';
import Slider from '../../slider';
@ -224,7 +225,7 @@ describe('ConfigProvider support style and className props', () => {
const { container } = render(
<ConfigProvider
checkbox={{
className: 'cp-breadcrumb',
className: 'cp-checkbox',
style: {
background: 'red',
},
@ -234,10 +235,23 @@ describe('ConfigProvider support style and className props', () => {
</ConfigProvider>,
);
expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-breadcrumb');
expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-checkbox');
expect(container.querySelector('.ant-checkbox-wrapper')).toHaveStyle({ background: 'red' });
});
it('Should Pagination className & style works', () => {
const { container } = render(
<ConfigProvider
pagination={{ className: 'cp-pagination', style: { backgroundColor: 'blue' } }}
>
<Pagination />
</ConfigProvider>,
);
const element = container.querySelector<HTMLUListElement>('.ant-pagination');
expect(element).toHaveClass('cp-pagination');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Descriptions className & style works', () => {
const { container } = render(
<ConfigProvider

4
components/config-provider/context.ts

@ -60,9 +60,7 @@ export interface ConfigConsumerProps {
input?: {
autoComplete?: string;
};
pagination?: {
showSizeChanger?: boolean;
};
pagination?: ComponentStyleConfig & { showSizeChanger?: boolean };
locale?: Locale;
pageHeader?: {
ghost: boolean;

1
components/config-provider/index.en-US.md

@ -109,6 +109,7 @@ const {
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
| image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
| pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| select | Set Select common props | { showSearch?: boolean } | - | |

6
components/config-provider/index.tsx

@ -113,9 +113,7 @@ export interface ConfigProviderProps {
select?: {
showSearch?: boolean;
};
pagination?: {
showSizeChanger?: boolean;
};
pagination?: ComponentStyleConfig & { showSizeChanger?: boolean };
locale?: Locale;
pageHeader?: {
ghost: boolean;
@ -246,6 +244,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
result,
slider,
breadcrumb,
pagination,
} = props;
// =================================== Warning ===================================
@ -308,6 +307,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
result,
slider,
breadcrumb,
pagination,
};
const config = {

1
components/config-provider/index.zh-CN.md

@ -111,6 +111,7 @@ const {
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
| image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - | |

6
components/pagination/Pagination.tsx

@ -39,6 +39,7 @@ const Pagination: React.FC<PaginationProps> = ({
selectPrefixCls: customizeSelectPrefixCls,
className,
rootClassName,
style,
size: customizeSize,
locale: customLocale,
selectComponentClass,
@ -104,20 +105,25 @@ const Pagination: React.FC<PaginationProps> = ({
const isSmall = mergedSize === 'small' || !!(xs && !mergedSize && responsive);
const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
const extendedClassName = classNames(
{
[`${prefixCls}-mini`]: isSmall,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
pagination?.className,
className,
rootClassName,
hashId,
);
const mergedStyle: React.CSSProperties = { ...pagination?.style, ...style };
return wrapSSR(
<RcPagination
{...iconsProps}
{...restProps}
style={mergedStyle}
prefixCls={prefixCls}
selectPrefixCls={selectPrefixCls}
className={extendedClassName}

Loading…
Cancel
Save