2023-05-09 19:24:50 +08:00
|
|
|
import type { CSSProperties } from 'react';
|
2023-11-13 16:13:34 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
|
|
|
import { unit } from '@ant-design/cssinjs';
|
|
|
|
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
2022-11-23 20:22:38 +08:00
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-03-11 14:29:29 +08:00
|
|
|
|
2022-05-31 20:32:00 +08:00
|
|
|
export interface ComponentToken {
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 标题字体大小
|
|
|
|
* @descEN Title font size
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
titleFontSize: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 副标题字体大小
|
|
|
|
* @descEN Subtitle font size
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
subtitleFontSize: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 图标大小
|
|
|
|
* @descEN Icon size
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
iconFontSize: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 额外区域外间距
|
|
|
|
* @descEN Margin of extra area
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
extraMargin: CSSProperties['margin'];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ResultToken extends FullToken<'Result'> {
|
2022-05-31 20:32:00 +08:00
|
|
|
imageWidth: number;
|
|
|
|
imageHeight: number;
|
2022-03-07 14:20:10 +08:00
|
|
|
resultInfoIconColor: string;
|
|
|
|
resultSuccessIconColor: string;
|
|
|
|
resultWarningIconColor: string;
|
|
|
|
resultErrorIconColor: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
// ============================== Styles ==============================
|
2022-03-11 14:29:29 +08:00
|
|
|
const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
|
2022-05-31 20:32:00 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
|
|
|
lineHeightHeading3,
|
|
|
|
iconCls,
|
|
|
|
padding,
|
|
|
|
paddingXL,
|
|
|
|
paddingXS,
|
|
|
|
paddingLG,
|
|
|
|
marginXS,
|
|
|
|
lineHeight,
|
|
|
|
} = token;
|
2022-03-11 14:29:29 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
// Result
|
2022-04-07 22:25:04 +08:00
|
|
|
[componentCls]: {
|
2023-11-13 16:13:34 +08:00
|
|
|
padding: `${unit(token.calc(paddingLG).mul(2).equal())} ${unit(paddingXL)}`,
|
2022-03-14 14:42:32 +08:00
|
|
|
|
|
|
|
// RTL
|
|
|
|
'&-rtl': {
|
|
|
|
direction: 'rtl',
|
|
|
|
},
|
2022-03-11 14:29:29 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// Exception Status image
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls} ${componentCls}-image`]: {
|
2022-05-31 20:32:00 +08:00
|
|
|
width: token.imageWidth,
|
|
|
|
height: token.imageHeight,
|
2022-03-11 14:29:29 +08:00
|
|
|
margin: 'auto',
|
2022-03-10 13:44:40 +08:00
|
|
|
},
|
2022-03-11 14:29:29 +08:00
|
|
|
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls} ${componentCls}-icon`]: {
|
2022-05-31 20:32:00 +08:00
|
|
|
marginBottom: paddingLG,
|
2022-03-11 14:29:29 +08:00
|
|
|
textAlign: 'center',
|
|
|
|
|
2022-04-07 22:25:04 +08:00
|
|
|
[`& > ${iconCls}`]: {
|
2023-05-09 19:24:50 +08:00
|
|
|
fontSize: token.iconFontSize,
|
2022-03-10 13:44:40 +08:00
|
|
|
},
|
|
|
|
},
|
2022-03-07 14:20:10 +08:00
|
|
|
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls} ${componentCls}-title`]: {
|
2022-03-22 20:02:04 +08:00
|
|
|
color: token.colorTextHeading,
|
2023-05-09 19:24:50 +08:00
|
|
|
fontSize: token.titleFontSize,
|
2022-05-31 20:32:00 +08:00
|
|
|
lineHeight: lineHeightHeading3,
|
|
|
|
marginBlock: marginXS,
|
2022-03-11 14:29:29 +08:00
|
|
|
textAlign: 'center',
|
|
|
|
},
|
|
|
|
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls} ${componentCls}-subtitle`]: {
|
2022-08-04 16:16:50 +08:00
|
|
|
color: token.colorTextDescription,
|
2023-05-09 19:24:50 +08:00
|
|
|
fontSize: token.subtitleFontSize,
|
2022-05-31 20:32:00 +08:00
|
|
|
lineHeight,
|
2022-03-11 14:29:29 +08:00
|
|
|
textAlign: 'center',
|
|
|
|
},
|
|
|
|
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls} ${componentCls}-content`]: {
|
2022-05-31 20:32:00 +08:00
|
|
|
marginTop: paddingLG,
|
2023-11-13 16:13:34 +08:00
|
|
|
padding: `${unit(paddingLG)} ${unit(token.calc(padding).mul(2.5).equal())}`,
|
2022-07-21 17:00:42 +08:00
|
|
|
backgroundColor: token.colorFillAlter,
|
2022-03-11 14:29:29 +08:00
|
|
|
},
|
|
|
|
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls} ${componentCls}-extra`]: {
|
2023-05-09 19:24:50 +08:00
|
|
|
margin: token.extraMargin,
|
2022-03-11 14:29:29 +08:00
|
|
|
textAlign: 'center',
|
|
|
|
|
|
|
|
'& > *': {
|
2022-05-31 20:32:00 +08:00
|
|
|
marginInlineEnd: paddingXS,
|
2022-03-11 14:29:29 +08:00
|
|
|
|
|
|
|
'&:last-child': {
|
|
|
|
marginInlineEnd: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genStatusIconStyle: GenerateStyle<ResultToken> = (token) => {
|
2022-04-07 22:25:04 +08:00
|
|
|
const { componentCls, iconCls } = token;
|
2022-03-11 14:29:29 +08:00
|
|
|
|
|
|
|
return {
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls}-success ${componentCls}-icon > ${iconCls}`]: {
|
2022-03-11 14:29:29 +08:00
|
|
|
color: token.resultSuccessIconColor,
|
|
|
|
},
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls}-error ${componentCls}-icon > ${iconCls}`]: {
|
2022-03-11 14:29:29 +08:00
|
|
|
color: token.resultErrorIconColor,
|
|
|
|
},
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls}-info ${componentCls}-icon > ${iconCls}`]: {
|
2022-03-11 14:29:29 +08:00
|
|
|
color: token.resultInfoIconColor,
|
|
|
|
},
|
2022-04-07 22:25:04 +08:00
|
|
|
[`${componentCls}-warning ${componentCls}-icon > ${iconCls}`]: {
|
2022-03-11 14:29:29 +08:00
|
|
|
color: token.resultWarningIconColor,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genResultStyle: GenerateStyle<ResultToken> = (token) => [
|
2022-03-11 14:29:29 +08:00
|
|
|
genBaseStyle(token),
|
|
|
|
genStatusIconStyle(token),
|
|
|
|
];
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const getStyle: GenerateStyle<ResultToken> = (token) => genResultStyle(token);
|
2022-03-11 14:29:29 +08:00
|
|
|
|
2023-11-13 16:13:34 +08:00
|
|
|
// ============================== Export ==============================
|
|
|
|
export const prepareComponentToken: GetDefaultToken<'Result'> = (token) => ({
|
|
|
|
titleFontSize: token.fontSizeHeading3,
|
|
|
|
subtitleFontSize: token.fontSize,
|
|
|
|
iconFontSize: token.fontSizeHeading3 * 3,
|
|
|
|
extraMargin: `${token.paddingLG}px 0 0 0`,
|
|
|
|
});
|
|
|
|
|
2022-05-31 20:32:00 +08:00
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Result',
|
2023-05-04 16:29:50 +08:00
|
|
|
(token) => {
|
2022-05-31 20:32:00 +08:00
|
|
|
const resultInfoIconColor = token.colorInfo;
|
|
|
|
const resultErrorIconColor = token.colorError;
|
|
|
|
const resultSuccessIconColor = token.colorSuccess;
|
|
|
|
const resultWarningIconColor = token.colorWarning;
|
|
|
|
|
2023-05-09 19:24:50 +08:00
|
|
|
const resultToken = mergeToken<ResultToken>(token, {
|
2022-05-31 20:32:00 +08:00
|
|
|
resultInfoIconColor,
|
|
|
|
resultErrorIconColor,
|
|
|
|
resultSuccessIconColor,
|
|
|
|
resultWarningIconColor,
|
2023-05-09 19:24:50 +08:00
|
|
|
imageWidth: 250,
|
|
|
|
imageHeight: 295,
|
|
|
|
});
|
|
|
|
|
|
|
|
return [getStyle(resultToken)];
|
2022-05-31 20:32:00 +08:00
|
|
|
},
|
2023-11-13 16:13:34 +08:00
|
|
|
prepareComponentToken,
|
2022-05-31 20:32:00 +08:00
|
|
|
);
|