ant-design/components/timeline/Timeline.tsx

71 lines
2.0 KiB
TypeScript
Raw Normal View History

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
/** 指定最后一个幽灵节点是否存在或内容 */
pending?: React.ReactNode;
pendingDot?: React.ReactNode;
2016-07-13 11:14:24 +08:00
style?: React.CSSProperties;
reverse?: boolean;
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',
reverse: false,
2016-07-13 11:14:24 +08:00
};
2016-03-31 17:46:35 +08:00
render() {
const {
prefixCls,
pending = null, pendingDot,
children, className, reverse,
...restProps
} = this.props;
2016-03-31 17:46:35 +08:00
const pendingNode = typeof pending === 'boolean' ? null : pending;
const classString = classNames(prefixCls, {
2016-03-31 17:46:35 +08:00
[`${prefixCls}-pending`]: !!pending,
[`${prefixCls}-reverse`]: !!reverse,
}, className);
const pendingItem = !!pending ? (
2018-01-09 17:42:31 +08:00
<TimelineItem
pending={!!pending}
dot={pendingDot || <Icon type="loading" />}
2018-01-09 17:42:31 +08:00
>
{pendingNode}
</TimelineItem>
) : null;
const timeLineItems = !!reverse
? [pendingItem, ...React.Children.toArray(children).reverse()]
: [...React.Children.toArray(children), pendingItem];
// Remove falsy items
2018-04-28 11:04:10 +08:00
const truthyItems = timeLineItems.filter(item => !!item);
const itemsCount = React.Children.count(truthyItems);
const lastCls = `${prefixCls}-item-last`;
2018-04-28 11:04:10 +08:00
const items = React.Children.map(truthyItems, (ele: React.ReactElement<any>, idx) =>
React.cloneElement(ele, {
className: classNames([
ele.props.className,
(!reverse && !!pending)
? (idx === itemsCount - 2) ? lastCls : ''
: (idx === itemsCount - 1) ? lastCls : '',
]),
}),
);
2016-03-31 17:46:35 +08:00
return (
<ul {...restProps} className={classString}>
{items}
2016-03-31 17:46:35 +08:00
</ul>
);
}
}