2023-05-05 20:52:44 +08:00
|
|
|
import React from 'react';
|
2020-05-02 18:55:56 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { TimelineItemProps } from './TimelineItem';
|
2023-02-07 16:16:48 +08:00
|
|
|
import TimelineItemList from './TimelineItemList';
|
2022-06-22 14:57:09 +08:00
|
|
|
import TimelineItem from './TimelineItem';
|
2023-02-07 16:16:48 +08:00
|
|
|
import warning from '../_util/warning';
|
|
|
|
import useItems from './useItems';
|
2016-07-09 10:53:40 +08:00
|
|
|
|
2022-04-12 00:17:57 +08:00
|
|
|
// CSSINJS
|
|
|
|
import useStyle from './style';
|
|
|
|
|
2016-07-09 10:53:40 +08:00
|
|
|
export interface TimelineProps {
|
2016-12-19 15:19:15 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName?: 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';
|
2023-02-07 16:16:48 +08:00
|
|
|
items?: TimelineItemProps[];
|
2022-04-08 22:55:42 +08:00
|
|
|
children?: React.ReactNode;
|
2016-07-09 10:53:40 +08:00
|
|
|
}
|
2016-07-13 17:22:23 +08:00
|
|
|
|
2022-11-19 16:56:23 +08:00
|
|
|
type CompoundedComponent = React.FC<TimelineProps> & {
|
2020-10-03 22:03:09 +08:00
|
|
|
Item: React.FC<TimelineItemProps>;
|
2022-11-19 16:56:23 +08:00
|
|
|
};
|
2016-03-31 17:46:35 +08:00
|
|
|
|
2022-11-19 16:56:23 +08:00
|
|
|
const Timeline: CompoundedComponent = (props) => {
|
2020-05-02 18:55:56 +08:00
|
|
|
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
2023-02-07 16:16:48 +08:00
|
|
|
const { prefixCls: customizePrefixCls, children, items, ...restProps } = props;
|
2020-05-02 18:55:56 +08:00
|
|
|
const prefixCls = getPrefixCls('timeline', customizePrefixCls);
|
2018-04-20 11:23:37 +08:00
|
|
|
|
2023-02-07 16:16:48 +08:00
|
|
|
// =================== Warning =====================
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
warning(!children, 'Timeline', '`Timeline.Item` is deprecated. Please use `items` instead.');
|
2020-12-01 12:13:41 +08:00
|
|
|
}
|
2018-04-20 11:23:37 +08:00
|
|
|
|
2023-02-07 16:16:48 +08:00
|
|
|
// Style
|
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
2020-02-26 17:21:44 +08:00
|
|
|
|
2023-02-07 16:16:48 +08:00
|
|
|
const mergedItems: TimelineItemProps[] = useItems(items, children);
|
2020-02-26 17:21:44 +08:00
|
|
|
|
2022-04-12 00:17:57 +08:00
|
|
|
return wrapSSR(
|
2023-02-07 16:16:48 +08:00
|
|
|
<TimelineItemList
|
|
|
|
{...restProps}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
direction={direction}
|
|
|
|
items={mergedItems}
|
|
|
|
hashId={hashId}
|
|
|
|
/>,
|
2020-05-02 18:55:56 +08:00
|
|
|
);
|
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2020-05-02 18:55:56 +08:00
|
|
|
Timeline.Item = TimelineItem;
|
|
|
|
|
2023-01-08 21:30:41 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Timeline.displayName = 'Timeline';
|
|
|
|
}
|
|
|
|
|
2020-05-02 18:55:56 +08:00
|
|
|
export default Timeline;
|