ant-design/components/timeline/Timeline.tsx

63 lines
1.7 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { ConfigContext } from '../config-provider';
2022-06-22 14:57:09 +08:00
import type { TimelineItemProps } from './TimelineItem';
import TimelineItemList from './TimelineItemList';
2022-06-22 14:57:09 +08:00
import TimelineItem from './TimelineItem';
import warning from '../_util/warning';
import useItems from './useItems';
2016-07-09 10:53:40 +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;
rootClassName?: 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;
mode?: 'left' | 'alternate' | 'right';
items?: TimelineItemProps[];
children?: React.ReactNode;
2016-07-09 10:53:40 +08:00
}
2016-07-13 17:22:23 +08:00
type CompoundedComponent = React.FC<TimelineProps> & {
Item: React.FC<TimelineItemProps>;
};
2016-03-31 17:46:35 +08:00
const Timeline: CompoundedComponent = (props) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, children, items, ...restProps } = props;
const prefixCls = getPrefixCls('timeline', customizePrefixCls);
// =================== Warning =====================
if (process.env.NODE_ENV !== 'production') {
warning(!children, 'Timeline', '`Timeline.Item` is deprecated. Please use `items` instead.');
}
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const mergedItems: TimelineItemProps[] = useItems(items, children);
return wrapSSR(
<TimelineItemList
{...restProps}
prefixCls={prefixCls}
direction={direction}
items={mergedItems}
hashId={hashId}
/>,
);
};
Timeline.Item = TimelineItem;
if (process.env.NODE_ENV !== 'production') {
Timeline.displayName = 'Timeline';
}
export default Timeline;