mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 19:49:59 +08:00
feat: list support cssVar (#45795)
* feat: list support cssVar * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * Update components/list/style/index.ts Signed-off-by: MadCcc <1075746765@qq.com> --------- Signed-off-by: MadCcc <1075746765@qq.com> Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
kiner-tang(文辉)
GitHub
parent
29a427f67d
commit
6c044c7f2d
@ -13,6 +13,7 @@ import Pagination from '../pagination';
|
||||
import type { SpinProps } from '../spin';
|
||||
import Spin from '../spin';
|
||||
import Item from './Item';
|
||||
import useCSSVar from './style/cssVar';
|
||||
|
||||
// CSSINJS
|
||||
import { ListContext } from './context';
|
||||
@ -143,7 +144,8 @@ function List<T>({
|
||||
const prefixCls = getPrefixCls('list', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
const [, hashId] = useStyle(prefixCls);
|
||||
const wrapCSSVar = useCSSVar(prefixCls);
|
||||
|
||||
let loadingProp = loading;
|
||||
if (typeof loadingProp === 'boolean') {
|
||||
@ -284,7 +286,7 @@ function List<T>({
|
||||
[JSON.stringify(grid), itemLayout],
|
||||
);
|
||||
|
||||
return wrapSSR(
|
||||
return wrapCSSVar(
|
||||
<ListContext.Provider value={contextValue}>
|
||||
<div style={{ ...list?.style, ...style }} className={classString} {...rest}>
|
||||
{(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
|
||||
|
||||
4
components/list/style/cssVar.ts
Normal file
4
components/list/style/cssVar.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { genCSSVarRegister } from '../../theme/internal';
|
||||
import { prepareComponentToken } from '.';
|
||||
|
||||
export default genCSSVarRegister('List', prepareComponentToken);
|
||||
@ -1,7 +1,7 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { unit, type CSSObject } from '@ant-design/cssinjs';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
@ -80,14 +80,14 @@ const genBorderedStyle = (token: ListToken): CSSObject => {
|
||||
} = token;
|
||||
return {
|
||||
[`${listBorderedCls}`]: {
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: borderRadiusLG,
|
||||
[`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: {
|
||||
paddingInline: paddingLG,
|
||||
},
|
||||
|
||||
[`${componentCls}-pagination`]: {
|
||||
margin: `${margin}px ${marginLG}px`,
|
||||
margin: `${unit(margin)} ${unit(marginLG)}`,
|
||||
},
|
||||
},
|
||||
[`${listBorderedCls}${componentCls}-sm`]: {
|
||||
@ -144,7 +144,7 @@ const genResponsiveStyle = (token: ListToken): CSSObject => {
|
||||
},
|
||||
|
||||
[`${componentCls}-item-extra`]: {
|
||||
margin: `auto auto ${margin}px`,
|
||||
margin: `auto auto ${unit(margin)}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -251,7 +251,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
|
||||
},
|
||||
|
||||
[`${componentCls}-item-meta-title`]: {
|
||||
margin: `0 0 ${token.marginXXS}px 0`,
|
||||
margin: `0 0 ${unit(token.marginXXS)} 0`,
|
||||
color: colorText,
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
@ -283,7 +283,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
|
||||
[`& > li`]: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
padding: `0 ${paddingXS}px`,
|
||||
padding: `0 ${unit(paddingXS)}`,
|
||||
color: colorTextDescription,
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
@ -299,7 +299,10 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
|
||||
insetBlockStart: '50%',
|
||||
insetInlineEnd: 0,
|
||||
width: lineWidth,
|
||||
height: Math.ceil(token.fontSize * token.lineHeight) - token.marginXXS * 2,
|
||||
height: token
|
||||
.calc(token.fontHeight)
|
||||
.sub(token.calc(token.marginXXS).mul(2))
|
||||
.equal(),
|
||||
transform: 'translateY(-50%)',
|
||||
backgroundColor: token.colorSplit,
|
||||
},
|
||||
@ -307,7 +310,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
|
||||
},
|
||||
|
||||
[`${componentCls}-empty`]: {
|
||||
padding: `${padding}px 0`,
|
||||
padding: `${unit(padding)} 0`,
|
||||
color: colorTextDescription,
|
||||
fontSize: token.fontSizeSM,
|
||||
textAlign: 'center',
|
||||
@ -361,7 +364,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
|
||||
marginInlineStart: 'auto',
|
||||
|
||||
'> li': {
|
||||
padding: `0 ${padding}px`,
|
||||
padding: `0 ${unit(padding)}`,
|
||||
|
||||
[`&:first-child`]: {
|
||||
paddingInlineStart: 0,
|
||||
@ -371,7 +374,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
|
||||
},
|
||||
|
||||
[`${componentCls}-split ${componentCls}-item`]: {
|
||||
borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
borderBlockEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
||||
|
||||
[`&:last-child`]: {
|
||||
borderBlockEnd: 'none',
|
||||
@ -379,17 +382,17 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
|
||||
},
|
||||
|
||||
[`${componentCls}-split ${componentCls}-header`]: {
|
||||
borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
borderBlockEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
||||
},
|
||||
[`${componentCls}-split${componentCls}-empty ${componentCls}-footer`]: {
|
||||
borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
borderTop: `${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: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
borderBlockEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
||||
},
|
||||
[`${componentCls}-lg ${componentCls}-item`]: {
|
||||
padding: itemPaddingLG,
|
||||
@ -408,6 +411,22 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const prepareComponentToken: GetDefaultToken<'List'> = (token) => ({
|
||||
contentWidth: 220,
|
||||
itemPadding: `${unit(token.paddingContentVertical)} 0`,
|
||||
itemPaddingSM: `${unit(token.paddingContentVerticalSM)} ${unit(token.paddingContentHorizontal)}`,
|
||||
itemPaddingLG: `${unit(token.paddingContentVerticalLG)} ${unit(
|
||||
token.paddingContentHorizontalLG,
|
||||
)}`,
|
||||
headerBg: 'transparent',
|
||||
footerBg: 'transparent',
|
||||
emptyTextPadding: token.padding,
|
||||
metaMarginBottom: token.padding,
|
||||
avatarMarginRight: token.padding,
|
||||
titleMarginBottom: token.paddingSM,
|
||||
descriptionFontSize: token.fontSize,
|
||||
});
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'List',
|
||||
@ -419,17 +438,5 @@ export default genComponentStyleHook(
|
||||
|
||||
return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)];
|
||||
},
|
||||
(token) => ({
|
||||
contentWidth: 220,
|
||||
itemPadding: `${token.paddingContentVertical}px 0`,
|
||||
itemPaddingSM: `${token.paddingContentVerticalSM}px ${token.paddingContentHorizontal}px`,
|
||||
itemPaddingLG: `${token.paddingContentVerticalLG}px ${token.paddingContentHorizontalLG}px`,
|
||||
headerBg: 'transparent',
|
||||
footerBg: 'transparent',
|
||||
emptyTextPadding: token.padding,
|
||||
metaMarginBottom: token.padding,
|
||||
avatarMarginRight: token.padding,
|
||||
titleMarginBottom: token.paddingSM,
|
||||
descriptionFontSize: token.fontSize,
|
||||
}),
|
||||
prepareComponentToken,
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user