From e760395c389414d166cdc671e330ff4db5632f9a Mon Sep 17 00:00:00 2001
From: Y <anllyyao@gmail.com>
Date: Mon, 27 May 2024 17:25:01 +0800
Subject: [PATCH] Revert "refactor(message): sfc to tsx (#1398)"

This reverts commit edba1a28ebe2e23b34498ac40db9fb99bffdadd7.
---
 .../__test__/__snapshots__/demo.test.jsx.snap |  20 ++--
 src/message/__test__/index.test.jsx           |  60 ++++++-----
 src/message/index.ts                          |   2 +-
 src/message/{message.tsx => message.vue}      | 101 ++++++++----------
 4 files changed, 90 insertions(+), 93 deletions(-)
 rename src/message/{message.tsx => message.vue} (80%)

diff --git a/src/message/__test__/__snapshots__/demo.test.jsx.snap b/src/message/__test__/__snapshots__/demo.test.jsx.snap
index 8f4bac59f..259c96aa1 100644
--- a/src/message/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/message/__test__/__snapshots__/demo.test.jsx.snap
@@ -96,15 +96,15 @@ exports[`Message > Message baseVue demo works fine 1`] = `
     </button>
   </div>
   <!-- 纯文字通知 -->
-  
+  <!--v-if-->
   <!-- 带图标通知 -->
-  
+  <!--v-if-->
   <!-- 带关闭通知 -->
-  
+  <!--v-if-->
   <!-- 滚动通知 -->
-  
+  <!--v-if-->
   <!-- 带按钮通知 -->
-  
+  <!--v-if-->
   
 </div>
 `;
@@ -276,15 +276,15 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
         </button>
       </div>
       <!-- 纯文字通知 -->
-      
+      <!--v-if-->
       <!-- 带图标通知 -->
-      
+      <!--v-if-->
       <!-- 带关闭通知 -->
-      
+      <!--v-if-->
       <!-- 滚动通知 -->
-      
+      <!--v-if-->
       <!-- 带按钮通知 -->
-      
+      <!--v-if-->
       
       
     </div>
diff --git a/src/message/__test__/index.test.jsx b/src/message/__test__/index.test.jsx
index a98e205eb..a3ea399da 100644
--- a/src/message/__test__/index.test.jsx
+++ b/src/message/__test__/index.test.jsx
@@ -2,7 +2,7 @@ import { h } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import { nextTick } from 'vue';
-import Message from '../message';
+import Message from '../message.vue';
 import { AppIcon, AppIcon as TIconApp } from 'tdesign-icons-vue-next';
 const prefix = 't';
 const name = `${prefix}-message`;
@@ -11,10 +11,10 @@ describe('Message.vue', () => {
   describe('props', () => {
     it(': align', () => {
       ['left', 'center'].map((align) => {
-        const wrapper = mount(<Message visible align={align} />);
+        const wrapper =  mount(<Message visible align={align} />);
         expect(wrapper.find(`.${name}`).classes().includes(`${name}-align--${align}`)).toBeTruthy();
       });
-    });
+    })
 
     it(': offset', () => {
       const offset = [-10, 20];
@@ -26,24 +26,28 @@ describe('Message.vue', () => {
     });
 
     it(': marquee', async () => {
-      // const wrapper = mount(<Message visible />);
-      // expect(wrapper.vm.scroll.marquee).toBe(false);
-      // const wrapper1 = mount(<Message visible marquee />);
-      // expect(wrapper1.vm.scroll.marquee).toBe(false);
-      // const wrapper2 = mount(<Message visible marquee={true} />);
-      // await nextTick();
-      // expect(wrapper2.vm.scroll.marquee).toBe(true);
-      // const wrapper3 = mount(<Message visible marquee={{ loop: 1 }} />);
-      // await nextTick();
-      // expect(wrapper3.vm.scroll.marquee).toBe(true);
-      // wrapper3.vm.handleTransitionend();
-      // expect(wrapper3.vm.scroll.loop).toBe(0);
-      // wrapper3.vm.handleTransitionend();
-      // expect(wrapper3.vm.scroll.marquee).toBe(false);
-      // const wrapper4 = mount(<Message visible marquee={{ loop: -1 }} />);
-      // await nextTick();
-      // expect(wrapper4.vm.scroll.marquee).toBe(true);
-      // wrapper4.vm.handleTransitionend();
+      const wrapper = mount(<Message visible />);
+      expect(wrapper.vm.scroll.marquee).toBe(false);
+
+      const wrapper1 = mount(<Message visible marquee />);
+      expect(wrapper1.vm.scroll.marquee).toBe(false);
+
+      const wrapper2 = mount(<Message visible marquee={true} />);
+      await nextTick();
+      expect(wrapper2.vm.scroll.marquee).toBe(true);
+
+      const wrapper3 = mount(<Message visible marquee={{ loop: 1 }} />);
+      await nextTick();
+      expect(wrapper3.vm.scroll.marquee).toBe(true);
+      wrapper3.vm.handleTransitionend();
+      expect(wrapper3.vm.scroll.loop).toBe(0);
+      wrapper3.vm.handleTransitionend();
+      expect(wrapper3.vm.scroll.marquee).toBe(false);
+
+      const wrapper4 = mount(<Message visible marquee={{ loop: -1 }} />);
+      await nextTick();
+      expect(wrapper4.vm.scroll.marquee).toBe(true);
+      wrapper4.vm.handleTransitionend();
     });
 
     it(': duration', () => {
@@ -89,18 +93,19 @@ describe('Message.vue', () => {
       expect(wrapper3.find(`.${name}__icon--left`).findComponent(TIconApp).exists()).toBeTruthy();
     });
 
+
     it('link', () => {
-      const wrapper0 = mount(() => <Message visible={true} content="这是一条消息通知" />);
+      const wrapper0 = mount(() => <Message visible={true} content="这是一条消息通知"/>);
       expect(wrapper0.find(`.${name}__link`).exists()).toBeFalsy();
 
       // lin is string
       const wrapper1 = mount(() => <Message visible={true} content="这是一条消息通知" link={'link'} />);
       expect(wrapper1.find(`.${name}__link`).exists()).toBeTruthy();
-      expect(wrapper1.find(`.${name}__link`).text()).toEqual('link');
+      expect(wrapper1.find(`.${name}__link`).text()).toEqual('link')
       // link is Object
-      const wrapper2 = mount(() => <Message visible={true} content="这是一条消息通知" link={{ content: 'content' }} />);
+      const wrapper2 = mount(() => <Message visible={true} content="这是一条消息通知" link={{content: 'content'}} />);
       expect(wrapper2.find(`.${name}__link`).exists()).toBeTruthy();
-      expect(wrapper2.find(`.${name}__link`).text()).toEqual('content');
+      expect(wrapper2.find(`.${name}__link`).text()).toEqual('content')
 
       // link is function
       const appIcon = () => h(TIconApp);
@@ -116,6 +121,7 @@ describe('Message.vue', () => {
       expect(wrapper4.find(`.${name}__link`).exists()).toBeTruthy();
       expect(wrapper4.find(`.${name}__link`).findComponent(TIconApp).exists()).toBeTruthy();
     });
+
   });
 
   describe('event', () => {
@@ -131,7 +137,9 @@ describe('Message.vue', () => {
 
     it('onLinkClick', () => {
       const fn = vi.fn();
-      const wrapper = mount(() => <Message visible={true} content="这是一条消息通知" link={'链接'} onLinkClick={fn} />);
+      const wrapper = mount(() => (
+        <Message visible={true} content="这是一条消息通知" link={'链接'} onLinkClick={fn} />
+      ));
       const _link = wrapper.find(`.${name}__link`);
       _link.trigger('click');
       expect(fn).toBeCalledTimes(1);
diff --git a/src/message/index.ts b/src/message/index.ts
index a67a6f5e9..05164db18 100644
--- a/src/message/index.ts
+++ b/src/message/index.ts
@@ -1,5 +1,5 @@
 import { createApp, defineComponent, ref, h, VNode, App, nextTick } from 'vue';
-import Message from './message';
+import Message from './message.vue';
 import { WithInstallType, isBrowser } from '../shared';
 import { TdMessageProps, MessageThemeList } from './type';
 
diff --git a/src/message/message.tsx b/src/message/message.vue
similarity index 80%
rename from src/message/message.tsx
rename to src/message/message.vue
index e69bea1a4..354b027f2 100644
--- a/src/message/message.tsx
+++ b/src/message/message.vue
@@ -1,3 +1,30 @@
+<template>
+  <transition name="message">
+    <div v-if="currentVisible" ref="root" :class="rootClasses" :style="rootStyles">
+      <div v-if="prefixIconContent" :class="`${name}__icon--left`">
+        <t-node :content="prefixIconContent" />
+      </div>
+      <div ref="textWrapDOM" :class="textWrapClasses">
+        <div
+          ref="textDOM"
+          :class="`${name}__text`"
+          :style="scroll.marquee ? animateStyle : ''"
+          @transitionend="handleTransitionend"
+        >
+          <t-node v-if="computedContent" :content="computedContent"></t-node>
+        </div>
+      </div>
+      <div v-if="linkContent" :class="`${name}__link`" @click="onLinkClick">
+        <t-node :content="linkContent"></t-node>
+      </div>
+      <div v-if="closeBtnContent" :class="[`${name}__close-wrap`, `${name}__icon--right`]" @click="onCloseBtnClick">
+        <t-node :content="closeBtnContent"></t-node>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
 import {
   h,
   ref,
@@ -9,7 +36,6 @@ import {
   reactive,
   nextTick,
   onMounted,
-  Transition,
 } from 'vue';
 import { CheckCircleFilledIcon, CloseIcon, InfoCircleFilledIcon } from 'tdesign-icons-vue-next';
 import isObject from 'lodash/isObject';
@@ -23,16 +49,13 @@ import { renderContent, renderTNode, TNode, useVModel } from '../shared';
 
 const { prefix } = config;
 const name = `${prefix}-message`;
-
 const iconDefault = {
   info: h(InfoCircleFilledIcon),
   success: h(CheckCircleFilledIcon),
   warning: h(InfoCircleFilledIcon),
   error: h(InfoCircleFilledIcon),
 };
-
 const closeBtnDefault = h(CloseIcon);
-
 export default defineComponent({
   name,
   components: { TNode },
@@ -228,58 +251,24 @@ export default defineComponent({
       },
     );
 
-    return () => {
-      const renderPrefixIconContent = computed(() =>
-        prefixIconContent.value ? <div class={`${name}__icon--left`}>{prefixIconContent.value}</div> : '',
-      );
-
-      const renderTextWrapDOM = computed(() => (
-        <div ref={textWrapDOM} class={textWrapClasses.value}>
-          <div
-            ref={textDOM}
-            class={`${name}__text`}
-            style={state.scroll.marquee ? animateStyle.value : ''}
-            onTransitionend={handleTransitionend}
-          >
-            {computedContent.value ?? ''}
-          </div>
-        </div>
-      ));
-
-      const renderLinkContent = computed(() =>
-        linkContent.value ? (
-          <div class={`${name}__link`} onClick={onLinkClick}>
-            {linkContent.value}
-          </div>
-        ) : (
-          ''
-        ),
-      );
-
-      const renderCloseBtnContent = computed(() =>
-        closeBtnContent.value ? (
-          <div class={[`${name}__close-wrap`, `${name}__icon--right`]} onClick={onCloseBtnClick}>
-            {closeBtnContent.value}
-          </div>
-        ) : (
-          ''
-        ),
-      );
-
-      const renderMessageContent = computed(() =>
-        currentVisible.value ? (
-          <div ref="root" class={rootClasses.value} style={rootStyles.value}>
-            {renderPrefixIconContent.value}
-            {renderTextWrapDOM.value}
-            {renderLinkContent.value}
-            {renderCloseBtnContent.value}
-          </div>
-        ) : (
-          ''
-        ),
-      );
-
-      return <Transition name="message">{renderMessageContent.value}</Transition>;
+    return {
+      name: ref(name),
+      ...toRefs(state),
+      currentVisible,
+      rootClasses,
+      textWrapClasses,
+      rootStyles,
+      prefixIconContent,
+      computedContent,
+      closeBtnContent,
+      linkContent,
+      textWrapDOM,
+      textDOM,
+      animateStyle,
+      onCloseBtnClick,
+      onLinkClick,
+      handleTransitionend,
     };
   },
 });
+</script>