You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

53 lines
1.4 KiB

import React from 'react';
9 years ago
let Timeline = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-timeline'
};
},
render() {
9 years ago
let children = this.props.children;
return (
<ul className={this.props.prefixCls}>
9 years ago
{React.Children.map(children, function (ele, idx) {
let np = {
timelineLast: idx === children.length - 1
};
return React.cloneElement(ele, np);
}, this)}
</ul>
);
}
});
9 years ago
Timeline.Item = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-timeline',
color: 'blue',
9 years ago
end: false
};
},
render() {
9 years ago
let props = this.props;
let prefixCls = props.prefixCls;
let color = props.color;
let end = props.end;
9 years ago
let endCls = end ? prefixCls + '-item-last' : '';
9 years ago
let last = end ? <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> : null;
9 years ago
let lastLineShow = (props.timelineLast && !end) ? 'none' : 'block';
9 years ago
return (
9 years ago
<li className={prefixCls + '-item ' + endCls}>
<div style={{display:lastLineShow}} className={prefixCls + '-item-tail'}></div>
9 years ago
<div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color}></div>
9 years ago
<div className={prefixCls + '-item-content'}>{props.children}</div>
{last}
</li>
);
}
});
9 years ago
export default Timeline;