Timeline design change feature

components/timeline/Timeline.tsx

@@ -11,27 +11,31 @@ export interface TimelineProps {
   pendingDot?: React.ReactNode;
   style?: React.CSSProperties;
   reverse?: boolean;
+  mode?: 'left' | 'alternate' | 'right';
 }
 
 export default class Timeline extends React.Component<TimelineProps, any> {
   static Item = TimelineItem as React.ClassicComponentClass<TimeLineItemProps>;
   static defaultProps = {
     prefixCls: 'ant-timeline',
     reverse: false,
+    mode: '',
   };
 
   render() {
     const {
       prefixCls,
       pending = null, pendingDot,
       children, className, reverse,
+      mode,
       ...restProps
     } = this.props;
     const pendingNode = typeof pending === 'boolean' ? null : pending;
     const classString = classNames(prefixCls, {
       [`${prefixCls}-pending`]: !!pending,
       [`${prefixCls}-reverse`]: !!reverse,
-    }, className);
+    }, className,
+    `${prefixCls}-${mode}`);
 
     const pendingItem = !!pending ? (
       <TimelineItem
@@ -57,6 +61,9 @@ export default class Timeline extends React.Component<TimelineProps, any> {
           (!reverse && !!pending)
             ? (idx === itemsCount - 2) ? lastCls : ''
             : (idx === itemsCount - 1) ? lastCls : '',
+          (mode === 'alternate')
+            ? (idx % 2 === 0) ? `${prefixCls}-item-left` : `${prefixCls}-item-right`
+            : (mode === 'right') ? `${prefixCls}-item-right` : '',
         ]),
       }),
     );

components/timeline/__tests__/__snapshots__/demo.test.js.snap

@@ -1,8 +1,115 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = `
+<ul
+  class="ant-timeline ant-timeline-alternate"
+>
+  <li
+    class="ant-timeline-item ant-timeline-item-left"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-green"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-left"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"
+    >
+      <i
+        class="anticon anticon-clock-circle-o"
+        style="font-size:16px"
+      />
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-red"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Network problems being solved 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-left"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"
+    >
+      <i
+        class="anticon anticon-clock-circle-o"
+        style="font-size:16px"
+      />
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+</ul>
+`;
+
 exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
 <ul
-  class="ant-timeline"
+  class="ant-timeline ant-timeline-"
 >
   <li
     class="ant-timeline-item"
@@ -69,7 +176,7 @@ exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
 <ul
-  class="ant-timeline"
+  class="ant-timeline ant-timeline-"
 >
   <li
     class="ant-timeline-item"
@@ -152,7 +259,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
 
 exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
 <ul
-  class="ant-timeline"
+  class="ant-timeline ant-timeline-"
 >
   <li
     class="ant-timeline-item"
@@ -225,7 +332,7 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
 exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
 <div>
   <ul
-    class="ant-timeline ant-timeline-pending"
+    class="ant-timeline ant-timeline-pending ant-timeline-"
   >
     <li
       class="ant-timeline-item"
@@ -303,3 +410,75 @@ exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
   </button>
 </div>
 `;
+
+exports[`renders ./components/timeline/demo/right.md correctly 1`] = `
+<ul
+  class="ant-timeline ant-timeline-right"
+>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-red"
+    >
+      <i
+        class="anticon anticon-clock-circle-o"
+        style="font-size:16px"
+      />
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Network problems being solved 2015-09-01
+    </div>
+  </li>
+</ul>
+`;

components/timeline/demo/alternate.md

@@ -0,0 +1,29 @@
+---
+order: 3
+title:
+  zh-CN: 交替展现
+  en-US: Alternate
+---
+
+## zh-CN
+
+内容在时间轴两侧轮流出现。
+
+## en-US
+
+Alternate timeline.
+
+````jsx
+import { Timeline, Icon } from 'antd';
+
+ReactDOM.render(
+  <Timeline mode="alternate">
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</Timeline.Item>
+    <Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>Technical testing 2015-09-01</Timeline.Item>
+  </Timeline>,
+  mountNode);
+````

components/timeline/demo/right.md

@@ -0,0 +1,27 @@
+---
+order: 4
+title:
+  zh-CN: 右侧时间轴点
+  en-US: Right alternate
+---
+
+## zh-CN
+
+时间轴点可以在内容的右边。
+
+## en-US
+
+Right alternate timeline.
+
+````jsx
+import { Timeline, Icon } from 'antd';
+
+ReactDOM.render(
+  <Timeline mode="right">
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">Technical testing 2015-09-01</Timeline.Item>
+    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
+  </Timeline>,
+  mountNode);
+````

components/timeline/index.en-US.md

@@ -31,6 +31,7 @@ Timeline
 | pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false` |
 | pendingDot | Set the dot of the last ghost node when pending is true | \|string\|ReactNode | `<Icon type="loading" />` |
 | reverse | reverse nodes or not | boolean | false |
+| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` | `left` |
 
 ### Timeline.Item
 

components/timeline/index.zh-CN.md

@@ -32,6 +32,7 @@ title: Timeline
 | pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false |
 | pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | \|string\|ReactNode | `<Icon type="loading" />` |
 | reverse | 节点排序 | boolean | false |
+| mode | By sending `alternate` the timeline will distribute the nodes to the left and right.  | `standard` \| `alternate` | `standard` |
 
 ### Timeline.Item
 

components/timeline/style/index.less

@@ -86,6 +86,58 @@
     }
   }
 
+  &.@{timeline-prefix-cls}-alternate,
+  &.@{timeline-prefix-cls}-right {
+    .@{timeline-prefix-cls}-item {
+
+      &-tail,
+      &-head,
+      &-head-custom {
+        left: 50%;
+      }
+
+      &-head {
+        margin-left: -4px;
+        &-custom {
+          margin-left: 1px;
+        }
+      }
+
+      &-left {
+        .@{timeline-prefix-cls}-item-content {
+          text-align: left;
+          left: 50%;
+          width: 50%;
+        }
+      }
+
+      &-right {
+        .@{timeline-prefix-cls}-item-content {
+          text-align: right;
+          right: 50%;
+          margin-right: 18px;
+          width: 50%;
+          left: -30px;
+        }
+      }
+    }
+  }
+
+  &.@{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: 100%;
+      }
+      .@{timeline-prefix-cls}-item-content {
+        right: 0;
+        width: 100%;
+        left: -30px;
+      }
+    }
+  }
+
   &&-pending &-item-last &-item-tail {
     border-left: 2px dotted @timeline-color;
     display: block;