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';
|
2020-03-02 12:09:38 +08:00
|
|
|
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2017-06-05 11:39:59 +08:00
|
|
|
import TimelineItem, { TimeLineItemProps } from './TimelineItem';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
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;
|
2018-03-09 15:03:19 +08:00
|
|
|
pendingDot?: React.ReactNode;
|
2016-07-13 11:14:24 +08:00
|
|
|
style?: React.CSSProperties;
|
2018-04-20 11:23:37 +08:00
|
|
|
reverse?: boolean;
|
2018-07-28 00:25:23 +08:00
|
|
|
mode?: 'left' | 'alternate' | 'right';
|
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> {
|
2018-12-05 19:12:18 +08:00
|
|
|
static Item: React.SFC<TimeLineItemProps> = TimelineItem;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2016-03-31 17:46:35 +08:00
|
|
|
static defaultProps = {
|
2018-04-20 11:23:37 +08:00
|
|
|
reverse: false,
|
2018-07-28 00:25:23 +08:00
|
|
|
mode: '',
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-31 17:46:35 +08:00
|
|
|
|
2020-01-02 19:10:16 +08:00
|
|
|
renderTimeline = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
2018-04-20 11:23:37 +08:00
|
|
|
const {
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
2018-12-07 20:02:01 +08:00
|
|
|
pending = null,
|
|
|
|
pendingDot,
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
reverse,
|
2018-07-28 00:25:23 +08:00
|
|
|
mode,
|
2018-06-02 20:12:09 +08:00
|
|
|
...restProps
|
2018-04-20 11:23:37 +08:00
|
|
|
} = this.props;
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('timeline', customizePrefixCls);
|
2016-03-31 17:46:35 +08:00
|
|
|
const pendingNode = typeof pending === 'boolean' ? null : pending;
|
2018-04-20 11:23:37 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
const pendingItem = pending ? (
|
2019-11-28 12:34:33 +08:00
|
|
|
<TimelineItem pending={!!pending} dot={pendingDot || <LoadingOutlined />}>
|
2018-01-09 17:42:31 +08:00
|
|
|
{pendingNode}
|
|
|
|
</TimelineItem>
|
2016-11-25 12:03:39 +08:00
|
|
|
) : null;
|
2018-04-20 11:23:37 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
const timeLineItems = reverse
|
2018-04-20 11:23:37 +08:00
|
|
|
? [pendingItem, ...React.Children.toArray(children).reverse()]
|
|
|
|
: [...React.Children.toArray(children), pendingItem];
|
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
const getPositionCls = (ele: React.ReactElement<any>, idx: number) => {
|
|
|
|
if (mode === 'alternate') {
|
|
|
|
if (ele.props.position === 'right') return `${prefixCls}-item-right`;
|
|
|
|
if (ele.props.position === 'left') return `${prefixCls}-item-left`;
|
|
|
|
return idx % 2 === 0 ? `${prefixCls}-item-left` : `${prefixCls}-item-right`;
|
|
|
|
}
|
|
|
|
if (mode === 'left') return `${prefixCls}-item-left`;
|
|
|
|
if (mode === 'right') return `${prefixCls}-item-right`;
|
|
|
|
if (ele.props.position === 'right') return `${prefixCls}-item-right`;
|
|
|
|
return '';
|
|
|
|
};
|
|
|
|
|
2018-04-20 11:23:37 +08:00
|
|
|
// Remove falsy items
|
2018-04-28 11:04:10 +08:00
|
|
|
const truthyItems = timeLineItems.filter(item => !!item);
|
|
|
|
const itemsCount = React.Children.count(truthyItems);
|
2018-04-20 11:23:37 +08:00
|
|
|
const lastCls = `${prefixCls}-item-last`;
|
2019-08-05 18:38:10 +08:00
|
|
|
const items = React.Children.map(truthyItems, (ele: React.ReactElement<any>, idx) => {
|
|
|
|
const pendingClass = idx === itemsCount - 2 ? lastCls : '';
|
|
|
|
const readyClass = idx === itemsCount - 1 ? lastCls : '';
|
|
|
|
return React.cloneElement(ele, {
|
2018-04-20 11:23:37 +08:00
|
|
|
className: classNames([
|
|
|
|
ele.props.className,
|
2019-08-05 18:38:10 +08:00
|
|
|
!reverse && !!pending ? pendingClass : readyClass,
|
2019-05-06 12:04:39 +08:00
|
|
|
getPositionCls(ele, idx),
|
2018-04-20 11:23:37 +08:00
|
|
|
]),
|
2019-08-05 18:38:10 +08:00
|
|
|
});
|
|
|
|
});
|
2018-04-20 11:23:37 +08:00
|
|
|
|
2020-02-26 17:21:44 +08:00
|
|
|
const hasLabelItem = timeLineItems.some(
|
|
|
|
(item: React.ReactElement<any>) => !!item?.props?.label,
|
|
|
|
);
|
|
|
|
|
|
|
|
const classString = classNames(
|
|
|
|
prefixCls,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-pending`]: !!pending,
|
|
|
|
[`${prefixCls}-reverse`]: !!reverse,
|
|
|
|
[`${prefixCls}-${mode}`]: !!mode && !hasLabelItem,
|
|
|
|
[`${prefixCls}-label`]: hasLabelItem,
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
},
|
|
|
|
className,
|
|
|
|
);
|
|
|
|
|
2016-03-31 17:46:35 +08:00
|
|
|
return (
|
2018-04-15 16:51:05 +08:00
|
|
|
<ul {...restProps} className={classString}>
|
2016-11-25 12:03:39 +08:00
|
|
|
{items}
|
2016-03-31 17:46:35 +08:00
|
|
|
</ul>
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderTimeline}</ConfigConsumer>;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2016-03-31 17:46:35 +08:00
|
|
|
}
|