337 lines
10 KiB
JavaScript
337 lines
10 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.prepareComponentToken = exports.default = void 0;
|
|
var _cssinjs = require("@ant-design/cssinjs");
|
|
var _style = require("../../style");
|
|
var _internal = require("../../theme/internal");
|
|
const genBorderedStyle = token => {
|
|
const {
|
|
listBorderedCls,
|
|
componentCls,
|
|
paddingLG,
|
|
margin,
|
|
itemPaddingSM,
|
|
itemPaddingLG,
|
|
marginLG,
|
|
borderRadiusLG
|
|
} = token;
|
|
const innerCornerBorderRadius = (0, _cssinjs.unit)(token.calc(borderRadiusLG).sub(token.lineWidth).equal());
|
|
return {
|
|
[listBorderedCls]: {
|
|
border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
|
|
borderRadius: borderRadiusLG,
|
|
[`${componentCls}-header`]: {
|
|
borderRadius: `${innerCornerBorderRadius} ${innerCornerBorderRadius} 0 0`
|
|
},
|
|
[`${componentCls}-footer`]: {
|
|
borderRadius: `0 0 ${innerCornerBorderRadius} ${innerCornerBorderRadius}`
|
|
},
|
|
[`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: {
|
|
paddingInline: paddingLG
|
|
},
|
|
[`${componentCls}-pagination`]: {
|
|
margin: `${(0, _cssinjs.unit)(margin)} ${(0, _cssinjs.unit)(marginLG)}`
|
|
}
|
|
},
|
|
[`${listBorderedCls}${componentCls}-sm`]: {
|
|
[`${componentCls}-item,${componentCls}-header,${componentCls}-footer`]: {
|
|
padding: itemPaddingSM
|
|
}
|
|
},
|
|
[`${listBorderedCls}${componentCls}-lg`]: {
|
|
[`${componentCls}-item,${componentCls}-header,${componentCls}-footer`]: {
|
|
padding: itemPaddingLG
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genResponsiveStyle = token => {
|
|
const {
|
|
componentCls,
|
|
screenSM,
|
|
screenMD,
|
|
marginLG,
|
|
marginSM,
|
|
margin
|
|
} = token;
|
|
return {
|
|
[`@media screen and (max-width:${screenMD}px)`]: {
|
|
[componentCls]: {
|
|
[`${componentCls}-item`]: {
|
|
[`${componentCls}-item-action`]: {
|
|
marginInlineStart: marginLG
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-vertical`]: {
|
|
[`${componentCls}-item`]: {
|
|
[`${componentCls}-item-extra`]: {
|
|
marginInlineStart: marginLG
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[`@media screen and (max-width: ${screenSM}px)`]: {
|
|
[componentCls]: {
|
|
[`${componentCls}-item`]: {
|
|
flexWrap: 'wrap',
|
|
[`${componentCls}-action`]: {
|
|
marginInlineStart: marginSM
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-vertical`]: {
|
|
[`${componentCls}-item`]: {
|
|
flexWrap: 'wrap-reverse',
|
|
[`${componentCls}-item-main`]: {
|
|
minWidth: token.contentWidth
|
|
},
|
|
[`${componentCls}-item-extra`]: {
|
|
margin: `auto auto ${(0, _cssinjs.unit)(margin)}`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
// =============================== Base ===============================
|
|
const genBaseStyle = token => {
|
|
const {
|
|
componentCls,
|
|
antCls,
|
|
controlHeight,
|
|
minHeight,
|
|
paddingSM,
|
|
marginLG,
|
|
padding,
|
|
itemPadding,
|
|
colorPrimary,
|
|
itemPaddingSM,
|
|
itemPaddingLG,
|
|
paddingXS,
|
|
margin,
|
|
colorText,
|
|
colorTextDescription,
|
|
motionDurationSlow,
|
|
lineWidth,
|
|
headerBg,
|
|
footerBg,
|
|
emptyTextPadding,
|
|
metaMarginBottom,
|
|
avatarMarginRight,
|
|
titleMarginBottom,
|
|
descriptionFontSize
|
|
} = token;
|
|
return {
|
|
[componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
|
|
position: 'relative',
|
|
// fix https://github.com/ant-design/ant-design/issues/46177
|
|
['--rc-virtual-list-scrollbar-bg']: token.colorSplit,
|
|
'*': {
|
|
outline: 'none'
|
|
},
|
|
[`${componentCls}-header`]: {
|
|
background: headerBg
|
|
},
|
|
[`${componentCls}-footer`]: {
|
|
background: footerBg
|
|
},
|
|
[`${componentCls}-header, ${componentCls}-footer`]: {
|
|
paddingBlock: paddingSM
|
|
},
|
|
[`${componentCls}-pagination`]: {
|
|
marginBlockStart: marginLG,
|
|
// https://github.com/ant-design/ant-design/issues/20037
|
|
[`${antCls}-pagination-options`]: {
|
|
textAlign: 'start'
|
|
}
|
|
},
|
|
[`${componentCls}-spin`]: {
|
|
minHeight,
|
|
textAlign: 'center'
|
|
},
|
|
[`${componentCls}-items`]: {
|
|
margin: 0,
|
|
padding: 0,
|
|
listStyle: 'none'
|
|
},
|
|
[`${componentCls}-item`]: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: itemPadding,
|
|
color: colorText,
|
|
[`${componentCls}-item-meta`]: {
|
|
display: 'flex',
|
|
flex: 1,
|
|
alignItems: 'flex-start',
|
|
maxWidth: '100%',
|
|
[`${componentCls}-item-meta-avatar`]: {
|
|
marginInlineEnd: avatarMarginRight
|
|
},
|
|
[`${componentCls}-item-meta-content`]: {
|
|
flex: '1 0',
|
|
width: 0,
|
|
color: colorText
|
|
},
|
|
[`${componentCls}-item-meta-title`]: {
|
|
margin: `0 0 ${(0, _cssinjs.unit)(token.marginXXS)} 0`,
|
|
color: colorText,
|
|
fontSize: token.fontSize,
|
|
lineHeight: token.lineHeight,
|
|
'> a': {
|
|
color: colorText,
|
|
transition: `all ${motionDurationSlow}`,
|
|
'&:hover': {
|
|
color: colorPrimary
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-item-meta-description`]: {
|
|
color: colorTextDescription,
|
|
fontSize: descriptionFontSize,
|
|
lineHeight: token.lineHeight
|
|
}
|
|
},
|
|
[`${componentCls}-item-action`]: {
|
|
flex: '0 0 auto',
|
|
marginInlineStart: token.marginXXL,
|
|
padding: 0,
|
|
fontSize: 0,
|
|
listStyle: 'none',
|
|
'& > li': {
|
|
position: 'relative',
|
|
display: 'inline-block',
|
|
padding: `0 ${(0, _cssinjs.unit)(paddingXS)}`,
|
|
color: colorTextDescription,
|
|
fontSize: token.fontSize,
|
|
lineHeight: token.lineHeight,
|
|
textAlign: 'center',
|
|
'&:first-child': {
|
|
paddingInlineStart: 0
|
|
}
|
|
},
|
|
[`${componentCls}-item-action-split`]: {
|
|
position: 'absolute',
|
|
insetBlockStart: '50%',
|
|
insetInlineEnd: 0,
|
|
width: lineWidth,
|
|
height: token.calc(token.fontHeight).sub(token.calc(token.marginXXS).mul(2)).equal(),
|
|
transform: 'translateY(-50%)',
|
|
backgroundColor: token.colorSplit
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-empty`]: {
|
|
padding: `${(0, _cssinjs.unit)(padding)} 0`,
|
|
color: colorTextDescription,
|
|
fontSize: token.fontSizeSM,
|
|
textAlign: 'center'
|
|
},
|
|
[`${componentCls}-empty-text`]: {
|
|
padding: emptyTextPadding,
|
|
color: token.colorTextDisabled,
|
|
fontSize: token.fontSize,
|
|
textAlign: 'center'
|
|
},
|
|
// ============================ without flex ============================
|
|
[`${componentCls}-item-no-flex`]: {
|
|
display: 'block'
|
|
}
|
|
}),
|
|
[`${componentCls}-grid ${antCls}-col > ${componentCls}-item`]: {
|
|
display: 'block',
|
|
maxWidth: '100%',
|
|
marginBlockEnd: margin,
|
|
paddingBlock: 0,
|
|
borderBlockEnd: 'none'
|
|
},
|
|
[`${componentCls}-vertical ${componentCls}-item`]: {
|
|
alignItems: 'initial',
|
|
[`${componentCls}-item-main`]: {
|
|
display: 'block',
|
|
flex: 1
|
|
},
|
|
[`${componentCls}-item-extra`]: {
|
|
marginInlineStart: marginLG
|
|
},
|
|
[`${componentCls}-item-meta`]: {
|
|
marginBlockEnd: metaMarginBottom,
|
|
[`${componentCls}-item-meta-title`]: {
|
|
marginBlockStart: 0,
|
|
marginBlockEnd: titleMarginBottom,
|
|
color: colorText,
|
|
fontSize: token.fontSizeLG,
|
|
lineHeight: token.lineHeightLG
|
|
}
|
|
},
|
|
[`${componentCls}-item-action`]: {
|
|
marginBlockStart: padding,
|
|
marginInlineStart: 'auto',
|
|
'> li': {
|
|
padding: `0 ${(0, _cssinjs.unit)(padding)}`,
|
|
'&:first-child': {
|
|
paddingInlineStart: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-split ${componentCls}-item`]: {
|
|
borderBlockEnd: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
|
'&:last-child': {
|
|
borderBlockEnd: 'none'
|
|
}
|
|
},
|
|
[`${componentCls}-split ${componentCls}-header`]: {
|
|
borderBlockEnd: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
|
|
},
|
|
[`${componentCls}-split${componentCls}-empty ${componentCls}-footer`]: {
|
|
borderTop: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
|
|
},
|
|
[`${componentCls}-loading ${componentCls}-spin-nested-loading`]: {
|
|
minHeight: controlHeight
|
|
},
|
|
[`${componentCls}-split${componentCls}-something-after-last-item ${antCls}-spin-container > ${componentCls}-items > ${componentCls}-item:last-child`]: {
|
|
borderBlockEnd: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
|
|
},
|
|
[`${componentCls}-lg ${componentCls}-item`]: {
|
|
padding: itemPaddingLG
|
|
},
|
|
[`${componentCls}-sm ${componentCls}-item`]: {
|
|
padding: itemPaddingSM
|
|
},
|
|
// Horizontal
|
|
[`${componentCls}:not(${componentCls}-vertical)`]: {
|
|
[`${componentCls}-item-no-flex`]: {
|
|
[`${componentCls}-item-action`]: {
|
|
float: 'right'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const prepareComponentToken = token => ({
|
|
contentWidth: 220,
|
|
itemPadding: `${(0, _cssinjs.unit)(token.paddingContentVertical)} 0`,
|
|
itemPaddingSM: `${(0, _cssinjs.unit)(token.paddingContentVerticalSM)} ${(0, _cssinjs.unit)(token.paddingContentHorizontal)}`,
|
|
itemPaddingLG: `${(0, _cssinjs.unit)(token.paddingContentVerticalLG)} ${(0, _cssinjs.unit)(token.paddingContentHorizontalLG)}`,
|
|
headerBg: 'transparent',
|
|
footerBg: 'transparent',
|
|
emptyTextPadding: token.padding,
|
|
metaMarginBottom: token.padding,
|
|
avatarMarginRight: token.padding,
|
|
titleMarginBottom: token.paddingSM,
|
|
descriptionFontSize: token.fontSize
|
|
});
|
|
// ============================== Export ==============================
|
|
exports.prepareComponentToken = prepareComponentToken;
|
|
var _default = exports.default = (0, _internal.genStyleHooks)('List', token => {
|
|
const listToken = (0, _internal.mergeToken)(token, {
|
|
listBorderedCls: `${token.componentCls}-bordered`,
|
|
minHeight: token.controlHeightLG
|
|
});
|
|
return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)];
|
|
}, prepareComponentToken); |