mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

refactor: Result support css var (#45822)

Browse Source
This commit is contained in:
JarvisArt 2023-11-13 16:13:34 +08:00 committed by GitHub
parent 3787478790
commit 98639ba6a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/result/index.tsx
View File

@ -10,6 +10,7 @@ import { ConfigContext } from '../config-provider';
import noFound from './noFound';
import serverError from './serverError';
import useStyle from './style';
import useCSSVar from './style/cssVar';
import unauthorized from './unauthorized';
export const IconMap = {
@ -125,7 +126,8 @@ const Result: ResultType = ({
const prefixCls = getPrefixCls('result', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const className = classNames(
prefixCls,
@ -139,7 +141,7 @@ const Result: ResultType = ({
const mergedStyle: React.CSSProperties = { ...result?.style, ...style };
return wrapSSR(
return wrapCSSVar(
<div className={className} style={mergedStyle}>
<Icon prefixCls={prefixCls} status={status} icon={icon} />
<div className={`${prefixCls}-title`}>{title}</div>

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

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

25
components/result/style/index.tsx
View File

@ -1,6 +1,7 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { CSSProperties } from 'react';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import type { CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
@ -52,7 +53,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
return {
// Result
[componentCls]: {
padding: `${paddingLG * 2}px ${paddingXL}px`,
padding: `${unit(token.calc(paddingLG).mul(2).equal())} ${unit(paddingXL)}`,
// RTL
'&-rtl': {
@ -93,7 +94,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
[`${componentCls} ${componentCls}-content`]: {
marginTop: paddingLG,
padding: `${paddingLG}px ${padding * 2.5}px`,
padding: `${unit(paddingLG)} ${unit(token.calc(padding).mul(2.5).equal())}`,
backgroundColor: token.colorFillAlter,
},
@ -136,9 +137,16 @@ const genResultStyle: GenerateStyle<ResultToken> = (token) => [
genStatusIconStyle(token),
];
// ============================== Export ==============================
const getStyle: GenerateStyle<ResultToken> = (token) => genResultStyle(token);
// ============================== Export ==============================
export const prepareComponentToken: GetDefaultToken<'Result'> = (token) => ({
titleFontSize: token.fontSizeHeading3,
subtitleFontSize: token.fontSize,
iconFontSize: token.fontSizeHeading3 * 3,
extraMargin: `${token.paddingLG}px 0 0 0`,
});
export default genComponentStyleHook(
'Result',
(token) => {
@ -158,10 +166,5 @@ export default genComponentStyleHook(
return [getStyle(resultToken)];
},
(token) => ({
titleFontSize: token.fontSizeHeading3,
subtitleFontSize: token.fontSize,
iconFontSize: token.fontSizeHeading3 * 3,
extraMargin: `${token.paddingLG}px 0 0 0`,
}),
prepareComponentToken,
);