mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-27 18:50:59 +08:00
502dac12aa
* docs: fix code * feat: lint * feat: prettier * feat: test * feat: review * feat: format html * feat: format html
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { devUseWarning } from '../_util/warning';
|
|
import { ConfigContext } from '../config-provider';
|
|
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
|
// CSSINJS
|
|
import useStyle from './style';
|
|
import type { TimelineItemProps } from './TimelineItem';
|
|
import TimelineItem from './TimelineItem';
|
|
import TimelineItemList from './TimelineItemList';
|
|
import useItems from './useItems';
|
|
|
|
export interface TimelineProps {
|
|
prefixCls?: string;
|
|
className?: string;
|
|
rootClassName?: string;
|
|
/** 指定最后一个幽灵节点是否存在或内容 */
|
|
pending?: React.ReactNode;
|
|
pendingDot?: React.ReactNode;
|
|
style?: React.CSSProperties;
|
|
reverse?: boolean;
|
|
mode?: 'left' | 'alternate' | 'right';
|
|
items?: TimelineItemProps[];
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
type CompoundedComponent = React.FC<TimelineProps> & {
|
|
Item: React.FC<TimelineItemProps>;
|
|
};
|
|
|
|
const Timeline: CompoundedComponent = (props) => {
|
|
const { getPrefixCls, direction, timeline } = React.useContext(ConfigContext);
|
|
const { prefixCls: customizePrefixCls, children, items, className, style, ...restProps } = props;
|
|
const prefixCls = getPrefixCls('timeline', customizePrefixCls);
|
|
|
|
// =================== Warning =====================
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const warning = devUseWarning('Timeline');
|
|
|
|
warning.deprecated(!children, 'Timeline.Item', 'items');
|
|
}
|
|
|
|
// Style
|
|
const rootCls = useCSSVarCls(prefixCls);
|
|
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
|
|
|
const mergedItems: TimelineItemProps[] = useItems(items, children);
|
|
|
|
return wrapCSSVar(
|
|
<TimelineItemList
|
|
{...restProps}
|
|
className={classNames(timeline?.className, className, cssVarCls, rootCls)}
|
|
style={{ ...timeline?.style, ...style }}
|
|
prefixCls={prefixCls}
|
|
direction={direction}
|
|
items={mergedItems}
|
|
hashId={hashId}
|
|
/>,
|
|
);
|
|
};
|
|
|
|
Timeline.Item = TimelineItem;
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Timeline.displayName = 'Timeline';
|
|
}
|
|
|
|
export default Timeline;
|