ant-design/components/timeline/Timeline.tsx
叶枫 502dac12aa
docs: format code ()
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

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;