From 2b8dcdfa621c7c52d52a5329eabd631a965ff6b0 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Tue, 24 Oct 2023 19:43:25 +0800 Subject: [PATCH] feat(Timeline): timelineitem add trigger on click (#3512) * feat: timelineItem onClick * chore: remove time-line-item-props.ts * test: snap update * test: snap update --- .../vitest-timeline.test.jsx.snap | 8 ++-- src/timeline/time-line-item-props.ts | 38 ------------------- src/timeline/timeline-item-props.ts | 4 +- src/timeline/timeline-item.tsx | 10 +++-- src/timeline/timeline.en-US.md | 17 ++++++--- src/timeline/timeline.md | 7 ++++ src/timeline/type.ts | 4 ++ test/unit/snap/__snapshots__/csr.test.js.snap | 10 ++--- test/unit/snap/__snapshots__/ssr.test.js.snap | 4 +- 9 files changed, 44 insertions(+), 58 deletions(-) delete mode 100644 src/timeline/time-line-item-props.ts diff --git a/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap b/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap index 369de4792e..c2dbead955 100644 --- 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" >
@@ -48,7 +48,7 @@ exports[`TimelineItem Component > props.label works fine 1`] = ` class="t-timeline-item__wrapper" >
@@ -75,7 +75,7 @@ exports[`TimelineItem Component > slots.content works fine 1`] = ` class="t-timeline-item__wrapper" >
@@ -118,7 +118,7 @@ exports[`TimelineItem Component > slots.label works fine 1`] = ` class="t-timeline-item__wrapper" >
diff --git a/src/timeline/time-line-item-props.ts b/src/timeline/time-line-item-props.ts deleted file mode 100644 index 48e0e0413a..0000000000 --- a/src/timeline/time-line-item-props.ts +++ /dev/null @@ -1,38 +0,0 @@ -/* eslint-disable */ - -/** - * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * */ - -import { TdTimelineItemProps } from './type'; -import { PropType } from 'vue'; - -export default { - /** 描述内容 */ - content: { - type: [String, Function] as PropType, - }, - /** 用于自定义时间轴节点元素 */ - dot: { - type: Function as PropType, - }, - /** 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值. */ - dotColor: { - type: String as PropType, - default: 'default' as TdTimelineItemProps['dotColor'], - }, - /** 标签文本内容，可完全自定义 */ - label: { - type: [String, Function] as PropType, - }, - /** 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `TimeLine.labelAlign` */ - labelAlign: { - type: String as PropType, - validator(val: TdTimelineItemProps['labelAlign']): boolean { - if (!val) return true; - return ['left', 'right', 'top', 'bottom'].includes(val); - }, - }, - /** 是否处在加载状态 */ - loading: Boolean, -}; diff --git a/src/timeline/timeline-item-props.ts b/src/timeline/timeline-item-props.ts index f4886fe2b2..0774b8842b 100644 --- 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, default: 'primary', }, /** 标签文本内容，可完全自定义 */ @@ -35,4 +35,6 @@ export default { }, /** 是否处在加载状态 */ loading: Boolean, + /** 点击时触发 */ + onClick: Function as PropType, }; diff --git a/src/timeline/timeline-item.tsx b/src/timeline/timeline-item.tsx index 37708d0f12..21d909d373 100644 --- 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 ( -
  • +
  • {mode === 'alternate' && labelNode && (
    {labelNode}
    )} diff --git a/src/timeline/timeline.en-US.md b/src/timeline/timeline.en-US.md index 64358e4672..1fe133dcc6 100644 --- 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`
    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 index 22136db0ef..df8d11ba2a 100644 --- 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`
    点击时触发 | N + +### TimelineItem Events + +名称 | 参数 | 描述 +-- | -- | -- +click | `(context: { e: MouseEvent; item: TdTimelineItemProps })` | 点击时触发 diff --git a/src/timeline/type.ts b/src/timeline/type.ts index 3cb0915cac..8eba1f568d 100644 --- 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 index 39e1efb4b7..4e7ecac168 100644 --- 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" >
    @@ -170857,7 +170857,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/customContent.vue class="t-timeline-item__wrapper" >
    @@ -170894,7 +170894,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/customContent.vue class="t-timeline-item__wrapper" >
    @@ -170931,7 +170931,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/customContent.vue class="t-timeline-item__wrapper" >
    @@ -172198,7 +172198,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/theme.vue 1`] = ` class="t-timeline-item__wrapper" >
    diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap index 7e5cf5a0e7..f6336d71d7 100644 --- a/test/unit/snap/__snapshots__/ssr.test.js.snap +++ b/test/unit/snap/__snapshots__/ssr.test.js.snap @@ -1248,7 +1248,7 @@ exports[`ssr snapshot test > ssr test ./src/time-picker/_example/twelve-hour-mer exports[`ssr snapshot test > ssr test ./src/timeline/_example/base.vue 1`] = `"

    时间轴方向

    • 事件一
      2022-01-01
    • 事件二
      2022-02-01
    • 事件三
      2022-03-01
    • 事件四
      2022-04-01
    "`; -exports[`ssr snapshot test > ssr test ./src/timeline/_example/customContent.vue 1`] = `"
    • 事件一
      事件一自定义内容
      2022-01-01
    • 事件二
      事件二自定义内容
      2022-02-01
    • 事件三
      事件三自定义内容
      2022-03-01
    • 事件四
      事件四自定义内容
      2022-04-01
    "`; +exports[`ssr snapshot test > ssr test ./src/timeline/_example/customContent.vue 1`] = `"
    • 事件一
      事件一自定义内容
      2022-01-01
    • 事件二
      事件二自定义内容
      2022-02-01
    • 事件三
      事件三自定义内容
      2022-03-01
    • 事件四
      事件四自定义内容
      2022-04-01
    "`; exports[`ssr snapshot test > ssr test ./src/timeline/_example/customDot.vue 1`] = `"

    时间轴样式

    • 事件一
      2022-01-01
    • 事件二
      2022-02-01
    • 事件三
      2022-03-01
    • 事件四
      2022-04-01
    "`; @@ -1258,7 +1258,7 @@ exports[`ssr snapshot test > ssr test ./src/timeline/_example/loading.vue 1`] = exports[`ssr snapshot test > ssr test ./src/timeline/_example/reverse.vue 1`] = `"

    是否倒序

    • 事件一
      2022-01-01
    • 事件二
      2022-02-01
    • 事件三
      2022-03-01
    • 事件四
      2022-04-01
    "`; -exports[`ssr snapshot test > ssr test ./src/timeline/_example/theme.vue 1`] = `"
    • 已完成的时间
      2022-01-01
    • 成功的时间
      2022-02-01
    • 危险时间
      2022-03-01
    • 告警事件
      2022-04-01
    • 默认的时间
      2022-04-01
    • 自定义主题色
      2022-04-01
    "`; +exports[`ssr snapshot test > ssr test ./src/timeline/_example/theme.vue 1`] = `"
    • 已完成的时间
      2022-01-01
    • 成功的时间
      2022-02-01
    • 危险时间
      2022-03-01
    • 告警事件
      2022-04-01
    • 默认的时间
      2022-04-01
    • 自定义主题色
      2022-04-01
    "`; exports[`ssr snapshot test > ssr test ./src/tooltip/_example/arrow.vue 1`] = `""`;