support pending timeline node, ref #708

components/timeline/demo/pending.md

@@ -2,7 +2,7 @@
 
 - order: 2
 
-在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。
+在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。可以指定 `pending={true}` 或者 `pending={一个 React 元素}`。
 
 ---
 
@@ -10,7 +10,7 @@
 import { Timeline } from 'antd';
 
 ReactDOM.render(
-<Timeline pending>
+<Timeline pending={<a href="#">查看更多</a>}>
   <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
   <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
   <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>

components/timeline/index.jsx

@@ -1,56 +1,62 @@
 import React from 'react';
+import classNames from 'classnames';
 
-let Timeline = React.createClass({
+const TimelineItem = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-timeline'
-    };
-  },
-  render() {
-    let children = this.props.children;
-    return (
-      <ul className={this.props.prefixCls}>
-        {React.Children.map(children, function (ele, idx) {
-          let np = {
-            timelineLast: idx === children.length - 1,
-            pending: this.props.pending
-          };
-          return React.cloneElement(ele, np);
-        }, this)}
-      </ul>
-    );
-  }
-});
-
-Timeline.Item = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-timeline',
       color: 'blue',
-      pending: false
+      last: false,
+      pending: false,
     };
   },
   render() {
-    let props = this.props;
+    const { prefixCls, color, last, children, pending } = this.props;
-    let prefixCls = props.prefixCls;
+    const itemClassName = classNames({
-    let color = props.color;
+      [prefixCls + '-item']: true,
-    let pending = props.pending;
+      [prefixCls + '-item-last']: last,
-    let timelineLast = props.timelineLast;
+      [prefixCls + '-item-pending']: pending,
-    let endCls = pending && timelineLast ? prefixCls + '-item-last' : '';
+    });
-    let last = pending && timelineLast ?
-          <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> :
-          null;
-    let lastTailShow = (timelineLast && !pending) ? 'none' : 'block';
-
     return (
-      <li className={prefixCls + '-item ' + endCls}>
+      <li className={itemClassName}>
-        <div style={{ display: lastTailShow }} className={prefixCls + '-item-tail'}></div>
+        <div className={prefixCls + '-item-tail'} />
-        <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color}></div>
+        <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color} />
-        <div className={prefixCls + '-item-content'}>{props.children}</div>
+        <div className={prefixCls + '-item-content'}>{children}</div>
-        {last}
       </li>
     );
   }
 });
 
+const Timeline = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-timeline',
+    };
+  },
+  render() {
+    const { prefixCls, children, pending } = this.props;
+    const pendingNode = typeof pending === 'boolean' ? null : pending;
+    const className = classNames({
+      [prefixCls]: true,
+      [prefixCls + '-pending']: !!pending,
+    });
+    return (
+      <ul className={className}>
+        {
+          React.Children.map(children, (ele, idx) =>
+            React.cloneElement(ele, {
+              last: idx === children.length - 1,
+            })
+          )
+        }
+        {(!!pending)
+          ? <TimelineItem pending={!!pending}>{pendingNode}</TimelineItem>
+          : null}
+      </ul>
+    );
+  }
+});
+
+Timeline.Item = TimelineItem;
+
 export default Timeline;

components/timeline/index.md

@@ -30,7 +30,7 @@
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
-|  pending  | 指定最后一个幽灵节点。 | boolean | 无 | false  |
+|  pending  | 指定最后一个幽灵节点是否存在或内容 | boolean or React.Element | 无 | false  |
 
 ### Timeline.Item
 

style/components/timeline.less

@@ -17,6 +17,10 @@
       border-left: 2px solid @timeline-color;
     }
 
+    &-pending &-tail {
+      display: none;
+    }
+
     &-head {
       position: absolute;
       width: 12px;
@@ -32,9 +36,6 @@
       &-green {
         border: 2px solid @success-color;
       }
-      &-end {
-        border: 2px solid @timeline-color;
-      }
     }
 
     &-content {
@@ -47,10 +48,15 @@
     &-last {
       .@{timeline-prefix-cls}-item-tail {
         border-left: 2px dotted @timeline-color;
+        display: none;
       }
       .@{timeline-prefix-cls}-item-content {
         min-height: 48px;
       }
     }
   }
+
+  &&-pending &-item-last &-item-tail {
+    display: block;
+  }
 }