feat(Timeline): timelineitem add trigger on click (#2545)

* feat(Timeline): timelineitem add trigger on click * feat(timeline): timelineItem add trigger on click --------- Co-authored-by: Heising <[email protected]>
Tencent · Oct 18, 2023 · 97ad27b · 97ad27b
1 parent 5f4f5cf
commit 97ad27b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
@@ -1,5 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
+import omit from 'lodash/omit';
 import { TdTimelineItemProps } from './type';
 import { StyledProps } from '../common';
 import useConfig from '../hooks/useConfig';
@@ -11,6 +12,7 @@ import Loading from '../loading';
 export interface TimelineItemProps extends TdTimelineItemProps, StyledProps {
   children?: React.ReactNode;
   index?: number;
+  onClick?: (context: { e: React.MouseEvent<HTMLElement>; item: TdTimelineItemProps }) => void;
 }
 
 const DefaultTheme = ['default', 'primary', 'success', 'warning', 'error'];
@@ -27,6 +29,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
     content,
     label,
     loading = false,
+    onClick,
   } = props;
   const { theme, reverse, itemsStatus, layout, globalAlign, mode } = useContext(TimelineContext);
   const { classPrefix } = useConfig();
@@ -63,6 +66,10 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
     return ele;
   }, [dot, classPrefix]);
 
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    onClick?.({ e, item: omit(props, ['children', 'index', 'onClick']) });
+  };
+
   // 节点类名
   const itemClassName = classNames(
     {
@@ -91,7 +98,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
   });
 
   return (
-    <li className={itemClassName} style={style}>
+    <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 }}>

diff --git a/src/timeline/timeline.en-US.md b/src/timeline/timeline.en-US.md
@@ -26,3 +26,4 @@ dotColor | String | primary | Typescript：`string` | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | 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/src/timeline/type.ts) <br/>  trigger on click. | N
diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md
@@ -26,3 +26,4 @@ dotColor | String | primary | 时间轴颜色，内置 `primary/warning/error/de
 label | TNode | - | 标签文本内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/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/src/timeline/type.ts) <br/> 点击时触发。 | N