Merge pull request #235 from zhujun24/component-timeline

timeline

components/timeline/demo/basic.md

@@ -0,0 +1,21 @@
+# 基本用法
+
+- order: 0
+
+基本的时间轴。
+
+---
+
+````jsx
+let Timeline = antd.Timeline;
+let container = document.getElementById('components-timeline-demo-basic');
+
+React.render(
+<Timeline>
+  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
+</Timeline>
+, container);
+````

components/timeline/demo/color.md

@@ -0,0 +1,20 @@
+# 圆圈颜色
+
+- order: 1
+
+圆圈颜色。
+
+---
+
+````jsx
+let Timeline = antd.Timeline;
+let container = document.getElementById('components-timeline-demo-color');
+
+React.render(
+<Timeline>
+  <Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item color="red">初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+</Timeline>
+, container);
+````

components/timeline/demo/end.md

@@ -0,0 +1,20 @@
+# 最后一个
+
+- order: 2
+
+在最后位置添加一个幽灵节点。
+
+---
+
+````jsx
+let Timeline = antd.Timeline;
+let container = document.getElementById('components-timeline-demo-end');
+
+React.render(
+<Timeline>
+  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item end={true}>技术测试异常 2015-09-01</Timeline.Item>
+</Timeline>
+, container);
+````

components/timeline/index.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+let Timeline = 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
+          };
+          return React.cloneElement(ele, np);
+        }, this)}
+      </ul>
+    );
+  }
+});
+
+Timeline.Item = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-timeline',
+      color: 'blue',
+      end: false
+    };
+  },
+  render() {
+    let props = this.props;
+    let prefixCls = props.prefixCls;
+    let color = props.color;
+    let end = props.end;
+    let endCls = end ? prefixCls + '-item-tail-end' : '';
+    let last = end ? <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> : null;
+    let lastLineShow = (props.timelineLast && !end) ? 'none' : 'block';
+
+    return (
+      <li className={prefixCls + '-item'}>
+        <div style={{display:lastLineShow}} className={prefixCls + '-item-tail ' + endCls}></div>
+        <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color}></div>
+        <div className={prefixCls + '-item-content'}>{props.children}</div>
+        {last}
+      </li>
+    );
+  }
+});
+
+export default Timeline;

components/timeline/index.md

@@ -0,0 +1,34 @@
+# Timeline
+
+- category: Components
+- chinese: 时间轴
+- type: 展示
+
+---
+
+垂直展示的时间流信息。
+
+## 何时使用
+
+- 当有一系列信息需要从上至下按时间排列时；
+- 需要有一条时间轴进行视觉上的串联时；
+
+## API
+
+```jsx
+<Timeline>
+  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
+</Timeline>
+```
+
+### Timeline.Item
+
+时间轴的每一个节点。
+
+| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
+|-----------|------------------------------------------|------------|-------|--------|
+|  color   | 指定圆圈颜色。 | string | blue, red, green | blue     |
+|  end  | 指定最后一个幽灵节点。 | boolean | 无 | false  |

index.js

@@ -42,7 +42,8 @@ const antd = {
   Tree: require('./components/tree'),
   Upload: require('./components/upload'),
   Badge: require('./components/badge'),
-  Menu: require('./components/menu')
+  Menu: require('./components/menu'),
+  Timeline: require('./components/timeline')
 };
 
 module.exports = antd;

style/components/index.less

@@ -33,3 +33,4 @@
 @import "menu";
 @import "affix";
 @import "badge";
+@import "timeline";

style/components/timeline.less

@@ -0,0 +1,52 @@
+@import "../mixins/index";
+
+@timeline-prefix-cls: ~"@{css-prefix}timeline";
+
+@timeline-color: #e9e9e9;
+
+.@{timeline-prefix-cls} {
+  &-item {
+    position: relative;
+    min-height: 50px;
+    padding-bottom: 12px;
+
+    &-tail {
+      position: absolute;
+      left: 5px;
+      z-index: 1;
+      height: 100%;
+      border-left: 2px solid @timeline-color;
+      &-end {
+        border-left: 2px dotted @timeline-color;
+      }
+    }
+
+    &-head {
+      position: absolute;
+      z-index: 2;
+      width: 12px;
+      height: 12px;
+      background-color: #fff;
+      border-radius: 6px;
+      &-blue {
+        border: 2px solid @primary-color;
+      }
+      &-red {
+        border: 2px solid @error-color;
+      }
+      &-green {
+        border: 2px solid @success-color;
+      }
+      &-end{
+        position: absolute;
+        bottom: -12px;
+        border: 2px solid @timeline-color;
+      }
+    }
+
+    &-content {
+      margin-left: 26px;
+      font-size: 12px;
+    }
+  }
+}