2024-04-08 14:04:08 +08:00
|
|
|
import { unit } from '@ant-design/cssinjs';
|
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
2023-09-10 12:19:50 +08:00
|
|
|
|
2023-06-07 11:54:50 +08:00
|
|
|
import { resetComponent, textEllipsis } from '../../style';
|
2023-11-16 11:48:50 +08:00
|
|
|
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
2023-11-29 17:23:45 +08:00
|
|
|
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
2022-03-31 17:11:44 +08:00
|
|
|
|
2023-05-17 14:22:48 +08:00
|
|
|
/** Component only token. Which will handle additional calculation of alias token */
|
|
|
|
export interface ComponentToken {
|
|
|
|
// Component token here
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 标签背景色
|
|
|
|
* @descEN Background color of label
|
|
|
|
*/
|
2023-05-17 14:22:48 +08:00
|
|
|
labelBg: string;
|
2023-09-10 12:19:50 +08:00
|
|
|
/**
|
|
|
|
* @desc 标题文字颜色
|
|
|
|
* @descEN Text color of title
|
|
|
|
*/
|
|
|
|
titleColor: string;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 标题下间距
|
|
|
|
* @descEN Bottom margin of title
|
|
|
|
*/
|
2023-05-17 14:22:48 +08:00
|
|
|
titleMarginBottom: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 子项下间距
|
|
|
|
* @descEN Bottom padding of item
|
|
|
|
*/
|
2023-05-17 14:22:48 +08:00
|
|
|
itemPaddingBottom: number;
|
2024-07-16 16:12:56 +08:00
|
|
|
/**
|
|
|
|
* @desc 子项结束间距
|
|
|
|
* @descEN End padding of item
|
|
|
|
*/
|
|
|
|
itemPaddingEnd: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
2023-07-06 01:31:17 +08:00
|
|
|
* @desc 冒号右间距
|
2023-07-05 17:49:59 +08:00
|
|
|
* @descEN Right margin of colon
|
|
|
|
*/
|
2023-05-17 14:22:48 +08:00
|
|
|
colonMarginRight: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
2023-07-06 01:31:17 +08:00
|
|
|
* @desc 冒号左间距
|
2023-07-05 17:49:59 +08:00
|
|
|
* @descEN Left margin of colon
|
|
|
|
*/
|
2023-05-17 14:22:48 +08:00
|
|
|
colonMarginLeft: number;
|
2023-09-10 12:19:50 +08:00
|
|
|
/**
|
|
|
|
* @desc 内容区域文字颜色
|
|
|
|
* @descEN Text color of content
|
|
|
|
*/
|
|
|
|
contentColor: string;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 额外区域文字颜色
|
|
|
|
* @descEN Text color of extra area
|
|
|
|
*/
|
2023-05-17 14:22:48 +08:00
|
|
|
extraColor: string;
|
2022-03-31 17:11:44 +08:00
|
|
|
}
|
|
|
|
|
2023-05-17 14:22:48 +08:00
|
|
|
interface DescriptionsToken extends FullToken<'Descriptions'> {}
|
|
|
|
|
2022-03-31 17:11:44 +08:00
|
|
|
const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
|
2023-05-17 14:22:48 +08:00
|
|
|
const { componentCls, labelBg } = token;
|
2022-03-31 17:11:44 +08:00
|
|
|
return {
|
2022-04-08 15:28:34 +08:00
|
|
|
[`&${componentCls}-bordered`]: {
|
2023-08-10 14:06:13 +08:00
|
|
|
[`> ${componentCls}-view`]: {
|
2024-07-20 09:00:48 +08:00
|
|
|
overflow: 'hidden',
|
2023-11-16 11:48:50 +08:00
|
|
|
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
2022-03-31 17:11:44 +08:00
|
|
|
'> table': {
|
|
|
|
tableLayout: 'auto',
|
|
|
|
},
|
2023-08-10 14:06:13 +08:00
|
|
|
[`${componentCls}-row`]: {
|
2023-11-16 11:48:50 +08:00
|
|
|
borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
2023-08-10 14:06:13 +08:00
|
|
|
'&:last-child': {
|
|
|
|
borderBottom: 'none',
|
|
|
|
},
|
|
|
|
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
|
2023-11-16 11:48:50 +08:00
|
|
|
padding: `${unit(token.padding)} ${unit(token.paddingLG)}`,
|
|
|
|
borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
2023-08-10 14:06:13 +08:00
|
|
|
'&:last-child': {
|
|
|
|
borderInlineEnd: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
[`> ${componentCls}-item-label`]: {
|
|
|
|
color: token.colorTextSecondary,
|
|
|
|
backgroundColor: labelBg,
|
|
|
|
'&::after': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`&${componentCls}-middle`]: {
|
2023-08-10 14:06:13 +08:00
|
|
|
[`${componentCls}-row`]: {
|
|
|
|
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
|
2023-11-16 11:48:50 +08:00
|
|
|
padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}`,
|
2023-08-10 14:06:13 +08:00
|
|
|
},
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`&${componentCls}-small`]: {
|
2023-08-10 14:06:13 +08:00
|
|
|
[`${componentCls}-row`]: {
|
|
|
|
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
|
2023-11-16 11:48:50 +08:00
|
|
|
padding: `${unit(token.paddingXS)} ${unit(token.padding)}`,
|
2023-08-10 14:06:13 +08:00
|
|
|
},
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2023-05-17 14:22:48 +08:00
|
|
|
const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
|
2022-03-31 17:11:44 +08:00
|
|
|
const {
|
2022-04-08 15:28:34 +08:00
|
|
|
componentCls,
|
2023-05-17 14:22:48 +08:00
|
|
|
extraColor,
|
|
|
|
itemPaddingBottom,
|
2024-07-16 16:12:56 +08:00
|
|
|
itemPaddingEnd,
|
2023-05-17 14:22:48 +08:00
|
|
|
colonMarginRight,
|
|
|
|
colonMarginLeft,
|
|
|
|
titleMarginBottom,
|
2022-03-31 17:11:44 +08:00
|
|
|
} = token;
|
|
|
|
return {
|
2022-04-08 15:28:34 +08:00
|
|
|
[componentCls]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
...resetComponent(token),
|
|
|
|
...genBorderedStyle(token),
|
2024-06-22 21:59:12 +08:00
|
|
|
'&-rtl': {
|
2022-03-31 17:11:44 +08:00
|
|
|
direction: 'rtl',
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-header`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
2023-05-17 14:22:48 +08:00
|
|
|
marginBottom: titleMarginBottom,
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-title`]: {
|
2022-10-28 16:44:19 +08:00
|
|
|
...textEllipsis,
|
2022-03-31 17:11:44 +08:00
|
|
|
flex: 'auto',
|
2023-09-10 12:19:50 +08:00
|
|
|
color: token.titleColor,
|
2022-05-25 10:36:05 +08:00
|
|
|
fontWeight: token.fontWeightStrong,
|
2022-03-31 17:11:44 +08:00
|
|
|
fontSize: token.fontSizeLG,
|
2022-05-25 10:36:05 +08:00
|
|
|
lineHeight: token.lineHeightLG,
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-extra`]: {
|
2022-04-19 11:27:09 +08:00
|
|
|
marginInlineStart: 'auto',
|
2023-05-17 14:22:48 +08:00
|
|
|
color: extraColor,
|
2022-03-31 17:11:44 +08:00
|
|
|
fontSize: token.fontSize,
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-view`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
width: '100%',
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusLG,
|
2022-03-31 17:11:44 +08:00
|
|
|
table: {
|
|
|
|
width: '100%',
|
|
|
|
tableLayout: 'fixed',
|
2024-03-07 10:08:06 +08:00
|
|
|
borderCollapse: 'collapse',
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-row`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
'> th, > td': {
|
2023-05-17 14:22:48 +08:00
|
|
|
paddingBottom: itemPaddingBottom,
|
2024-07-16 16:12:56 +08:00
|
|
|
paddingInlineEnd: itemPaddingEnd,
|
|
|
|
},
|
|
|
|
'> th:last-child, > td:last-child': {
|
|
|
|
paddingInlineEnd: 0,
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
|
|
|
'&:last-child': {
|
|
|
|
borderBottom: 'none',
|
2024-07-16 16:12:56 +08:00
|
|
|
'> th, > td': {
|
|
|
|
paddingBottom: 0,
|
|
|
|
},
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-label`]: {
|
2023-01-08 13:25:32 +08:00
|
|
|
color: token.colorTextTertiary,
|
2022-03-31 17:11:44 +08:00
|
|
|
fontWeight: 'normal',
|
|
|
|
fontSize: token.fontSize,
|
|
|
|
lineHeight: token.lineHeight,
|
2024-03-07 10:08:06 +08:00
|
|
|
textAlign: 'start',
|
2022-03-31 17:11:44 +08:00
|
|
|
|
|
|
|
'&::after': {
|
2022-05-25 10:36:05 +08:00
|
|
|
content: '":"',
|
2022-03-31 17:11:44 +08:00
|
|
|
position: 'relative',
|
2022-05-25 10:36:05 +08:00
|
|
|
top: -0.5, // magic for position
|
2023-11-16 11:48:50 +08:00
|
|
|
marginInline: `${unit(colonMarginLeft)} ${unit(colonMarginRight)}`,
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:34 +08:00
|
|
|
[`&${componentCls}-item-no-colon::after`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-no-label`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
'&::after': {
|
|
|
|
margin: 0,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-content`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
display: 'table-cell',
|
|
|
|
flex: 1,
|
2023-09-10 12:19:50 +08:00
|
|
|
color: token.contentColor,
|
2022-03-31 17:11:44 +08:00
|
|
|
fontSize: token.fontSize,
|
|
|
|
lineHeight: token.lineHeight,
|
|
|
|
wordBreak: 'break-word',
|
|
|
|
overflowWrap: 'break-word',
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
paddingBottom: 0,
|
|
|
|
verticalAlign: 'top',
|
|
|
|
'&-container': {
|
|
|
|
display: 'flex',
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-label`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
display: 'inline-flex',
|
|
|
|
alignItems: 'baseline',
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-content`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
display: 'inline-flex',
|
|
|
|
alignItems: 'baseline',
|
2024-07-10 16:36:14 +08:00
|
|
|
minWidth: 0,
|
2022-03-31 17:11:44 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-04-26 10:21:50 +08:00
|
|
|
'&-middle': {
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-row`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
'> th, > td': {
|
|
|
|
paddingBottom: token.paddingSM,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-04-26 10:21:50 +08:00
|
|
|
'&-small': {
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-row`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
'> th, > td': {
|
|
|
|
paddingBottom: token.paddingXS,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
2023-11-16 11:48:50 +08:00
|
|
|
|
|
|
|
export const prepareComponentToken: GetDefaultToken<'Descriptions'> = (token) => ({
|
|
|
|
labelBg: token.colorFillAlter,
|
|
|
|
titleColor: token.colorText,
|
|
|
|
titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
|
|
|
|
itemPaddingBottom: token.padding,
|
2024-07-16 16:12:56 +08:00
|
|
|
itemPaddingEnd: token.padding,
|
2023-11-16 11:48:50 +08:00
|
|
|
colonMarginRight: token.marginXS,
|
|
|
|
colonMarginLeft: token.marginXXS / 2,
|
|
|
|
contentColor: token.colorText,
|
|
|
|
extraColor: token.colorText,
|
|
|
|
});
|
|
|
|
|
2022-03-31 17:11:44 +08:00
|
|
|
// ============================== Export ==============================
|
2023-11-29 17:23:45 +08:00
|
|
|
export default genStyleHooks(
|
2023-05-17 14:22:48 +08:00
|
|
|
'Descriptions',
|
|
|
|
(token) => {
|
|
|
|
const descriptionToken = mergeToken<DescriptionsToken>(token, {});
|
2023-11-16 11:48:50 +08:00
|
|
|
return genDescriptionStyles(descriptionToken);
|
2023-05-17 14:22:48 +08:00
|
|
|
},
|
2023-11-16 11:48:50 +08:00
|
|
|
prepareComponentToken,
|
2023-05-17 14:22:48 +08:00
|
|
|
);
|