style: [c2d][timeline] modify code for c2d

packages/semi-foundation/timeline/timeline.scss

@@ -2,6 +2,68 @@
 
 $module: #{$prefix}-timeline;
 
+@mixin item-children {
+    &-tail,
+    &-head,
+    &-head-custom {
+        left: $spacing-timeline_item_head_custom-left;
+    }
+    &-head{
+        &.#{$module}-item-head-custom{
+            margin-left: 0;
+        }
+    }
+    &-head {
+        margin-left: $spacing-timeline_item_head-marginLeft;
+    }
+}
+
+@mixin item-direction {
+    &-left {
+        .#{$module}-item-content {
+            left: $spacing-timeline_item_left_item_content-left;
+            width: $width-timeline_item_left_item_content;
+            text-align: left;
+        }
+    }
+
+    &-right {
+        .#{$module}-item-content {
+            width: $width-timeline_item_right_item_content;
+            margin: $spacing-timeline_item_right_item_content;
+            text-align: right;
+        }
+    }
+}
+
+@mixin item-center {
+    &-center {
+        .#{$module}-item {
+            &-content-time {
+                position: absolute;
+                top: $spacing-timeline_time-top;
+                margin-left: $spacing-timeline_item_content_time-marginLeft;
+                width: $width-timeline_item_content_time;
+                text-align: right;
+            }
+        }
+    }
+}
+
+@mixin item-right {
+    .#{$module}-item {
+        &-tail,
+        &-head,
+        &-head-custom {
+            left: $spacing-timeline_item_right_item-left;
+        }
+
+        &-content {
+            width: $width-timeline_item_right_content;
+        }
+    }
+}
+
 .#{$module} {
     margin: $spacing-timeline-margin;
     padding: $spacing-timeline-padding;
@@ -115,65 +177,53 @@ $module: #{$prefix}-timeline;
     &-right,
     &-center {
         .#{$module}-item {
-            &-tail,
-            &-head,
-            &-head-custom {
-                left: $spacing-timeline_item_head_custom-left;
-            }
-            &-head{
-                &.#{$module}-item-head-custom{
-                    margin-left: 0;
-                }
-            }
-            &-head {
-                margin-left: $spacing-timeline_item_head-marginLeft;
-            }
+            @include item-children;
+            @include item-direction;
+        }
+    }
 
-            &-left {
-                .#{$module}-item-content {
-                    left: $spacing-timeline_item_left_item_content-left;
-                    width: $width-timeline_item_left_item_content;
-                    text-align: left;
-                }
-            }
+   
+    @include item-center;
 
-            &-right {
-                .#{$module}-item-content {
-                    width: $width-timeline_item_right_item_content;
-                    margin: $spacing-timeline_item_right_item_content;
-                    text-align: right;
-                }
-            }
+    &-right {
+        .#{$module}-item-right {
+            @include item-right;
         }
     }
+}
 
+// for c2d
+.#{$module}-item {
+    &-alternate,
+    &-mode-right,
     &-center {
         .#{$module}-item {
-            &-content-time {
-                position: absolute;
-                top: $spacing-timeline_time-top;
-                margin-left: $spacing-timeline_item_content_time-marginLeft;
-                width: $width-timeline_item_content_time;
-                text-align: right;
-            }
+            @include item-children;
+        }
+        &.#{$module}-item {
+            @include item-direction;
         }
     }
 
-    &-right {
-        .#{$module}-item-right {
-            .#{$module}-item {
-                &-tail,
-                &-head,
-                &-head-custom {
-                    left: $spacing-timeline_item_right_item-left;
-                }
-
-                &-content {
-                    width: $width-timeline_item_right_content;
+    &-alternate,
+    &-mode-right,
+    &-center,
+    &-left {
+        &.#{$module}-item {
+            &.#{$module}-item-not-last-child {
+                & > .#{$module}-item-tail {
+                    border-left: $width-timeline_tail-border solid $color-timeline_tail-border;
                 }
             }
         }
     }
-}
 
+    @include item-center;
+
+    &-mode-right {
+        &.#{$module}-item-right {
+            @include item-right;
+        }
+    }
+}
 @import './rtl.scss';

packages/semi-ui/timeline/_story/timeline.stories.jsx

@@ -230,6 +230,101 @@ export const OnClickDemo = () => (
   </div>
 );
 
-OnClickDemo.story = {
-  name: 'onClick',
+export const TimelineItem = () => {
+  return (
+    <>
+      <p>mode change</p>
+      <p>mode left</p>
+      <Timeline.Item mode='left' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <p>mode right</p>
+      <Timeline.Item mode='right' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <p>mode alternate</p>
+      <Timeline.Item mode='alternate' odd time='2015-09-01'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} time='2015-09-01'>创建服务现场</Timeline.Item>
+      <p>mode center</p>
+      <Timeline.Item mode='center' time='2015-09-01'>创建服务现场</Timeline.Item>
+
+      <p>mode=left, type change</p>
+      <Timeline.Item mode='left' type='default' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='left' type='error' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='left' type='ongoing' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='left' type='success' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='left' type='warning' time='2015-09-01' >创建服务现场</Timeline.Item>
+
+      <p>mode=right, type change</p>
+      <Timeline.Item mode='right' type='default' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='right' type='error' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='right' type='ongoing' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='right' type='success' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='right' type='warning' time='2015-09-01' >创建服务现场</Timeline.Item>
+
+      <p>mode=center, type change</p>
+      <Timeline.Item mode='center' type='default' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='center' type='error' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='center' type='ongoing' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='center' type='success' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='center' type='warning' time='2015-09-01' >创建服务现场</Timeline.Item>
+    
+      <p>mode=alternate, type change</p>
+      <Timeline.Item mode='alternate' odd type='default' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd type='error' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd type='ongoing' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd type='success' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd type='warning' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} type='default' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} type='error' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} type='ongoing' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} type='success' time='2015-09-01' >创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} type='warning' time='2015-09-01' >创建服务现场</Timeline.Item>
+
+      {/* has extra */}
+      <p>has extra</p>
+      <p>mode change</p>
+      <p>mode left</p>
+      <Timeline.Item mode='left' time='2015-09-01' extra='节点辅助说明信息' style={{ width: 300 }}>创建服务现场</Timeline.Item>
+      <p>mode right</p>
+      <Timeline.Item mode='right' time='2015-09-01' extra='节点辅助说明信息' style={{ width: 300 }}>创建服务现场</Timeline.Item>
+      <p>mode alternate</p>
+      <Timeline.Item mode='alternate' odd time='2015-09-01' extra='节点辅助说明信息' style={{ width: 300 }}>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} time='2015-09-01' extra='节点辅助说明信息' style={{ width: 300 }}>创建服务现场</Timeline.Item>
+      <p>mode center</p>
+      <Timeline.Item mode='center' time='2015-09-01'  extra='节点辅助说明信息' style={{ width: 300 }}>创建服务现场</Timeline.Item>
+
+      <p>mode=left, type change</p>
+      <Timeline.Item mode='left' type='default' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='left' type='error' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='left' type='ongoing' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='left' type='success' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='left' type='warning' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+
+      <p>mode=right, type change</p>
+      <Timeline.Item mode='right' type='default' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='right' type='error' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='right' type='ongoing' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='right' type='success' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='right' type='warning' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+
+      <p>mode=center, type change</p>
+      <Timeline.Item mode='center' type='default' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='center' type='error' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='center' type='ongoing' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='center' type='success' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='center' type='warning' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+    
+      <p>mode=alternate, type change</p>
+      <Timeline.Item mode='alternate' odd type='default' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd type='error' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd type='ongoing' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd type='success' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd type='warning' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} type='default' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} type='error' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' odd={false} type='ongoing' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+      <Timeline.Item mode='alternate' lastChild={true} odd={false} type='success' time='2015-09-01' extra='节点辅助说明信息'>创建服务现场</Timeline.Item>
+    </>
+  );
+}
+
+TimelineItem.story = {
+  name: 'C2D timeline item',
 };

packages/semi-ui/timeline/context.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export type ModeType = 'left' | 'right' | 'center' | 'alternate';
+
+export interface TimelineContextValue {
+    mode?: ModeType;
+    sum?: number
+}
+
+const Context = React.createContext<TimelineContextValue>(null);
+
+export default Context;

packages/semi-ui/timeline/index.tsx

@@ -5,7 +5,7 @@ import '@douyinfe/semi-foundation/timeline/timeline.scss';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/timeline/constants';
 import ConfigContext from '../configProvider/context';
 import Item, { TimelineItemProps } from './item';
-
+import Context, { ModeType } from './context';
 export type { TimelineItemProps } from './item';
 
 export interface Data extends TimelineItemProps {
@@ -13,7 +13,7 @@ export interface Data extends TimelineItemProps {
 }
 
 export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'> {
-    mode?: 'left' | 'right' | 'center' | 'alternate';
+    mode?: ModeType;
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];
@@ -85,12 +85,19 @@ class Timeline extends PureComponent<TimelineProps> {
             );
             childrenList = this.addClassName(items);
         }
+
         const items = childrenList || this.addClassName(children);
 
         return (
-            <ul aria-label={this.props['aria-label']} style={style} className={classString}>
-                {items}
-            </ul>
+            <Context.Provider
+                value={{
+                    mode,
+                }}
+            >
+                <ul aria-label={this.props['aria-label']} style={style} className={classString}>
+                    {items}
+                </ul>
+            </Context.Provider>
         );
     }
 }

packages/semi-ui/timeline/item.tsx

@@ -4,6 +4,7 @@ import { noop } from 'lodash';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/timeline/constants';
 import '@douyinfe/semi-foundation/timeline/timeline.scss';
+import Context, { ModeType, TimelineContextValue } from './context';
 
 export interface TimelineItemProps {
     color?: string;
@@ -15,12 +16,18 @@ export interface TimelineItemProps {
     position?: 'left' | 'right';
     className?: string;
     style?: React.CSSProperties;
-    onClick?: React.MouseEventHandler<HTMLLIElement>
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    // 以下参数用于 C2D， 用户请勿使用
+    mode?: ModeType;
+    odd?: boolean;
+    usedInC2D?: boolean
 }
 
 const prefixCls = cssClasses.ITEM;
 
 export default class Item extends PureComponent<TimelineItemProps> {
+    static contextType = Context;
+    static elementType: string;
     static propTypes = {
         color: PropTypes.string,
         time: PropTypes.node,
@@ -31,14 +38,39 @@ export default class Item extends PureComponent<TimelineItemProps> {
         className: PropTypes.string,
         style: PropTypes.object,
         onClick: PropTypes.func,
+        mode: PropTypes.string,
+        lastChild: PropTypes.bool,
     };
 
+    context: TimelineContextValue;
+
     static defaultProps = {
         type: 'default',
         time: '',
         onClick: noop,
     };
 
+    // getC2DCls is used in C2D, it does not work in non-C2D scenes
+    getC2DCls = () => {
+        let c2dCls = '';
+        const { mode, odd, usedInC2D } = this.props;
+        if (usedInC2D) {
+            switch (mode) {
+                case 'center':
+                    c2dCls = `${prefixCls}-center  ${prefixCls}-left`;
+                    break;
+                case 'alternate':
+                    c2dCls = `${prefixCls}-alternate  ${prefixCls}-${odd ? 'left' : 'right'}`;
+                    break;
+                default:
+                    c2dCls = `${prefixCls}-${mode} ${mode === 'right' ? `${prefixCls}-mode-right` : ''}`;
+                    break;
+            }
+            c2dCls += ` ${prefixCls}-not-last-child`;
+        }
+        return c2dCls;
+    }
+
     render() {
         const {
             className,
@@ -53,7 +85,8 @@ export default class Item extends PureComponent<TimelineItemProps> {
         } = this.props;
 
         const itemCls = cls(prefixCls,
-            className
+            className,
+            this.getC2DCls()
         );
 
         const dotCls = cls({
@@ -81,3 +114,5 @@ export default class Item extends PureComponent<TimelineItemProps> {
         );
     }
 }
+
+Item.elementType = 'Timeline.Item';