diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx index a9e39bc046..38127876b4 100644 --- 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; item: TdTimelineItemProps }) => void; } const DefaultTheme = ['default', 'primary', 'success', 'warning', 'error']; @@ -27,6 +29,7 @@ const TimelineItem: React.FC = (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 = (props) => { return ele; }, [dot, classPrefix]); + const handleClick = (e: React.MouseEvent) => { + onClick?.({ e, item: omit(props, ['children', 'index', 'onClick']) }); + }; + // 节点类名 const itemClassName = classNames( { @@ -91,7 +98,7 @@ const TimelineItem: React.FC = (props) => { }); return ( -
  • +
  • {mode === 'alternate' && label &&
    {label}
    }
    diff --git a/src/timeline/timeline.en-US.md b/src/timeline/timeline.en-US.md index e036e75ba2..bfd3864df1 100644 --- 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)
    trigger on click. | N diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md index f846a179a1..a0cb2ea380 100644 --- 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)
    点击时触发。 | N