mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-23 01:45:05 +08:00
feat: ConfigProvider support classNames and styles for Statistic (#52141)
Some checks are pending
Publish Any Commit / build (push) Waiting to run
✅ test v6 / lint (push) Waiting to run
✅ test v6 / test-react-legacy (18, 1/2) (push) Waiting to run
✅ test v6 / test-react-legacy (18, 2/2) (push) Waiting to run
✅ test v6 / test-node (push) Waiting to run
✅ test v6 / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test v6 / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test v6 / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test v6 / test-coverage (push) Blocked by required conditions
✅ test v6 / build (push) Waiting to run
✅ test v6 / test lib/es module (es, 1/2) (push) Waiting to run
✅ test v6 / test lib/es module (es, 2/2) (push) Waiting to run
✅ test v6 / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test v6 / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Some checks are pending
Publish Any Commit / build (push) Waiting to run
✅ test v6 / lint (push) Waiting to run
✅ test v6 / test-react-legacy (18, 1/2) (push) Waiting to run
✅ test v6 / test-react-legacy (18, 2/2) (push) Waiting to run
✅ test v6 / test-node (push) Waiting to run
✅ test v6 / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test v6 / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test v6 / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test v6 / test-coverage (push) Blocked by required conditions
✅ test v6 / build (push) Waiting to run
✅ test v6 / test lib/es module (es, 1/2) (push) Waiting to run
✅ test v6 / test lib/es module (es, 2/2) (push) Waiting to run
✅ test v6 / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test v6 / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* feat: ConfigProvider support and for statistic * update version * fix * deprecated valueStyle
This commit is contained in:
thinkasany
GitHub
parent
7444a89700
commit
585337724c
@ -41,7 +41,7 @@ import type { TourProps } from '../tour/interface';
|
||||
import type { TransferProps } from '../transfer';
|
||||
import type { TreeSelectProps } from '../tree-select';
|
||||
import type { RenderEmptyHandler } from './defaultRenderEmpty';
|
||||
|
||||
import type { StatisticProps } from '../statistic';
|
||||
export const defaultPrefixCls = 'ant';
|
||||
export const defaultIconPrefixCls = 'anticon';
|
||||
|
||||
@ -201,6 +201,8 @@ export type SliderConfig = ComponentStyleConfig & Pick<SliderProps, 'styles' | '
|
||||
|
||||
export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
|
||||
|
||||
export type StatisticConfig = ComponentStyleConfig & Pick<StatisticProps, 'classNames' | 'styles'>;
|
||||
|
||||
export type ResultConfig = ComponentStyleConfig & Pick<ResultProps, 'classNames' | 'styles'>;
|
||||
|
||||
export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
|
||||
@ -286,7 +288,7 @@ export interface ConfigConsumerProps {
|
||||
spin?: SpinConfig;
|
||||
segmented?: ComponentStyleConfig;
|
||||
steps?: ComponentStyleConfig;
|
||||
statistic?: ComponentStyleConfig;
|
||||
statistic?: StatisticConfig;
|
||||
image?: ImageConfig;
|
||||
layout?: ComponentStyleConfig;
|
||||
list?: ListConfig;
|
||||
|
||||
@ -154,7 +154,7 @@ const {
|
||||
| space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space#api), styles?: [SpaceProps\["styles"\]](/components/space#api) } | - | 5.6.0 |
|
||||
| splitter | Set Splitter common props | { className?: string, style?: React.CSSProperties } | - | 5.21.0 |
|
||||
| spin | Set Spin common props | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
|
||||
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties, classNames?: [StatisticProps\["classNames"\]](/components/statistic#semantic-dom), styles?: [StatisticProps\["styles"\]](/components/statistic#semantic-dom) | - | 5.7.0, `classNames` and `styles`: 6.0.0 |
|
||||
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| table | Set Table common props | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
|
||||
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode, removeIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0, `removeIcon`: 5.15.0 |
|
||||
|
||||
@ -156,7 +156,7 @@ const {
|
||||
| space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space-cn#api), styles?: [SpaceProps\["styles"\]](/components/space-cn#api) } | - | 5.6.0 |
|
||||
| splitter | 设置 Splitter 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.21.0 |
|
||||
| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
|
||||
| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [StatisticProps\["classNames"\]](/components/statistic-cn#semantic-dom), styles?: [StatisticProps\["styles"\]](/components/statistic-cn#semantic-dom) } | - | 5.7.0, `classNames` 和 `styles`: 6.0.0 |
|
||||
| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
|
||||
| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
|
||||
| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode, removeIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0, `removeIcon`: 5.15.0 |
|
||||
|
||||
@ -3,6 +3,7 @@ import classNames from 'classnames';
|
||||
import pickAttrs from 'rc-util/lib/pickAttrs';
|
||||
|
||||
import type { HTMLAriaDataAttributes } from '../_util/aria-data-attrs';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import type { ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import Skeleton from '../skeleton';
|
||||
@ -10,12 +11,16 @@ import StatisticNumber from './Number';
|
||||
import useStyle from './style';
|
||||
import type { FormatConfig, valueType } from './utils';
|
||||
|
||||
export type SemanticName = 'root' | 'content' | 'title' | 'header' | 'prefix' | 'suffix';
|
||||
interface StatisticReactProps extends FormatConfig {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
classNames?: Partial<Record<SemanticName, string>>;
|
||||
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
|
||||
rootClassName?: string;
|
||||
style?: React.CSSProperties;
|
||||
value?: valueType;
|
||||
/** @deprecated Please use `styles={{ content: { } }}` instead */
|
||||
valueStyle?: React.CSSProperties;
|
||||
valueRender?: (node: React.ReactNode) => React.ReactNode;
|
||||
title?: React.ReactNode;
|
||||
@ -49,6 +54,8 @@ const Statistic: React.FC<StatisticProps> = (props) => {
|
||||
/* --- FormatConfig starts --- */
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
styles,
|
||||
classNames: statisticClassNames,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
@ -59,6 +66,15 @@ const Statistic: React.FC<StatisticProps> = (props) => {
|
||||
|
||||
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
|
||||
|
||||
// ============================= Warning ==============================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning('Statistic');
|
||||
|
||||
[['valueStyle', 'styles={{ content: { } }}']].forEach(([deprecatedName, newName]) => {
|
||||
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
|
||||
});
|
||||
}
|
||||
|
||||
const valueNode: React.ReactNode = (
|
||||
<StatisticNumber
|
||||
decimalSeparator={decimalSeparator}
|
||||
@ -70,7 +86,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
|
||||
/>
|
||||
);
|
||||
|
||||
const cls = classNames(
|
||||
const rootClassNames = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
@ -78,26 +94,87 @@ const Statistic: React.FC<StatisticProps> = (props) => {
|
||||
statistic?.className,
|
||||
className,
|
||||
rootClassName,
|
||||
statistic?.classNames?.root,
|
||||
statisticClassNames?.root,
|
||||
hashId,
|
||||
cssVarCls,
|
||||
);
|
||||
|
||||
const headerClassNames = classNames(
|
||||
`${prefixCls}-header`,
|
||||
statistic?.classNames?.header,
|
||||
statisticClassNames?.header,
|
||||
);
|
||||
|
||||
const titleClassNames = classNames(
|
||||
`${prefixCls}-title`,
|
||||
statistic?.classNames?.title,
|
||||
statisticClassNames?.title,
|
||||
);
|
||||
|
||||
const contentClassNames = classNames(
|
||||
`${prefixCls}-content`,
|
||||
statistic?.classNames?.content,
|
||||
statisticClassNames?.content,
|
||||
);
|
||||
|
||||
const prefixClassNames = classNames(
|
||||
`${prefixCls}-content-prefix`,
|
||||
statistic?.classNames?.prefix,
|
||||
statisticClassNames?.prefix,
|
||||
);
|
||||
|
||||
const suffixClassNames = classNames(
|
||||
`${prefixCls}-content-suffix`,
|
||||
statistic?.classNames?.suffix,
|
||||
statisticClassNames?.suffix,
|
||||
);
|
||||
|
||||
const restProps = pickAttrs(rest, { aria: true, data: true });
|
||||
|
||||
return wrapCSSVar(
|
||||
<div
|
||||
{...restProps}
|
||||
className={cls}
|
||||
style={{ ...statistic?.style, ...style }}
|
||||
className={rootClassNames}
|
||||
style={{ ...statistic?.styles?.root, ...styles?.root, ...statistic?.style, ...style }}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
{title && <div className={`${prefixCls}-title`}>{title}</div>}
|
||||
{title && (
|
||||
<div
|
||||
className={headerClassNames}
|
||||
style={{ ...statistic?.styles?.header, ...styles?.header }}
|
||||
>
|
||||
<div
|
||||
className={titleClassNames}
|
||||
style={{ ...statistic?.styles?.title, ...styles?.title }}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Skeleton paragraph={false} loading={loading} className={`${prefixCls}-skeleton`}>
|
||||
<div style={valueStyle} className={`${prefixCls}-content`}>
|
||||
{prefix && <span className={`${prefixCls}-content-prefix`}>{prefix}</span>}
|
||||
<div
|
||||
className={contentClassNames}
|
||||
style={{ ...valueStyle, ...statistic?.styles?.content, ...styles?.content }}
|
||||
>
|
||||
{prefix && (
|
||||
<span
|
||||
className={prefixClassNames}
|
||||
style={{ ...statistic?.styles?.prefix, ...styles?.prefix }}
|
||||
>
|
||||
{prefix}
|
||||
</span>
|
||||
)}
|
||||
{valueRender ? valueRender(valueNode) : valueNode}
|
||||
{suffix && <span className={`${prefixCls}-content-suffix`}>{suffix}</span>}
|
||||
{suffix && (
|
||||
<span
|
||||
className={suffixClassNames}
|
||||
style={{ ...statistic?.styles?.suffix, ...styles?.suffix }}
|
||||
>
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Skeleton>
|
||||
</div>,
|
||||
|
||||
@ -13,9 +13,13 @@ exports[`renders components/statistic/demo/animated.tsx extend context correctly
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -38,9 +42,13 @@ exports[`renders components/statistic/demo/animated.tsx extend context correctly
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -73,9 +81,13 @@ exports[`renders components/statistic/demo/basic.tsx extend context correctly 1`
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -100,9 +112,13 @@ exports[`renders components/statistic/demo/basic.tsx extend context correctly 1`
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -141,9 +157,13 @@ exports[`renders components/statistic/demo/basic.tsx extend context correctly 1`
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-statistic-skeleton"
|
||||
@ -182,9 +202,13 @@ exports[`renders components/statistic/demo/card.tsx extend context correctly 1`]
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -251,9 +275,13 @@ exports[`renders components/statistic/demo/card.tsx extend context correctly 1`]
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Idle
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Idle
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -324,9 +352,13 @@ exports[`renders components/statistic/demo/component-token.tsx extend context co
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -351,9 +383,13 @@ exports[`renders components/statistic/demo/component-token.tsx extend context co
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -392,9 +428,13 @@ exports[`renders components/statistic/demo/component-token.tsx extend context co
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-statistic-skeleton"
|
||||
@ -427,9 +467,13 @@ exports[`renders components/statistic/demo/countdown.tsx extend context correctl
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Countdown
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Countdown
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -450,9 +494,13 @@ exports[`renders components/statistic/demo/countdown.tsx extend context correctl
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Million Seconds
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Million Seconds
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -473,9 +521,13 @@ exports[`renders components/statistic/demo/countdown.tsx extend context correctl
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Day Level
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Day Level
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -496,9 +548,13 @@ exports[`renders components/statistic/demo/countdown.tsx extend context correctl
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Countdown
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Countdown
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -529,9 +585,13 @@ exports[`renders components/statistic/demo/unit.tsx extend context correctly 1`]
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Feedback
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Feedback
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -579,9 +639,13 @@ exports[`renders components/statistic/demo/unit.tsx extend context correctly 1`]
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Unmerged
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Unmerged
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
|
||||
@ -13,9 +13,13 @@ exports[`renders components/statistic/demo/animated.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -36,9 +40,13 @@ exports[`renders components/statistic/demo/animated.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -67,9 +75,13 @@ exports[`renders components/statistic/demo/basic.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -94,9 +106,13 @@ exports[`renders components/statistic/demo/basic.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -135,9 +151,13 @@ exports[`renders components/statistic/demo/basic.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-statistic-skeleton"
|
||||
@ -174,9 +194,13 @@ exports[`renders components/statistic/demo/card.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -243,9 +267,13 @@ exports[`renders components/statistic/demo/card.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Idle
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Idle
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -314,9 +342,13 @@ exports[`renders components/statistic/demo/component-token.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -341,9 +373,13 @@ exports[`renders components/statistic/demo/component-token.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -382,9 +418,13 @@ exports[`renders components/statistic/demo/component-token.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Active Users
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-statistic-skeleton"
|
||||
@ -415,9 +455,13 @@ exports[`renders components/statistic/demo/countdown.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Countdown
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Countdown
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -438,9 +482,13 @@ exports[`renders components/statistic/demo/countdown.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Million Seconds
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Million Seconds
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -461,9 +509,13 @@ exports[`renders components/statistic/demo/countdown.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Day Level
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Day Level
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -484,9 +536,13 @@ exports[`renders components/statistic/demo/countdown.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Countdown
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Countdown
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -515,9 +571,13 @@ exports[`renders components/statistic/demo/unit.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Feedback
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Feedback
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
@ -565,9 +625,13 @@ exports[`renders components/statistic/demo/unit.tsx correctly 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Unmerged
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Unmerged
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
|
||||
@ -25,9 +25,13 @@ exports[`Statistic support negative number 1`] = `
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
class="ant-statistic-header"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
|
||||
@ -209,4 +209,59 @@ describe('Statistic', () => {
|
||||
expect(formatTimeStr(1000 * 60 * 60 * 24, 'D [Day]')).toBe('1 Day');
|
||||
});
|
||||
});
|
||||
|
||||
it('should apply custom styles to Statistic', () => {
|
||||
const customClassNames = {
|
||||
root: 'custom-root',
|
||||
header: 'custom-header',
|
||||
title: 'custom-title',
|
||||
content: 'custom-content',
|
||||
prefix: 'custom-prefix',
|
||||
suffix: 'custom-suffix',
|
||||
};
|
||||
|
||||
const customStyles = {
|
||||
root: { color: 'red' },
|
||||
header: { paddingBottom: '10px' },
|
||||
title: { backgroundColor: 'blue' },
|
||||
content: { backgroundColor: 'green' },
|
||||
prefix: { color: 'yellow' },
|
||||
suffix: { color: 'purple' },
|
||||
};
|
||||
|
||||
const { container } = render(
|
||||
<Statistic
|
||||
classNames={customClassNames}
|
||||
styles={customStyles}
|
||||
title="Active"
|
||||
value={11.28}
|
||||
precision={2}
|
||||
prefix="%"
|
||||
suffix="%"
|
||||
/>,
|
||||
);
|
||||
|
||||
const rootElement = container.querySelector('.ant-statistic') as HTMLElement;
|
||||
const headerElement = container.querySelector('.ant-statistic-header') as HTMLElement;
|
||||
const titleElement = container.querySelector('.ant-statistic-title') as HTMLElement;
|
||||
const contentElement = container.querySelector('.ant-statistic-content') as HTMLElement;
|
||||
const prefixElement = container.querySelector('.ant-statistic-content-prefix') as HTMLElement;
|
||||
const suffixElement = container.querySelector('.ant-statistic-content-suffix') as HTMLElement;
|
||||
|
||||
// check classNames
|
||||
expect(rootElement.classList).toContain('custom-root');
|
||||
expect(headerElement.classList).toContain('custom-header');
|
||||
expect(titleElement.classList).toContain('custom-title');
|
||||
expect(contentElement.classList).toContain('custom-content');
|
||||
expect(prefixElement.classList).toContain('custom-prefix');
|
||||
expect(suffixElement.classList).toContain('custom-suffix');
|
||||
|
||||
// check styles
|
||||
expect(rootElement.style.color).toBe('red');
|
||||
expect(headerElement.style.paddingBottom).toBe('10px');
|
||||
expect(titleElement.style.backgroundColor).toBe('blue');
|
||||
expect(contentElement.style.backgroundColor).toBe('green');
|
||||
expect(prefixElement.style.color).toBe('yellow');
|
||||
expect(suffixElement.style.color).toBe('purple');
|
||||
});
|
||||
});
|
||||
|
||||
63
components/statistic/demo/_semantic.tsx
Normal file
63
components/statistic/demo/_semantic.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import { ArrowUpOutlined } from '@ant-design/icons';
|
||||
import { Statistic } from 'antd';
|
||||
|
||||
import SemanticPreview from '../../../.dumi/components/SemanticPreview';
|
||||
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
root: '根节点',
|
||||
header: '头部元素',
|
||||
title: '标题元素',
|
||||
content: '内容元素',
|
||||
prefix: '前缀元素',
|
||||
suffix: '后缀元素',
|
||||
},
|
||||
en: {
|
||||
root: 'Root element',
|
||||
header: 'Header element',
|
||||
title: 'Title element',
|
||||
content: 'Content element',
|
||||
prefix: 'Prefix element',
|
||||
suffix: 'Suffix element',
|
||||
},
|
||||
};
|
||||
|
||||
const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
|
||||
const divRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<div ref={divRef} style={{ position: 'absolute' }}>
|
||||
<Statistic
|
||||
title="Active"
|
||||
value={11.28}
|
||||
precision={2}
|
||||
styles={{ content: { color: '#3f8600' } }}
|
||||
prefix={<ArrowUpOutlined />}
|
||||
suffix="%"
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<SemanticPreview
|
||||
semantics={[
|
||||
{ name: 'root', desc: locale.root, version: '6.0.0' },
|
||||
{ name: 'header', desc: locale.header, version: '6.0.0' },
|
||||
{ name: 'title', desc: locale.title, version: '6.0.0' },
|
||||
{ name: 'prefix', desc: locale.prefix, version: '6.0.0' },
|
||||
{ name: 'content', desc: locale.content, version: '6.0.0' },
|
||||
{ name: 'suffix', desc: locale.suffix, version: '6.0.0' },
|
||||
]}
|
||||
>
|
||||
<BlockList />
|
||||
</SemanticPreview>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -10,7 +10,7 @@ const App: React.FC = () => (
|
||||
title="Active"
|
||||
value={11.28}
|
||||
precision={2}
|
||||
valueStyle={{ color: '#3f8600' }}
|
||||
styles={{ content: { color: '#3f8600' } }}
|
||||
prefix={<ArrowUpOutlined />}
|
||||
suffix="%"
|
||||
/>
|
||||
@ -22,7 +22,7 @@ const App: React.FC = () => (
|
||||
title="Idle"
|
||||
value={9.3}
|
||||
precision={2}
|
||||
valueStyle={{ color: '#cf1322' }}
|
||||
styles={{ content: { color: '#cf1322' } }}
|
||||
prefix={<ArrowDownOutlined />}
|
||||
suffix="%"
|
||||
/>
|
||||
|
||||
@ -56,6 +56,10 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| onFinish | Trigger when time's up | () => void | - | |
|
||||
| onChange | Trigger when time's changing | (value: number) => void | - | 4.16.0 |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
<code src="./demo/_semantic.tsx" simplify="true"></code>
|
||||
|
||||
## Design Token
|
||||
|
||||
<ComponentTokenTable component="Statistic"></ComponentTokenTable>
|
||||
|
||||
@ -57,6 +57,10 @@ demo:
|
||||
| onFinish | 倒计时完成时触发 | () => void | - | |
|
||||
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
<code src="./demo/_semantic.tsx" simplify="true"></code>
|
||||
|
||||
## 主题变量（Design Token）
|
||||
|
||||
<ComponentTokenTable component="Statistic"></ComponentTokenTable>
|
||||
|
||||
@ -34,10 +34,12 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
[`${componentCls}-title`]: {
|
||||
marginBottom: marginXXS,
|
||||
color: colorTextDescription,
|
||||
fontSize: titleFontSize,
|
||||
[`${componentCls}-header`]: {
|
||||
paddingBottom: marginXXS,
|
||||
[`${componentCls}-title`]: {
|
||||
color: colorTextDescription,
|
||||
fontSize: titleFontSize,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-skeleton`]: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user