mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

feat: config-provider support checkbox className and style properties (#43107)

Browse Source 
* feat: config-provider support checkbox className and style properties

* Revert "feat: config-provider support checkbox className and style properties"

This reverts commit 05c7678b5b.

* feat: config-provider support checkbox className and style properties
This commit is contained in:
muxin 2023-06-26 11:42:46 +08:00 committed by GitHub
parent 358905027a
commit 58e88d23a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 49 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/checkbox/Checkbox.tsx
View File

@ -66,7 +66,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
},
ref,
) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { getPrefixCls, direction, checkbox } = React.useContext(ConfigContext);
const checkboxGroup = React.useContext(GroupContext);
const { isFormItemInput } = React.useContext(FormItemInputContext);
const contextDisabled = React.useContext(DisabledContext);
@ -119,6 +119,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
[`${prefixCls}-wrapper-disabled`]: mergedDisabled,
[`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
},
checkbox?.className,
className,
rootClassName,
hashId,
@ -134,7 +135,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
// eslint-disable-next-line jsx-a11y/label-has-associated-control
<label
className={classString}
style={style}
style={{ ...checkbox?.style, ...style }}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>

19
components/config-provider/__tests__/style.test.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import ConfigProvider from '..';
import { render } from '../../../tests/utils';
import Breadcrumb from '../../breadcrumb';
import Checkbox from '../../checkbox';
import Divider from '../../divider';
import Image from '../../image';
import Result from '../../result';
@ -217,4 +218,22 @@ describe('ConfigProvider support style and className props', () => {
expect(element).toHaveClass('cp-breadcrumb');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Checkbox className & style works', () => {
const { container } = render(
<ConfigProvider
checkbox={{
className: 'cp-breadcrumb',
style: {
background: 'red',
},
}}
>
<Checkbox>Checkbox</Checkbox>
</ConfigProvider>,
);
expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-breadcrumb');
expect(container.querySelector('.ant-checkbox-wrapper')).toHaveStyle({ background: 'red' });
});
});

47
components/config-provider/context.ts
View File

@ -36,12 +36,12 @@ export interface ThemeConfig {
inherit?: boolean;
}
export interface componentStyleConfig {
export interface ComponentStyleConfig {
className?: string;
style?: React.CSSProperties;
}
export interface ButtonConfig extends componentStyleConfig {
export interface ButtonConfig extends ComponentStyleConfig {
classNames?: ButtonProps['classNames'];
styles?: ButtonProps['styles'];
}
@ -88,39 +88,16 @@ export interface ConfigConsumerProps {
showSearch?: boolean;
};
button?: ButtonConfig;
divider?: componentStyleConfig;
typography?: {
className?: string;
style?: React.CSSProperties;
};
spin?: {
className?: string;
style?: React.CSSProperties;
};
segmented?: {
className?: string;
style?: React.CSSProperties;
};
steps?: {
className?: string;
style?: React.CSSProperties;
};
image?: {
className?: string;
style?: React.CSSProperties;
};
result?: {
className?: string;
style?: React.CSSProperties;
};
slider?: {
className?: string;
style?: React.CSSProperties;
};
breadcrumb?: {
className?: string;
style?: React.CSSProperties;
};
divider?: ComponentStyleConfig;
typography?: ComponentStyleConfig;
spin?: ComponentStyleConfig;
segmented?: ComponentStyleConfig;
steps?: ComponentStyleConfig;
image?: ComponentStyleConfig;
result?: ComponentStyleConfig;
slider?: ComponentStyleConfig;
breadcrumb?: ComponentStyleConfig;
checkbox?: ComponentStyleConfig;
}
const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@ -103,6 +103,7 @@ const {
| --- | --- | --- | --- | --- |
| breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
| checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| 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 |

47
components/config-provider/index.tsx
View File

@ -19,7 +19,7 @@ import { DesignTokenContext } from '../theme/internal';
import defaultSeedToken from '../theme/themes/seed';
import type {
ButtonConfig,
componentStyleConfig,
ComponentStyleConfig,
ConfigConsumerProps,
CSPConfig,
DirectionType,
@ -137,39 +137,16 @@ export interface ConfigProviderProps {
popupOverflow?: PopupOverflow;
theme?: ThemeConfig;
button?: ButtonConfig;
divider?: componentStyleConfig;
typography?: {
className?: string;
style?: React.CSSProperties;
};
spin?: {
className?: string;
style?: React.CSSProperties;
};
segmented?: {
className?: string;
style?: React.CSSProperties;
};
steps?: {
className?: string;
style?: React.CSSProperties;
};
image?: {
className?: string;
style?: React.CSSProperties;
};
result?: {
className?: string;
style?: React.CSSProperties;
};
slider?: {
className?: string;
style?: React.CSSProperties;
};
breadcrumb?: {
className?: string;
style?: React.CSSProperties;
};
divider?: ComponentStyleConfig;
typography?: ComponentStyleConfig;
spin?: ComponentStyleConfig;
segmented?: ComponentStyleConfig;
steps?: ComponentStyleConfig;
image?: ComponentStyleConfig;
result?: ComponentStyleConfig;
slider?: ComponentStyleConfig;
breadcrumb?: ComponentStyleConfig;
checkbox?: ComponentStyleConfig;
}
interface ProviderChildrenProps extends ConfigProviderProps {
@ -260,6 +237,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
segmented,
spin,
typography,
checkbox,
divider,
steps,
image,
@ -320,6 +298,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
segmented,
spin,
typography,
checkbox,
divider,
steps,
image,

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

@ -105,6 +105,7 @@ const {
| --- | --- | --- | --- | --- |
| breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
| checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| 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 |