test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

feat: ConfigProvider support Statistic className and style properties (#43408)

Browse Source
This commit is contained in:
JiaQi 2023-07-06 21:54:54 +08:00 committed by GitHub
parent 1662af5c51
commit 005575c5cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,6 +37,7 @@ import Skeleton from '../../skeleton';
import Slider from '../../slider';
import Space from '../../space';
import Spin from '../../spin';
import Statistic from '../../statistic';
import Steps from '../../steps';
import Switch from '../../switch';
import Table from '../../table';
@ -325,6 +326,34 @@ describe('ConfigProvider support style and className props', () => {
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Statistic className works', () => {
const { container } = render(
<ConfigProvider
statistic={{
className: 'test-class',
}}
>
<Statistic title="Test Title" value={100} />
</ConfigProvider>,
);
expect(container.querySelector('.ant-statistic')).toHaveClass('test-class');
});
it('Should Statistic style works', () => {
const { container } = render(
<ConfigProvider
statistic={{
style: { color: 'red' },
}}
>
<Statistic style={{ fontSize: '16px' }} title="Test Title" value={100} />
</ConfigProvider>,
);
expect(container.querySelector('.ant-statistic')).toHaveStyle('color: red; font-size: 16px;');
});
it('Should Segmented className & style works', () => {
const { container } = render(
<ConfigProvider

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

@ -107,6 +107,7 @@ export interface ConfigConsumerProps {
spin?: ComponentStyleConfig;
segmented?: ComponentStyleConfig;
steps?: ComponentStyleConfig;
statistic?: ComponentStyleConfig;
image?: ComponentStyleConfig;
layout?: ComponentStyleConfig;
list?: ComponentStyleConfig;

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

@ -139,6 +139,7 @@ const {
| switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
| spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

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

@ -150,6 +150,7 @@ export interface ConfigProviderProps {
skeleton?: ComponentStyleConfig;
spin?: ComponentStyleConfig;
segmented?: ComponentStyleConfig;
statistic?: ComponentStyleConfig;
steps?: ComponentStyleConfig;
image?: ComponentStyleConfig;
layout?: ComponentStyleConfig;
@ -272,6 +273,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
theme,
componentDisabled,
segmented,
statistic,
spin,
calendar,
cascader,
@ -366,6 +368,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
iconPrefixCls,
theme: mergedTheme,
segmented,
statistic,
spin,
calendar,
cascader,

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

@ -141,6 +141,7 @@ const {
| switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

11
components/statistic/Statistic.tsx
View File

@ -42,7 +42,8 @@ const Statistic: React.FC<StatisticProps> = (props) => {
groupSeparator = ',',
} = props;
const { getPrefixCls, direction } = React.useContext<ConfigConsumerProps>(ConfigContext);
const { getPrefixCls, direction, statistic } =
React.useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('statistic', customizePrefixCls);
@ -63,13 +64,19 @@ const Statistic: React.FC<StatisticProps> = (props) => {
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
statistic?.className,
className,
rootClassName,
hashId,
);
return wrapSSR(
<div className={cls} style={style} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<div
className={cls}
style={{ ...statistic?.style, ...style }}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{title && <div className={`${prefixCls}-title`}>{title}</div>}
<Skeleton paragraph={false} loading={loading} className={`${prefixCls}-skeleton`}>
<div style={valueStyle} className={`${prefixCls}-content`}>