mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-28 11:08:30 +08:00
55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
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,
|
|
pending: this.props.pending
|
|
};
|
|
return React.cloneElement(ele, np);
|
|
}, this)}
|
|
</ul>
|
|
);
|
|
}
|
|
});
|
|
|
|
Timeline.Item = React.createClass({
|
|
getDefaultProps() {
|
|
return {
|
|
prefixCls: 'ant-timeline',
|
|
color: 'blue',
|
|
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 ? <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> : null;
|
|
let lastTailShow = (timelineLast && !pending) ? 'none' : 'block';
|
|
|
|
return (
|
|
<li className={prefixCls + '-item ' + endCls}>
|
|
<div style={{display:lastTailShow}} className={prefixCls + '-item-tail'}></div>
|
|
<div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color}></div>
|
|
<div className={prefixCls + '-item-content'}>{props.children}</div>
|
|
{last}
|
|
</li>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default Timeline;
|