mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactor: statistic support css var (#45841)

Browse Source 
* refactor: statistic support css var

* chore: remove statistic from ignore list

---------

Signed-off-by: MadCcc <madccc@foxmail.com>
Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
c0dedance 2023-11-14 09:42:37 +08:00 committed by GitHub
parent 20cf0b6315
commit 5224c05247
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/statistic/Statistic.tsx
View File

@ -5,6 +5,7 @@ import { ConfigContext } from '../config-provider';
import Skeleton from '../skeleton';
import StatisticNumber from './Number';
import useStyle from './style';
import useCSSVar from './style/cssVar';
import type { FormatConfig, valueType } from './utils';
export interface StatisticProps extends FormatConfig {
@ -47,7 +48,8 @@ const Statistic: React.FC<StatisticProps> = (props) => {
const prefixCls = getPrefixCls('statistic', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const valueNode: React.ReactNode = (
<StatisticNumber
@ -70,7 +72,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
hashId,
);
return wrapSSR(
return wrapCSSVar(
<div
className={cls}
style={{ ...statistic?.style, ...style }}

4
components/statistic/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Statistic', prepareComponentToken);

18
components/statistic/style/index.tsx
View File

@ -1,6 +1,6 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
@ -66,17 +66,19 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
};
// ============================== Export ==============================
export const prepareComponentToken: GetDefaultToken<'Statistic'> = (token) => {
const { fontSizeHeading3, fontSize } = token;
return {
titleFontSize: fontSize,
contentFontSize: fontSizeHeading3,
};
};
export default genComponentStyleHook(
'Statistic',
(token) => {
const statisticToken = mergeToken<StatisticToken>(token, {});
return [genStatisticStyle(statisticToken)];
},
(token) => {
const { fontSizeHeading3, fontSize } = token;
return {
titleFontSize: fontSize,
contentFontSize: fontSizeHeading3,
};
},
prepareComponentToken,
);

1
scripts/check-cssinjs.tsx
View File

@ -62,7 +62,6 @@ async function checkCSSVar() {
'select',
'slider',
'space',
'statistic',
'steps',
'switch',
'table',