diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md index a373023a73..91ed9c6cea 100644 --- a/components/timeline/demo/pending.md +++ b/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( - +查看更多}> 创建服务现场 2015-09-01 初步排除网络异常 2015-09-01 技术测试异常 2015-09-01 diff --git a/components/timeline/index.jsx b/components/timeline/index.jsx index d609ba9724..41e14811db 100644 --- a/components/timeline/index.jsx +++ b/components/timeline/index.jsx @@ -1,56 +1,62 @@ import React from 'react'; +import classNames from 'classnames'; -let Timeline = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-timeline' - }; - }, - render() { - let children = this.props.children; - return ( - - ); - } -}); - -Timeline.Item = React.createClass({ +const TimelineItem = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-timeline', color: 'blue', - pending: false + last: false, + pending: false, }; }, render() { - let props = this.props; - let prefixCls = props.prefixCls; - let color = props.color; - let pending = props.pending; - let timelineLast = props.timelineLast; - let endCls = pending && timelineLast ? prefixCls + '-item-last' : ''; - let last = pending && timelineLast ? -
: - null; - let lastTailShow = (timelineLast && !pending) ? 'none' : 'block'; - + const { prefixCls, color, last, children, pending } = this.props; + const itemClassName = classNames({ + [prefixCls + '-item']: true, + [prefixCls + '-item-last']: last, + [prefixCls + '-item-pending']: pending, + }); return ( -
  • -
    -
    -
    {props.children}
    - {last} +
  • +
    +
    +
    {children}
  • ); } }); +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 ( + + ); + } +}); + +Timeline.Item = TimelineItem; + export default Timeline; diff --git a/components/timeline/index.md b/components/timeline/index.md index cdfb8d24dd..e8c8ac7b63 100644 --- a/components/timeline/index.md +++ b/components/timeline/index.md @@ -30,7 +30,7 @@ | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| -| pending | 指定最后一个幽灵节点。 | boolean | 无 | false | +| pending | 指定最后一个幽灵节点是否存在或内容 | boolean or React.Element | 无 | false | ### Timeline.Item diff --git a/style/components/timeline.less b/style/components/timeline.less index 2ef3f6c58f..3d1318ef39 100644 --- a/style/components/timeline.less +++ b/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; + } }