mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
feat: add cssinjs of timeline (#34980)
* feat: add cssinjs of timeline * fix: fix cr problems * chore: revert unreteated code * chore: revert unreteated code * chore: clean code Co-authored-by: 歆其 <luzhenjie.lzj@antgroup.com>
This commit is contained in:
LuZhenJie1999
GitHub
parent
101865cf7e
commit
a5e9547b26
@ -8,6 +8,7 @@ import type { ComponentToken as MentionsComponentToken } from '../../mentions/st
|
||||
import type { ComponentToken as SelectComponentToken } from '../../select/style';
|
||||
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
|
||||
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
|
||||
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
|
||||
|
||||
export const PresetColors = [
|
||||
'blue',
|
||||
@ -72,6 +73,7 @@ export interface OverrideToken {
|
||||
Tree?: {};
|
||||
TreeSelect?: {};
|
||||
Typography?: TypographyComponentToken;
|
||||
Timeline?: TimelineComponentToken;
|
||||
Tabs?: {};
|
||||
}
|
||||
|
||||
|
||||
@ -6,6 +6,9 @@ import TimelineItem, { TimelineItemProps } from './TimelineItem';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
|
||||
// CSSINJS
|
||||
import useStyle from './style';
|
||||
|
||||
export interface TimelineProps {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
@ -36,6 +39,9 @@ const Timeline: TimelineType = props => {
|
||||
const prefixCls = getPrefixCls('timeline', customizePrefixCls);
|
||||
const pendingNode = typeof pending === 'boolean' ? null : pending;
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const pendingItem = pending ? (
|
||||
<TimelineItem pending={!!pending} dot={pendingDot || <LoadingOutlined />}>
|
||||
{pendingNode}
|
||||
@ -90,10 +96,10 @@ const Timeline: TimelineType = props => {
|
||||
className,
|
||||
);
|
||||
|
||||
return (
|
||||
<ul {...restProps} className={classString}>
|
||||
return wrapSSR(
|
||||
<ul {...restProps} className={classNames(classString, hashId)}>
|
||||
{items}
|
||||
</ul>
|
||||
</ul>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,185 +1,185 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@timeline-prefix-cls: ~'@{ant-prefix}-timeline';
|
||||
// @timeline-prefix-cls: ~'@{ant-prefix}-timeline';
|
||||
|
||||
.@{timeline-prefix-cls} {
|
||||
.reset-component();
|
||||
// .@{timeline-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// list-style: none;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-bottom: @timeline-item-padding-bottom;
|
||||
font-size: @font-size-base;
|
||||
list-style: none;
|
||||
// &-item {
|
||||
// position: relative;
|
||||
// margin: 0;
|
||||
// padding-bottom: @timeline-item-padding-bottom;
|
||||
// font-size: @font-size-base;
|
||||
// list-style: none;
|
||||
|
||||
&-tail {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 4px;
|
||||
height: calc(100% - 10px);
|
||||
border-left: @timeline-width solid @timeline-color;
|
||||
}
|
||||
// &-tail {
|
||||
// position: absolute;
|
||||
// top: 10px;
|
||||
// left: 4px;
|
||||
// height: calc(100% - 10px);
|
||||
// border-left: @timeline-width solid @timeline-color;
|
||||
// }
|
||||
|
||||
&-pending &-head {
|
||||
font-size: @font-size-sm;
|
||||
background-color: transparent;
|
||||
}
|
||||
// &-pending &-head {
|
||||
// font-size: @font-size-sm;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
|
||||
&-pending &-tail {
|
||||
display: none;
|
||||
}
|
||||
// &-pending &-tail {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&-head {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: @timeline-dot-bg;
|
||||
border: @timeline-dot-border-width solid transparent;
|
||||
border-radius: 100px;
|
||||
// &-head {
|
||||
// position: absolute;
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
// background-color: @timeline-dot-bg;
|
||||
// border: @timeline-dot-border-width solid transparent;
|
||||
// border-radius: 100px;
|
||||
|
||||
&-blue {
|
||||
color: @primary-color;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
// &-blue {
|
||||
// color: @primary-color;
|
||||
// border-color: @primary-color;
|
||||
// }
|
||||
|
||||
&-red {
|
||||
color: @error-color;
|
||||
border-color: @error-color;
|
||||
}
|
||||
// &-red {
|
||||
// color: @error-color;
|
||||
// border-color: @error-color;
|
||||
// }
|
||||
|
||||
&-green {
|
||||
color: @success-color;
|
||||
border-color: @success-color;
|
||||
}
|
||||
// &-green {
|
||||
// color: @success-color;
|
||||
// border-color: @success-color;
|
||||
// }
|
||||
|
||||
&-gray {
|
||||
color: @disabled-color;
|
||||
border-color: @disabled-color;
|
||||
}
|
||||
}
|
||||
// &-gray {
|
||||
// color: @disabled-color;
|
||||
// border-color: @disabled-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-head-custom {
|
||||
position: absolute;
|
||||
top: 5.5px;
|
||||
left: 5px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
padding: 3px 1px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
// &-head-custom {
|
||||
// position: absolute;
|
||||
// top: 5.5px;
|
||||
// left: 5px;
|
||||
// width: auto;
|
||||
// height: auto;
|
||||
// margin-top: 0;
|
||||
// padding: 3px 1px;
|
||||
// line-height: 1;
|
||||
// text-align: center;
|
||||
// border: 0;
|
||||
// border-radius: 0;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
|
||||
margin: 0 0 0 @margin-lg + 2px;
|
||||
word-break: break-word;
|
||||
}
|
||||
// &-content {
|
||||
// position: relative;
|
||||
// top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
|
||||
// margin: 0 0 0 @margin-lg + 2px;
|
||||
// word-break: break-word;
|
||||
// }
|
||||
|
||||
&-last {
|
||||
> .@{timeline-prefix-cls}-item-tail {
|
||||
display: none;
|
||||
}
|
||||
> .@{timeline-prefix-cls}-item-content {
|
||||
min-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-last {
|
||||
// > .@{timeline-prefix-cls}-item-tail {
|
||||
// display: none;
|
||||
// }
|
||||
// > .@{timeline-prefix-cls}-item-content {
|
||||
// min-height: 48px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&.@{timeline-prefix-cls}-alternate,
|
||||
&.@{timeline-prefix-cls}-right,
|
||||
&.@{timeline-prefix-cls}-label {
|
||||
.@{timeline-prefix-cls}-item {
|
||||
&-tail,
|
||||
&-head,
|
||||
&-head-custom {
|
||||
left: 50%;
|
||||
}
|
||||
// &.@{timeline-prefix-cls}-alternate,
|
||||
// &.@{timeline-prefix-cls}-right,
|
||||
// &.@{timeline-prefix-cls}-label {
|
||||
// .@{timeline-prefix-cls}-item {
|
||||
// &-tail,
|
||||
// &-head,
|
||||
// &-head-custom {
|
||||
// left: 50%;
|
||||
// }
|
||||
|
||||
&-head {
|
||||
margin-left: -4px;
|
||||
// &-head {
|
||||
// margin-left: -4px;
|
||||
|
||||
&-custom {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
// &-custom {
|
||||
// margin-left: 1px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-left {
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
left: calc(50% - 4px);
|
||||
width: calc(50% - 14px);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
// &-left {
|
||||
// .@{timeline-prefix-cls}-item-content {
|
||||
// left: calc(50% - 4px);
|
||||
// width: calc(50% - 14px);
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-right {
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
width: calc(50% - 12px);
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-right {
|
||||
// .@{timeline-prefix-cls}-item-content {
|
||||
// width: calc(50% - 12px);
|
||||
// margin: 0;
|
||||
// text-align: right;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&.@{timeline-prefix-cls}-right {
|
||||
.@{timeline-prefix-cls}-item-right {
|
||||
.@{timeline-prefix-cls}-item-tail,
|
||||
.@{timeline-prefix-cls}-item-head,
|
||||
.@{timeline-prefix-cls}-item-head-custom {
|
||||
left: calc(100% - 4px - @timeline-width);
|
||||
}
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
width: calc(100% - 18px);
|
||||
}
|
||||
}
|
||||
}
|
||||
// &.@{timeline-prefix-cls}-right {
|
||||
// .@{timeline-prefix-cls}-item-right {
|
||||
// .@{timeline-prefix-cls}-item-tail,
|
||||
// .@{timeline-prefix-cls}-item-head,
|
||||
// .@{timeline-prefix-cls}-item-head-custom {
|
||||
// left: calc(100% - 4px - @timeline-width);
|
||||
// }
|
||||
// .@{timeline-prefix-cls}-item-content {
|
||||
// width: calc(100% - 18px);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&&-pending &-item-last &-item-tail {
|
||||
display: block;
|
||||
height: calc(100% - 14px);
|
||||
border-left: 2px dotted @timeline-color;
|
||||
}
|
||||
// &&-pending &-item-last &-item-tail {
|
||||
// display: block;
|
||||
// height: calc(100% - 14px);
|
||||
// border-left: 2px dotted @timeline-color;
|
||||
// }
|
||||
|
||||
&&-reverse &-item-last &-item-tail {
|
||||
display: none;
|
||||
}
|
||||
// &&-reverse &-item-last &-item-tail {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&&-reverse &-item-pending {
|
||||
.@{timeline-prefix-cls}-item-tail {
|
||||
top: 15px;
|
||||
display: block;
|
||||
height: calc(100% - 15px);
|
||||
border-left: 2px dotted @timeline-color;
|
||||
}
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
min-height: 48px;
|
||||
}
|
||||
}
|
||||
&.@{timeline-prefix-cls}-label {
|
||||
.@{timeline-prefix-cls}-item-label {
|
||||
position: absolute;
|
||||
top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
|
||||
width: calc(50% - 12px);
|
||||
text-align: right;
|
||||
}
|
||||
.@{timeline-prefix-cls}-item-right {
|
||||
.@{timeline-prefix-cls}-item-label {
|
||||
left: calc(50% + 14px);
|
||||
width: calc(50% - 14px);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &&-reverse &-item-pending {
|
||||
// .@{timeline-prefix-cls}-item-tail {
|
||||
// top: 15px;
|
||||
// display: block;
|
||||
// height: calc(100% - 15px);
|
||||
// border-left: 2px dotted @timeline-color;
|
||||
// }
|
||||
// .@{timeline-prefix-cls}-item-content {
|
||||
// min-height: 48px;
|
||||
// }
|
||||
// }
|
||||
// &.@{timeline-prefix-cls}-label {
|
||||
// .@{timeline-prefix-cls}-item-label {
|
||||
// position: absolute;
|
||||
// top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
|
||||
// width: calc(50% - 12px);
|
||||
// text-align: right;
|
||||
// }
|
||||
// .@{timeline-prefix-cls}-item-right {
|
||||
// .@{timeline-prefix-cls}-item-label {
|
||||
// left: calc(50% + 14px);
|
||||
// width: calc(50% - 14px);
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './rtl';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,2 +1,207 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import { FullToken, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme';
|
||||
|
||||
export interface ComponentToken {}
|
||||
|
||||
interface TimelineToken extends FullToken<'Timeline'> {}
|
||||
|
||||
const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
listStyle: 'none',
|
||||
|
||||
[`${componentCls}-item`]: {
|
||||
position: 'relative',
|
||||
margin: 0,
|
||||
paddingBottom: 20, // FIXME: v4 magic number
|
||||
fontSize: token.fontSizeBase,
|
||||
listStyle: 'none',
|
||||
|
||||
'&-tail': {
|
||||
position: 'absolute',
|
||||
insetBlockStart: 10, // FIXME: v4 magic number
|
||||
insetInlineStart: `${token.radiusLG}px`,
|
||||
height: `calc(100% - 10px)`, // FIXME: v4 magic number
|
||||
borderInlineStart: `${token.radiusBase}px solid rgba(0, 0, 0, 0.06)`, // FIXME: v4 magic number
|
||||
},
|
||||
|
||||
'&-pending': {
|
||||
[`${componentCls}-item-head`]: {
|
||||
fontSize: token.fontSizeSM,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
|
||||
[`${componentCls}-item-tail`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&-head': {
|
||||
position: 'absolute',
|
||||
width: 10, // FIXME: v4 magic number
|
||||
height: 10, // FIXME: v4 magic number
|
||||
backgroundColor: token.colorBgComponent,
|
||||
border: `${token.radiusBase}px solid transparent`,
|
||||
borderRadius: 100, // FIXME: v4 magic number
|
||||
|
||||
'&-blue': {
|
||||
color: token.colorPrimary,
|
||||
borderColor: token.colorPrimary,
|
||||
},
|
||||
|
||||
'&-red': {
|
||||
color: token.colorError,
|
||||
borderColor: token.colorError,
|
||||
},
|
||||
|
||||
'&-green': {
|
||||
color: token.colorSuccess,
|
||||
borderColor: token.colorSuccess,
|
||||
},
|
||||
|
||||
'&-gray': {
|
||||
color: token.colorTextDisabled,
|
||||
borderColor: token.colorTextDisabled,
|
||||
},
|
||||
},
|
||||
|
||||
'&-head-custom': {
|
||||
position: 'absolute',
|
||||
insetBlockStart: 5.5, // FIXME: v4 magic number
|
||||
insetInlineStart: 5, // FIXME: v4 magic number
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
marginBlockStart: 0,
|
||||
padding: '3px 1px', // FIXME: v4 magic number
|
||||
lineHeight: 1,
|
||||
textAlign: 'center',
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
transform: `translate(-50%, -50%)`,
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
position: 'relative',
|
||||
insetBlockStart: `${
|
||||
-(token.fontSizeBase * token.lineHeight - token.fontSizeBase) + token.radiusSM
|
||||
}px`,
|
||||
margin: `0 0 0 ${token.marginLG + token.radiusBase}px`,
|
||||
wordBreak: 'break-word',
|
||||
},
|
||||
|
||||
'&-last': {
|
||||
[`> ${componentCls}-item-tail`]: {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
[`> ${componentCls}-item-content`]: {
|
||||
minHeight: 48, // FIXME: v4 magic number
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-alternate,
|
||||
&${componentCls}-right,
|
||||
&${componentCls}-label`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-tail, &-head, &-head-custom': {
|
||||
insetInlineStart: '50%',
|
||||
},
|
||||
|
||||
'&-head': {
|
||||
marginInlineStart: `-${token.marginXXS}px`,
|
||||
|
||||
'&-custom': {
|
||||
marginInlineStart: `${token.radiusSM}px`,
|
||||
},
|
||||
},
|
||||
|
||||
'&-left': {
|
||||
[`${componentCls}-item-content`]: {
|
||||
insetInlineStart: `calc(50% - ${token.marginXXS}px)`,
|
||||
width: `calc(50% - 14px)`, // FIXME: v4 magic number
|
||||
textAlign: 'start',
|
||||
},
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
[`${componentCls}-item-content`]: {
|
||||
width: `calc(50% - ${token.marginSM}px)`,
|
||||
margin: 0,
|
||||
textAlign: 'end',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-right`]: {
|
||||
[`${componentCls}-item-right`]: {
|
||||
[`${componentCls}-item-tail,
|
||||
${componentCls}-item-head,
|
||||
${componentCls}-item-head-custom`]: {
|
||||
insetInlineStart: `calc(100% - ${token.radiusLG - token.radiusBase}px)`,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-content`]: {
|
||||
width: `calc(100% - 18px)`, // FIXME: v4 magic number
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-pending
|
||||
${componentCls}-item-last
|
||||
${componentCls}-item-tail`]: {
|
||||
display: 'block',
|
||||
height: `calc(100% - 14px)`, // FIXME: v4 magic number
|
||||
borderInlineStart: `${token.radiusBase}px dotted rgba(0, 0, 0, 0.06)`, // FIXME: v4 magic number
|
||||
},
|
||||
|
||||
[`&${componentCls}-reverse
|
||||
${componentCls}-item-last
|
||||
${componentCls}-item-tail`]: {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
[`&${componentCls}-reverse ${componentCls}-item-pending`]: {
|
||||
[`${componentCls}-item-tail`]: {
|
||||
insetBlockStart: 15, // FIXME: v4 magic number
|
||||
display: 'block',
|
||||
height: `calc(100% - 15px)`, // FIXME: v4 magic number
|
||||
borderInlineStart: `${token.radiusBase}px dotted rgba(0, 0, 0, 0.06)`, // FIXME: v4 magic number
|
||||
},
|
||||
|
||||
[`${componentCls}-item-content`]: {
|
||||
minHeight: 48, // FIXME: v4 magic number
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-label`]: {
|
||||
[`${componentCls}-item-label`]: {
|
||||
position: 'absolute',
|
||||
insetBlockStart: `${
|
||||
-(token.fontSizeBase * token.lineHeight - token.fontSizeBase) + token.radiusSM
|
||||
}px`,
|
||||
width: `calc(50% - ${token.marginSM}px)`,
|
||||
textAlign: 'end',
|
||||
},
|
||||
|
||||
[`${componentCls}-item-right`]: {
|
||||
[`${componentCls}-item-label`]: {
|
||||
insetInlineStart: `calc(50% + 14px)`, // FIXME: v4 magic number
|
||||
width: `calc(50% - 14px)`, // FIXME: v4 magic number
|
||||
textAlign: 'start',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Timeline', token => [genTimelineStyle(token)]);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user