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

* feat: timelineItem onClick * chore: remove time-line-item-props.ts * test: snap update * test: snap update
Tencent · Oct 24, 2023 · 2b8dcdf · 2b8dcdf
1 parent 1e4ed75
commit 2b8dcdf
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 58 deletions.
diff --git a/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap b/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`TimelineItem Component > props.content works fine 1`] = `
     class="t-timeline-item__wrapper"
   >
     <div
-      class="t-timeline-item__dot t-timeline-item__dot--default"
+      class="t-timeline-item__dot t-timeline-item__dot--primary"
     >
       <!---->
       <!---->
@@ -48,7 +48,7 @@ exports[`TimelineItem Component > props.label works fine 1`] = `
     class="t-timeline-item__wrapper"
   >
     <div
-      class="t-timeline-item__dot t-timeline-item__dot--default"
+      class="t-timeline-item__dot t-timeline-item__dot--primary"
     >
       <!---->
       <!---->
@@ -75,7 +75,7 @@ exports[`TimelineItem Component > slots.content works fine 1`] = `
     class="t-timeline-item__wrapper"
   >
     <div
-      class="t-timeline-item__dot t-timeline-item__dot--default"
+      class="t-timeline-item__dot t-timeline-item__dot--primary"
     >
       <!---->
       <!---->
@@ -118,7 +118,7 @@ exports[`TimelineItem Component > slots.label works fine 1`] = `
     class="t-timeline-item__wrapper"
   >
     <div
-      class="t-timeline-item__dot t-timeline-item__dot--default"
+      class="t-timeline-item__dot t-timeline-item__dot--primary"
     >
       <!---->
       <!---->

diff --git a/src/timeline/time-line-item-props.ts b/src/timeline/time-line-item-props.ts
diff --git a/src/timeline/timeline-item-props.ts b/src/timeline/timeline-item-props.ts
@@ -18,7 +18,7 @@ export default {
   },
   /** 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值. */
   dotColor: {
-    type: String,
+    type: String as PropType<TdTimelineItemProps['dotColor']>,
     default: 'primary',
   },
   /** 标签文本内容，可完全自定义 */
@@ -35,4 +35,6 @@ export default {
   },
   /** 是否处在加载状态 */
   loading: Boolean,
+  /** 点击时触发 */
+  onClick: Function as PropType<TdTimelineItemProps['onClick']>,
 };
diff --git a/src/timeline/timeline-item.tsx b/src/timeline/timeline-item.tsx
@@ -1,5 +1,6 @@
 import { defineComponent, inject } from 'vue';
-import TimeLineItemProps from './time-line-item-props';
+import omit from 'lodash/omit';
+import props from './timeline-item-props';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
 import { TimelineInjectKey, DEFAULT_PROVIDER } from './hooks';
@@ -10,7 +11,7 @@ const DEFAULT_THEME = ['default', 'primary', 'success', 'warning', 'error'];
 export default defineComponent({
   name: 'TTimelineItem',
   props: {
-    ...TimeLineItemProps,
+    ...props,
     index: {
       type: Number,
     },
@@ -44,6 +45,9 @@ export default defineComponent({
       }
       return '';
     };
+    const handleClick = (e: MouseEvent) => {
+      props.onClick?.({ e, item: omit(props, ['index']) });
+    };
 
     return () => {
       const { mode, theme, itemsStatus, reverse } = TimelineProvider.value;
@@ -59,7 +63,7 @@ export default defineComponent({
       }
 
       return (
-        <li class={[`${COMPONENT_NAME.value}`, `${getPositionClassName(props.index)}`]}>
+        <li class={[`${COMPONENT_NAME.value}`, `${getPositionClassName(props.index)}`]} onClick={handleClick}>
           {mode === 'alternate' && labelNode && (
             <div class={[`${COMPONENT_NAME.value}__label`, `${COMPONENT_NAME.value}__label--${mode}`]}>{labelNode}</div>
           )}

diff --git a/src/timeline/timeline.en-US.md b/src/timeline/timeline.en-US.md
@@ -5,11 +5,11 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-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
 
@@ -19,5 +19,12 @@ content | String / Slot / Function | - | Typescript：`string \| TNode`。[see m
 dot | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 dotColor | String | primary | Typescript：`string` | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/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`<br/>trigger on click | N
+
+### TimelineItem Events
+
+name | params | description
+-- | -- | --
+click | `(context: { e: MouseEvent; item: TdTimelineItemProps })` | trigger on click
diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md
@@ -21,3 +21,10 @@ dotColor | String | primary | 时间轴颜色，内置 `primary/warning/error/de
 label | String / Slot / Function | - | 标签文本内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/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`<br/>点击时触发 | N
+
+### TimelineItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(context: { e: MouseEvent; item: TdTimelineItemProps })` | 点击时触发
diff --git a/src/timeline/type.ts b/src/timeline/type.ts
@@ -60,4 +60,8 @@ export interface TdTimelineItemProps {
    * 是否处在加载状态
    */
   loading?: boolean;
+  /**
+   * 点击时触发
+   */
+  onClick?: (context: { e: MouseEvent; item: TdTimelineItemProps }) => void;
 }
diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap
@@ -170820,7 +170820,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/customContent.vue
       class="t-timeline-item__wrapper"
     >
       <div
-        class="t-timeline-item__dot t-timeline-item__dot--default"
+        class="t-timeline-item__dot t-timeline-item__dot--primary"
       >
         <!---->
         <!---->
@@ -170857,7 +170857,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/customContent.vue
       class="t-timeline-item__wrapper"
     >
       <div
-        class="t-timeline-item__dot t-timeline-item__dot--default"
+        class="t-timeline-item__dot t-timeline-item__dot--primary"
       >
         <!---->
         <!---->
@@ -170894,7 +170894,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/customContent.vue
       class="t-timeline-item__wrapper"
     >
       <div
-        class="t-timeline-item__dot t-timeline-item__dot--default"
+        class="t-timeline-item__dot t-timeline-item__dot--primary"
       >
         <!---->
         <!---->
@@ -170931,7 +170931,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/customContent.vue
       class="t-timeline-item__wrapper"
     >
       <div
-        class="t-timeline-item__dot t-timeline-item__dot--default"
+        class="t-timeline-item__dot t-timeline-item__dot--primary"
       >
         <!---->
         <!---->
@@ -172198,7 +172198,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/theme.vue 1`] = `
       class="t-timeline-item__wrapper"
     >
       <div
-        class="t-timeline-item__dot t-timeline-item__dot--default"
+        class="t-timeline-item__dot t-timeline-item__dot--primary"
       >
         <!---->
         <!---->