2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2016-03-31 17:46:35 +08:00
|
|
|
import classNames from 'classnames';
|
2017-06-05 11:39:59 +08:00
|
|
|
import TimelineItem, { TimeLineItemProps } from './TimelineItem';
|
2018-01-09 17:42:31 +08:00
|
|
|
import Icon from '../icon';
|
2016-07-09 10:53:40 +08:00
|
|
|
|
|
|
|
export interface TimelineProps {
|
2016-12-19 15:19:15 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2016-07-13 11:14:24 +08:00
|
|
|
/** 指定最后一个幽灵节点是否存在或内容 */
|
2017-01-20 20:10:50 +08:00
|
|
|
pending?: React.ReactNode;
|
2016-07-13 11:14:24 +08:00
|
|
|
style?: React.CSSProperties;
|
2016-07-09 10:53:40 +08:00
|
|
|
}
|
2016-07-13 17:22:23 +08:00
|
|
|
|
2016-07-09 10:53:40 +08:00
|
|
|
export default class Timeline extends React.Component<TimelineProps, any> {
|
2017-06-05 11:39:59 +08:00
|
|
|
static Item = TimelineItem as React.ClassicComponentClass<TimeLineItemProps>;
|
2016-03-31 17:46:35 +08:00
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-timeline',
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-31 17:46:35 +08:00
|
|
|
|
|
|
|
render() {
|
2016-12-19 15:19:15 +08:00
|
|
|
const { prefixCls, children, pending, className, ...restProps } = this.props;
|
2016-03-31 17:46:35 +08:00
|
|
|
const pendingNode = typeof pending === 'boolean' ? null : pending;
|
2016-11-30 10:20:23 +08:00
|
|
|
const classString = classNames(prefixCls, {
|
2016-03-31 17:46:35 +08:00
|
|
|
[`${prefixCls}-pending`]: !!pending,
|
2016-11-30 10:20:23 +08:00
|
|
|
}, className);
|
2017-09-01 17:06:30 +08:00
|
|
|
// Remove falsy items
|
2017-11-17 14:38:54 +08:00
|
|
|
const falsylessItems = React.Children.toArray(children).filter(item => !!item);
|
|
|
|
const items = React.Children.map(falsylessItems, (ele: React.ReactElement<any>, idx) =>
|
2016-11-25 12:03:39 +08:00
|
|
|
React.cloneElement(ele, {
|
2017-11-17 14:38:54 +08:00
|
|
|
last: idx === (React.Children.count(falsylessItems) - 1),
|
2017-03-23 21:15:49 +08:00
|
|
|
}),
|
2016-11-25 12:03:39 +08:00
|
|
|
);
|
|
|
|
const pendingItem = (!!pending) ? (
|
2018-01-09 17:42:31 +08:00
|
|
|
<TimelineItem
|
|
|
|
pending={!!pending}
|
|
|
|
dot={<Icon type="loading" />}
|
|
|
|
>
|
|
|
|
{pendingNode}
|
|
|
|
</TimelineItem>
|
2016-11-25 12:03:39 +08:00
|
|
|
) : null;
|
2016-03-31 17:46:35 +08:00
|
|
|
return (
|
2016-04-18 16:17:16 +08:00
|
|
|
<ul {...restProps} className={classString}>
|
2016-11-25 12:03:39 +08:00
|
|
|
{items}
|
|
|
|
{pendingItem}
|
2016-03-31 17:46:35 +08:00
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|