mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactor: Timeline support css var (#45831)

Browse Source
This commit is contained in:
JarvisArt 2023-11-13 16:30:18 +08:00 committed by GitHub
parent 98639ba6a5
commit ca25149fd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/timeline/Timeline.tsx
View File

@ -5,6 +5,8 @@ import { devUseWarning } from '../_util/warning';
import { ConfigContext } from '../config-provider';
// CSSINJS
import useStyle from './style';
import useCSSVar from './style/cssVar';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import type { TimelineItemProps } from './TimelineItem';
import TimelineItem from './TimelineItem';
import TimelineItemList from './TimelineItemList';
@ -41,14 +43,16 @@ const Timeline: CompoundedComponent = (props) => {
}
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const rootCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(rootCls);
const mergedItems: TimelineItemProps[] = useItems(items, children);
return wrapSSR(
return wrapCSSVar(
<TimelineItemList
{...restProps}
className={classNames(timeline?.className, className)}
className={classNames(timeline?.className, className, rootCls)}
style={{ ...timeline?.style, ...style }}
prefixCls={prefixCls}
direction={direction}

4
components/timeline/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Timeline', prepareComponentToken);

79
components/timeline/style/index.ts
View File

@ -1,6 +1,7 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
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 {
@ -38,7 +39,7 @@ interface TimelineToken extends FullToken<'Timeline'> {
}
const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
const { componentCls } = token;
const { componentCls, calc } = token;
return {
[componentCls]: {
@ -57,9 +58,9 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
'&-tail': {
position: 'absolute',
insetBlockStart: token.itemHeadSize,
insetInlineStart: (token.itemHeadSize - token.tailWidth) / 2,
height: `calc(100% - ${token.itemHeadSize}px)`,
borderInlineStart: `${token.tailWidth}px ${token.lineType} ${token.tailColor}`,
insetInlineStart: calc(calc(token.itemHeadSize).sub(token.tailWidth)).div(2).equal(),
height: `calc(100% - ${unit(token.itemHeadSize)})`,
borderInlineStart: `${unit(token.tailWidth)} ${token.lineType} ${token.tailColor}`,
},
'&-pending': {
@ -78,7 +79,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
width: token.itemHeadSize,
height: token.itemHeadSize,
backgroundColor: token.dotBg,
border: `${token.dotBorderWidth}px ${token.lineType} transparent`,
border: `${unit(token.dotBorderWidth)} ${token.lineType} transparent`,
borderRadius: '50%',
'&-blue': {
@ -104,8 +105,8 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
'&-head-custom': {
position: 'absolute',
insetBlockStart: token.itemHeadSize / 2,
insetInlineStart: token.itemHeadSize / 2,
insetBlockStart: calc(token.itemHeadSize).div(2).equal(),
insetInlineStart: calc(token.itemHeadSize).div(2).equal(),
width: 'auto',
height: 'auto',
marginBlockStart: 0,
@ -119,8 +120,11 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
'&-content': {
position: 'relative',
insetBlockStart: -(token.fontSize * token.lineHeight - token.fontSize) + token.lineWidth,
marginInlineStart: token.margin + token.itemHeadSize,
insetBlockStart: calc(calc(token.fontSize).mul(token.lineHeight).sub(token.fontSize))
.mul(-1)
.add(token.lineWidth)
.equal(),
marginInlineStart: calc(token.margin).add(token.itemHeadSize).equal(),
marginInlineEnd: 0,
marginBlockStart: 0,
marginBlockEnd: 0,
@ -133,7 +137,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
},
[`> ${componentCls}-item-content`]: {
minHeight: token.controlHeightLG * 1.2,
minHeight: calc(token.controlHeightLG).mul(1.2).equal(),
},
},
},
@ -147,24 +151,24 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
},
'&-head': {
marginInlineStart: `-${token.marginXXS}px`,
marginInlineStart: calc(token.marginXXS).mul(-1).equal(),
'&-custom': {
marginInlineStart: token.tailWidth / 2,
marginInlineStart: calc(token.tailWidth).div(2).equal(),
},
},
'&-left': {
[`${componentCls}-item-content`]: {
insetInlineStart: `calc(50% - ${token.marginXXS}px)`,
width: `calc(50% - ${token.marginSM}px)`,
insetInlineStart: `calc(50% - ${unit(token.marginXXS)})`,
width: `calc(50% - ${unit(token.marginSM)})`,
textAlign: 'start',
},
},
'&-right': {
[`${componentCls}-item-content`]: {
width: `calc(50% - ${token.marginSM}px)`,
width: `calc(50% - ${unit(token.marginSM)})`,
margin: 0,
textAlign: 'end',
},
@ -177,11 +181,13 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
[`${componentCls}-item-tail,
${componentCls}-item-head,
${componentCls}-item-head-custom`]: {
insetInlineStart: `calc(100% - ${(token.itemHeadSize + token.tailWidth) / 2}px)`,
insetInlineStart: `calc(100% - ${unit(
calc(calc(token.itemHeadSize).add(token.tailWidth)).div(2).equal(),
)})`,
},
[`${componentCls}-item-content`]: {
width: `calc(100% - ${token.itemHeadSize + token.marginXS}px)`,
width: `calc(100% - ${unit(calc(token.itemHeadSize).add(token.marginXS).equal())})`,
},
},
},
@ -190,8 +196,8 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
${componentCls}-item-last
${componentCls}-item-tail`]: {
display: 'block',
height: `calc(100% - ${token.margin}px)`,
borderInlineStart: `${token.tailWidth}px dotted ${token.tailColor}`,
height: `calc(100% - ${unit(token.margin)})`,
borderInlineStart: `${unit(token.tailWidth)} dotted ${token.tailColor}`,
},
[`&${componentCls}-reverse
@ -204,27 +210,30 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
[`${componentCls}-item-tail`]: {
insetBlockStart: token.margin,
display: 'block',
height: `calc(100% - ${token.margin}px)`,
borderInlineStart: `${token.tailWidth}px dotted ${token.tailColor}`,
height: `calc(100% - ${unit(token.margin)})`,
borderInlineStart: `${unit(token.tailWidth)} dotted ${token.tailColor}`,
},
[`${componentCls}-item-content`]: {
minHeight: token.controlHeightLG * 1.2,
minHeight: calc(token.controlHeightLG).mul(1.2).equal(),
},
},
[`&${componentCls}-label`]: {
[`${componentCls}-item-label`]: {
position: 'absolute',
insetBlockStart: -(token.fontSize * token.lineHeight - token.fontSize) + token.tailWidth,
width: `calc(50% - ${token.marginSM}px)`,
insetBlockStart: calc(calc(token.fontSize).mul(token.lineHeight).sub(token.fontSize))
.mul(-1)
.add(token.tailWidth)
.equal(),
width: `calc(50% - ${unit(token.marginSM)})`,
textAlign: 'end',
},
[`${componentCls}-item-right`]: {
[`${componentCls}-item-label`]: {
insetInlineStart: `calc(50% + ${token.marginSM}px)`,
width: `calc(50% - ${token.marginSM}px)`,
insetInlineStart: `calc(50% + ${unit(token.marginSM)})`,
width: `calc(50% - ${unit(token.marginSM)})`,
textAlign: 'start',
},
},
@ -243,6 +252,14 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
};
// ============================== Export ==============================
export const prepareComponentToken: GetDefaultToken<'Timeline'> = (token) => ({
tailColor: token.colorSplit,
tailWidth: token.lineWidthBold,
dotBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3,
dotBg: token.colorBgContainer,
itemPaddingBottom: token.padding * 1.25,
});
export default genComponentStyleHook(
'Timeline',
(token) => {
@ -254,11 +271,5 @@ export default genComponentStyleHook(
return [genTimelineStyle(timeLineToken)];
},
(token) => ({
tailColor: token.colorSplit,
tailWidth: token.lineWidthBold,
dotBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3,
dotBg: token.colorBgContainer,
itemPaddingBottom: token.padding * 1.25,
}),
prepareComponentToken,
);