Merge branch 'develop-1.0.0' of github.com:ant-design/ant-design into develop-1.0.0

.github/ISSUE_TEMPLATE.md

@@ -1,3 +1,5 @@
+> 特别提示：报告 bug 前请确保你的问题是可复现的，并务必提供复现步骤，否则恕难解决。
+
 If you want to ask a question, please read [some tips](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question) first :-)
 
 If you are going to report a bug, please answer the following questions, thank you!

components/tag/demo/control.md

@@ -20,6 +20,15 @@ const App = React.createClass({
       ],
     };
   },
+  onClose(key, e) {
+    e.preventDefault();
+    if (key === 1) {
+      console.log('can not close it', this.state.tags);
+      this.setState({ tags: [...this.state.tags] });
+      return;
+    }
+    this.handleClose(key);
+  },
   handleClose(key) {
     const tags = [...this.state.tags].filter(tag => (tag.key !== key) && tag);
     console.log(tags);
@@ -35,7 +44,8 @@ const App = React.createClass({
     return (
       <div>
         {this.state.tags.map(tag =>
-          <Tag key={tag.key} closable afterClose={() => this.handleClose(tag.key)}>{tag.name}</Tag>
+          <Tag key={tag.key} closable onClose={(e) => this.onClose(tag.key, e)}
+            afterClose={() => this.handleClose(tag.key)}>{tag.name}</Tag>
         )}
         <div>
           <Button onClick={this.addTag}>添加标签</Button>

components/timeline/TimelineItem.jsx

@@ -10,18 +10,30 @@ export default class TimelineItem extends React.Component {
   }
 
   render() {
-    const { prefixCls, color, last, children, pending, className, ...restProps } = this.props;
+    const { prefixCls, color, last, children, pending, className, dot, ...restProps } = this.props;
+
     const itemClassName = classNames({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-last`]: last,
       [`${prefixCls}-item-pending`]: pending,
       [className]: className,
     });
+
+    const dotClassName = classNames({
+      [`${prefixCls}-item-head`]: true,
+      [`${prefixCls}-item-head-custom`]: dot,
+      [`${prefixCls}-item-head-${color}`]: true,
+    });
+
     return (
       <li {...restProps} className={itemClassName}>
         <div className={`${prefixCls}-item-tail`} />
-        <div className={`${prefixCls}-item-head ${prefixCls}-item-head-${color}`} />
-        <div className={`${prefixCls}-item-content`}>{children}</div>
+        <div className={dotClassName} style={{ color: /blue|red|green/.test(color) ? null : color }}>
+          {dot}
+        </div>
+        <div className={`${prefixCls}-item-content`}>
+          {children}
+        </div>
       </li>
     );
   }

components/timeline/demo/custom.md

@@ -0,0 +1,19 @@
+---
+order: 4
+title: 自定义时间轴点
+---
+
+可以设置为图标或其他自定义元素。
+
+````jsx
+import { Timeline, Icon } from 'antd';
+
+ReactDOM.render(
+  <Timeline>
+    <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+    <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">技术测试异常 2015-09-01</Timeline.Item>
+    <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
+  </Timeline>
+, mountNode);
+````

components/timeline/index.md

@@ -27,14 +27,15 @@ english: Timeline
 
 时间轴。
 
-| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
-|-----------|------------------------------------------|------------|-------|--------|
-|  pending  | 指定最后一个幽灵节点是否存在或内容 | boolean or React.Element | 无 | false  |
+| 参数      | 说明                                     | 类型       | 默认值 |
+|----------|----------------------------------------|------------|-------|
+| pending  | 指定最后一个幽灵节点是否存在或内容 | boolean or React.Element | false  |
 
 ### Timeline.Item
 
 时间轴的每一个节点。
 
-| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
-|-----------|------------------------------------------|------------|-------|--------|
-|  color   | 指定圆圈颜色。 | string | blue, red, green | blue     |
+| 参数      | 说明                                     | 类型       | 默认值 |
+|----------|------------------------------------------|------------|-------|
+| color   | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue  |
+| dot   | 自定义时间轴点 | React.Element | -  |

components/timeline/style/index.less

@@ -33,20 +33,39 @@
       height: 12px;
       background-color: #fff;
       border-radius: 100px;
+      border: 2px solid transparent;
       &-blue {
-        border: 2px solid @primary-color;
+        border-color: @primary-color;
+        color: @primary-color;
       }
       &-red {
-        border: 2px solid @error-color;
+        border-color: @error-color;
+        color: @error-color;
       }
       &-green {
-        border: 2px solid @success-color;
+        border-color: @success-color;
+        color: @success-color;
       }
     }
 
+    &-head-custom {
+      position: absolute;
+      text-align: center;
+      width: 40px;
+      left: -14px;
+      line-height: 1;
+      margin-top: 6px;
+      border: 0;
+      height: auto;
+      border-radius: 0;
+      padding: 3px 0;
+      font-size: 12px;
+      transform: translateY(-50%);
+    }
+
     &-content {
       padding: 0 0 10px 24px;
-      font-size: 12px;
+      font-size: @font-size-base;
       position: relative;
       top: -3px;
     }