ant-design/components/descriptions/style/index.ts

256 lines
6.9 KiB
TypeScript
Raw Normal View History

import { unit } from '@ant-design/cssinjs';
import type { CSSObject } from '@ant-design/cssinjs';
chore: migrate to vitest (#42506) * chore: migrate to vitest * chore: update ci * fix: test correctly * test: support puppeteer * chore: update coverage * chore: update include/exclude * chore: update config * test: update incorrect tests * chore: update script * chore: update * fix: should close browser at the ended * chore: improve * fix: test cause tsc error * fix: eslint error * chore: exclude correctly * test: update snap and fix some tests * chore: update test config * fix: countup.js * fix: incorrect test * chore: update reference * test: update * fix: countup.js * fix: timeout * chore: update site test * fix: fixed countup version * chore: remove unsed code * test: update * test: update demo timeout * test: update timeout * chore: update image test * chore: update threads * fix: image/svg+xml test failed * chore: limits threads * test: update test coverage include * chore: remove jest files * chore: rename jest to vi * chore: update document * chore: fix missing @types/jsdom * chore: update coverage * chore: update snap * fix:watermark test cases are incorrect * feat: update ignore comment * test: fix test case * test: reset body scrollTop * test: clean up * test: use vi * test: update snapshot * test: update snapshot * test: fix dropdown test failed * fix: toHaveStyle cause test fail * test: improve test case * test: fix * fix: color failed, refer to https://github.com/jsdom/jsdom/pull/3560 * test: fix * test: fix * test: fix circular import * test: revert * ci: coverage failed * test: fix c8 ignore comment * chore: incorrect config * chore: fix ignore ci * test: revert svg+xml * test: fix realTimers * feat: rc-trigger should be remove * test: fix some failed test * chore: remove unused deps and configure eslint-plugin-vitest * test: update snap * chore: remove jest * test: fix lint error --------- Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
2023-06-07 11:54:50 +08:00
import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
// Component token here
/**
* @desc
* @descEN Background color of label
*/
labelBg: string;
/**
* @desc
* @descEN Text color of title
*/
titleColor: string;
/**
* @desc
* @descEN Bottom margin of title
*/
titleMarginBottom: number;
/**
* @desc
* @descEN Bottom padding of item
*/
itemPaddingBottom: number;
/**
* @desc
* @descEN End padding of item
*/
itemPaddingEnd: number;
/**
2023-07-06 01:31:17 +08:00
* @desc
* @descEN Right margin of colon
*/
colonMarginRight: number;
/**
2023-07-06 01:31:17 +08:00
* @desc
* @descEN Left margin of colon
*/
colonMarginLeft: number;
/**
* @desc
* @descEN Text color of content
*/
contentColor: string;
/**
* @desc
* @descEN Text color of extra area
*/
extraColor: string;
}
interface DescriptionsToken extends FullToken<'Descriptions'> {}
const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
const { componentCls, labelBg } = token;
return {
[`&${componentCls}-bordered`]: {
[`> ${componentCls}-view`]: {
overflow: 'hidden',
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
'> table': {
tableLayout: 'auto',
},
[`${componentCls}-row`]: {
borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
'&:last-child': {
borderBottom: 'none',
},
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${unit(token.padding)} ${unit(token.paddingLG)}`,
borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
'&:last-child': {
borderInlineEnd: 'none',
},
},
[`> ${componentCls}-item-label`]: {
color: token.colorTextSecondary,
backgroundColor: labelBg,
'&::after': {
display: 'none',
},
},
},
},
[`&${componentCls}-middle`]: {
[`${componentCls}-row`]: {
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}`,
},
},
},
[`&${componentCls}-small`]: {
[`${componentCls}-row`]: {
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${unit(token.paddingXS)} ${unit(token.padding)}`,
},
},
},
},
};
};
const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
const {
componentCls,
extraColor,
itemPaddingBottom,
itemPaddingEnd,
colonMarginRight,
colonMarginLeft,
titleMarginBottom,
} = token;
return {
[componentCls]: {
...resetComponent(token),
...genBorderedStyle(token),
'&-rtl': {
direction: 'rtl',
},
[`${componentCls}-header`]: {
display: 'flex',
alignItems: 'center',
marginBottom: titleMarginBottom,
},
[`${componentCls}-title`]: {
...textEllipsis,
flex: 'auto',
color: token.titleColor,
fontWeight: token.fontWeightStrong,
fontSize: token.fontSizeLG,
lineHeight: token.lineHeightLG,
},
[`${componentCls}-extra`]: {
marginInlineStart: 'auto',
color: extraColor,
fontSize: token.fontSize,
},
[`${componentCls}-view`]: {
width: '100%',
borderRadius: token.borderRadiusLG,
table: {
width: '100%',
tableLayout: 'fixed',
borderCollapse: 'collapse',
},
},
[`${componentCls}-row`]: {
'> th, > td': {
paddingBottom: itemPaddingBottom,
paddingInlineEnd: itemPaddingEnd,
},
'> th:last-child, > td:last-child': {
paddingInlineEnd: 0,
},
'&:last-child': {
borderBottom: 'none',
'> th, > td': {
paddingBottom: 0,
},
},
},
[`${componentCls}-item-label`]: {
2023-01-08 13:25:32 +08:00
color: token.colorTextTertiary,
fontWeight: 'normal',
fontSize: token.fontSize,
lineHeight: token.lineHeight,
textAlign: 'start',
'&::after': {
content: '":"',
position: 'relative',
top: -0.5, // magic for position
marginInline: `${unit(colonMarginLeft)} ${unit(colonMarginRight)}`,
},
[`&${componentCls}-item-no-colon::after`]: {
content: '""',
},
},
[`${componentCls}-item-no-label`]: {
'&::after': {
margin: 0,
content: '""',
},
},
[`${componentCls}-item-content`]: {
display: 'table-cell',
flex: 1,
color: token.contentColor,
fontSize: token.fontSize,
lineHeight: token.lineHeight,
wordBreak: 'break-word',
overflowWrap: 'break-word',
},
[`${componentCls}-item`]: {
paddingBottom: 0,
verticalAlign: 'top',
'&-container': {
display: 'flex',
[`${componentCls}-item-label`]: {
display: 'inline-flex',
alignItems: 'baseline',
},
[`${componentCls}-item-content`]: {
display: 'inline-flex',
alignItems: 'baseline',
minWidth: 0,
},
},
},
'&-middle': {
[`${componentCls}-row`]: {
'> th, > td': {
paddingBottom: token.paddingSM,
},
},
},
'&-small': {
[`${componentCls}-row`]: {
'> th, > td': {
paddingBottom: token.paddingXS,
},
},
},
},
};
};
export const prepareComponentToken: GetDefaultToken<'Descriptions'> = (token) => ({
labelBg: token.colorFillAlter,
titleColor: token.colorText,
titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
itemPaddingBottom: token.padding,
itemPaddingEnd: token.padding,
colonMarginRight: token.marginXS,
colonMarginLeft: token.marginXXS / 2,
contentColor: token.colorText,
extraColor: token.colorText,
});
// ============================== Export ==============================
export default genStyleHooks(
'Descriptions',
(token) => {
const descriptionToken = mergeToken<DescriptionsToken>(token, {});
return genDescriptionStyles(descriptionToken);
},
prepareComponentToken,
);