refactor:timeline (#6263)

* refactor:timeline

* docs:update & refactor: timeline type

Author: shifeng1993

components/input/style/index.ts

@@ -904,7 +904,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
         [`> ${componentCls}`]: {
           height: '100%',
         },
-        
+
         '&::after': {
           color: token.colorTextDescription,
           whiteSpace: 'nowrap',

components/style.ts

@@ -39,7 +39,7 @@ import './calendar/style';
 // import './slider/style';
 import './table/style';
 // import './progress/style';
-import './timeline/style';
+// import './timeline/style';
 import './input-number/style';
 // import './transfer/style';
 import './tree/style';

components/theme/interface/components.ts

@@ -40,7 +40,7 @@ import type { ComponentToken as SpinComponentToken } from '../../spin/style';
 // import type { ComponentToken as TableComponentToken } from '../../table/style';
 // import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
 import type { ComponentToken as TagComponentToken } from '../../tag/style';
-// import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
+import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
 import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
 import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
@@ -99,7 +99,7 @@ export interface ComponentTokenMap {
   Tree?: {};
   TreeSelect?: {};
   Typography?: TypographyComponentToken;
-  //   Timeline?: TimelineComponentToken;
+  Timeline?: TimelineComponentToken;
   Transfer?: TransferComponentToken;
   //   Tabs?: TabsComponentToken;
   //   Calendar?: CalendarComponentToken;

components/timeline/Timeline.tsx

@@ -6,15 +6,18 @@ import { filterEmpty } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import TimelineItem from './TimelineItem';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import { tuple } from '../_util/type';
+import { tuple, booleanType } from '../_util/type';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 
+// CSSINJS
+import useStyle from './style';
+
 export const timelineProps = () => ({
   prefixCls: String,
   /** 指定最后一个幽灵节点是否存在或内容 */
   pending: PropTypes.any,
   pendingDot: PropTypes.any,
-  reverse: { type: Boolean, default: undefined },
+  reverse: booleanType(),
   mode: PropTypes.oneOf(tuple('left', 'alternate', 'right', '')),
 });
 
@@ -23,13 +26,18 @@ export type TimelineProps = Partial<ExtractPropTypes<ReturnType<typeof timelineP
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ATimeline',
+  inheritAttrs: false,
   props: initDefaultProps(timelineProps(), {
     reverse: false,
     mode: '',
   }),
   slots: ['pending', 'pendingDot'],
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('timeline', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const getPositionCls = (ele, idx: number) => {
       const eleProps = ele.props || {};
       if (props.mode === 'alternate') {
@@ -80,14 +88,23 @@ export default defineComponent({
       const hasLabelItem = timeLineItems.some(
         item => !!(item.props?.label || item.children?.label),
       );
-      const classString = classNames(prefixCls.value, {
-        [`${prefixCls.value}-pending`]: !!pending,
-        [`${prefixCls.value}-reverse`]: !!reverse,
-        [`${prefixCls.value}-${mode}`]: !!mode && !hasLabelItem,
-        [`${prefixCls.value}-label`]: hasLabelItem,
-        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-      });
-      return <ul class={classString}>{items}</ul>;
+      const classString = classNames(
+        prefixCls.value,
+        {
+          [`${prefixCls.value}-pending`]: !!pending,
+          [`${prefixCls.value}-reverse`]: !!reverse,
+          [`${prefixCls.value}-${mode}`]: !!mode && !hasLabelItem,
+          [`${prefixCls.value}-label`]: hasLabelItem,
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        },
+        attrs.class,
+        hashId.value,
+      );
+      return wrapSSR(
+        <ul {...attrs} class={classString}>
+          {items}
+        </ul>,
+      );
     };
   },
 });

components/timeline/TimelineItem.tsx

@@ -3,14 +3,14 @@ import { defineComponent } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import { tuple } from '../_util/type';
+import { tuple, booleanType } from '../_util/type';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 
 export const timelineItemProps = () => ({
   prefixCls: String,
   color: String,
   dot: PropTypes.any,
-  pending: { type: Boolean, default: undefined },
+  pending: booleanType(),
   position: PropTypes.oneOf(tuple('left', 'right', '')).def(''),
   label: PropTypes.any,
 });

components/timeline/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Timeline
-cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Vertical display timeline.

components/timeline/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据展示
 title: Timeline
 subtitle: 时间轴
-cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 垂直展示的时间流信息。