fix(timeline-time): fix custom dot

packages/components/timeline/TimelineItem.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { omit } from 'lodash-es';
 import { TdTimelineItemProps } from './type';
@@ -55,17 +55,6 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
     return '';
   };
 
-  const dotElement = useMemo(() => {
-    const ele = parseTNode(dot);
-
-    if (React.isValidElement(ele)) {
-      return React.cloneElement<any>(ele, {
-        className: classNames((ele as any)?.props?.className, `${classPrefix}-timeline-item__dot-content`),
-      });
-    }
-    return ele;
-  }, [dot, classPrefix]);
-
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
     onClick?.({ e, item: omit(props, ['children', 'index', 'onClick']) });
   };
@@ -86,25 +75,36 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
     [`${classPrefix}-timeline-item__tail--status-${itemsStatus[index]}`]: reverse,
   });
 
-  // 圆圈类名
-  const dotClassName = classNames({
-    [`${classPrefix}-timeline-item__dot`]: true,
-    [`${classPrefix}-timeline-item__dot--custom`]: !!dotElement || (!dotElement && loading),
-    [`${classPrefix}-timeline-item__dot--${dotColor}`]: DefaultTheme.includes(dotColor),
-  });
-
   const labelClassName = classNames(`${classPrefix}-timeline-item__label`, {
     [`${classPrefix}-timeline-item__label--${mode}`]: true,
   });
 
+  const renderDotContent = () => {
+    const dotContent = parseTNode(dot);
+    const isLoading = !dotContent && loading;
+
+    return (
+      <div
+        className={classNames({
+          [`${classPrefix}-timeline-item__dot`]: true,
+          [`${classPrefix}-timeline-item__dot--custom`]: !!dotContent || isLoading,
+          [`${classPrefix}-timeline-item__dot--${dotColor}`]: DefaultTheme.includes(dotColor),
+        })}
+        style={{ borderColor: !DefaultTheme.includes(dotColor) && dotColor }}
+      >
+        {dotContent || isLoading ? (
+          <div className={classNames(`${classPrefix}-timeline-item__dot-content`)}>
+            {isLoading ? <Loading size="12px"></Loading> : dotContent}
+          </div>
+        ) : null}
+      </div>
+    );
+  };
   return (
     <li className={itemClassName} style={style} onClick={handleClick}>
       {mode === 'alternate' && label && <div className={labelClassName}>{label}</div>}
       <div className={`${classPrefix}-timeline-item__wrapper`}>
-        <div className={dotClassName} style={{ borderColor: !DefaultTheme.includes(dotColor) && dotColor }}>
-          {!dotElement && loading && <Loading size="12px" className={`${classPrefix}-timeline-item__dot-content`} />}
-          {dotElement}
-        </div>
+        {renderDotContent()}
         <div className={tailClassName} />
       </div>
       <div className={`${classPrefix}-timeline-item__content`}>

packages/components/timeline/timeline.en-US.md

@@ -1,17 +1,19 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Timeline Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
-labelAlign | String | left | label info placement。options：left/right/alternate/top/bottom | N
-layout | String | vertical | time line layout。options：horizontal/vertical | N
-mode | String | alternate | The position relationship between the label and the content text, 'alternate' is displayed on both sides of the axis, and 'same' is displayed on the same side。options：alternate/same | N
+labelAlign | String | left | label info placement。options: left/right/alternate/top/bottom | N
+layout | String | vertical | time line layout。options: horizontal/vertical | N
+mode | String | alternate | The position relationship between the label and the content text, 'alternate' is displayed on both sides of the axis, and 'same' is displayed on the same side。options: alternate/same | N
 reverse | Boolean | false | \- | N
-theme | String | default | options：default/dot | N
+theme | String | default | options: default/dot | N
+
 
 ### TimelineItem Props
 
@@ -24,6 +26,6 @@ content | TNode | - | Typescript: `string \| TNode`。[see more ts definition](h
 dot | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 dotColor | String | primary | Typescript: `string` | N
 label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
-labelAlign | String | - | options：left/right/top/bottom | N
+labelAlign | String | - | options: left/right/top/bottom | N
 loading | Boolean | - | Whether it is in the loading state | N
-onClick | Function |  | Typescript: `(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/timeline/type.ts) <br/>  trigger on click. | N
+onClick | Function |  | Typescript: `(context: { e: MouseEvent; item: TdTimelineItemProps }) => void`<br/>trigger on click | N

packages/components/timeline/timeline.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Timeline Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -13,6 +14,7 @@ mode | String | alternate | 标签与内容文本的位置关系，`alternate` 
 reverse | Boolean | false | 时间轴是否表现为倒序 | N
 theme | String | default | 时间轴风格。可选项：default/dot | N
 
+
 ### TimelineItem Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -22,8 +24,8 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 children | TNode | - | 描述内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 content | TNode | - | 描述内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
-dotColor | String | primary | 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值.。TS 类型：`string` | N
+dotColor | String | primary | 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值。TS 类型：`string` | N
 label | TNode | - | 标签文本内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 labelAlign | String | - | 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `Timeline.labelAlign`。可选项：left/right/top/bottom | N
 loading | Boolean | - | 是否处在加载状态 | N
-onClick | Function |  | TS 类型：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/timeline/type.ts) <br/> 点击时触发。 | N
+onClick | Function |  | TS 类型：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void`<br/>点击时触发 | N

packages/components/timeline/type.ts

@@ -5,6 +5,7 @@
  * */
 
 import { TNode, TElement } from '../common';
+import { MouseEvent } from 'react';
 
 export interface TdTimelineProps {
   /**
@@ -28,7 +29,7 @@ export interface TdTimelineProps {
    */
   reverse?: boolean;
   /**
-   * 步骤条风格
+   * 时间轴风格
    * @default default
    */
   theme?: 'default' | 'dot';
@@ -48,7 +49,7 @@ export interface TdTimelineItemProps {
    */
   dot?: TElement;
   /**
-   * 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值.
+   * 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值
    * @default primary
    */
   dotColor?: string;
@@ -64,4 +65,8 @@ export interface TdTimelineItemProps {
    * 是否处在加载状态
    */
   loading?: boolean;
+  /**
+   * 点击时触发
+   */
+  onClick?: (context: { e: MouseEvent<HTMLElement>; item: TdTimelineItemProps }) => void;
 }