From 99fee450c094cbef5b697c6fc45e5be801117b2f Mon Sep 17 00:00:00 2001 From: Heising Date: Wed, 11 Oct 2023 16:07:21 +0800 Subject: [PATCH 1/2] feat(Timeline): timelineitem add trigger on click --- src/timeline/TimelineItem.tsx | 5 ++++- src/timeline/timeline.en-US.md | 1 + src/timeline/timeline.md | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx index a9e39bc046..f5a7e30cd5 100644 --- a/src/timeline/TimelineItem.tsx +++ b/src/timeline/TimelineItem.tsx @@ -7,10 +7,12 @@ import TimelineContext from './TimelineContext'; import parseTNode from '../_util/parseTNode'; import { useAlign } from './useAlign'; import Loading from '../loading'; +import noop from '../_util/noop'; export interface TimelineItemProps extends TdTimelineItemProps, StyledProps { children?: React.ReactNode; index?: number; + onClick?: (e: React.MouseEvent) => void; } const DefaultTheme = ['default', 'primary', 'success', 'warning', 'error']; @@ -27,6 +29,7 @@ const TimelineItem: React.FC = (props) => { content, label, loading = false, + onClick = noop, } = props; const { theme, reverse, itemsStatus, layout, globalAlign, mode } = useContext(TimelineContext); const { classPrefix } = useConfig(); @@ -91,7 +94,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..8cc51da8c2 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：`(e: MouseEvent) => void`. trigger on click | N diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md index f846a179a1..1142f75e4e 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 类型：`(e: MouseEvent) => void`。点击时触发 | N From 3f4cbd4572df2212b28d2e52f8aca300027af1ca Mon Sep 17 00:00:00 2001 From: zzk <974758671@qq.com> Date: Thu, 12 Oct 2023 22:16:34 +0800 Subject: [PATCH 2/2] feat(timeline): timelineItem add trigger on click --- src/timeline/TimelineItem.tsx | 12 ++++++++---- src/timeline/timeline.en-US.md | 2 +- src/timeline/timeline.md | 2 +- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx index f5a7e30cd5..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'; @@ -7,12 +8,11 @@ import TimelineContext from './TimelineContext'; import parseTNode from '../_util/parseTNode'; import { useAlign } from './useAlign'; import Loading from '../loading'; -import noop from '../_util/noop'; export interface TimelineItemProps extends TdTimelineItemProps, StyledProps { children?: React.ReactNode; index?: number; - onClick?: (e: React.MouseEvent) => void; + onClick?: (context: { e: React.MouseEvent; item: TdTimelineItemProps }) => void; } const DefaultTheme = ['default', 'primary', 'success', 'warning', 'error']; @@ -29,7 +29,7 @@ const TimelineItem: React.FC = (props) => { content, label, loading = false, - onClick = noop, + onClick, } = props; const { theme, reverse, itemsStatus, layout, globalAlign, mode } = useContext(TimelineContext); const { classPrefix } = useConfig(); @@ -66,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( { @@ -94,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 8cc51da8c2..bfd3864df1 100644 --- a/src/timeline/timeline.en-US.md +++ b/src/timeline/timeline.en-US.md @@ -26,4 +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：`(e: MouseEvent) => void`. trigger on click | 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 1142f75e4e..a0cb2ea380 100644 --- a/src/timeline/timeline.md +++ b/src/timeline/timeline.md @@ -26,4 +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 类型：`(e: MouseEvent) => void`。点击时触发 | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/timeline/type.ts)
    点击时触发。 | N