Skip to content

Commit

Permalink
Revert "refactor(message): sfc to tsx (#1398)" (#1419)
Browse files Browse the repository at this point in the history 
This reverts commit edba1a2.
  • Loading branch information
@anlyyao
anlyyao authored May 27, 2024
1 parent 585dbcb commit 16a8985
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 93 deletions.
20 changes: 10 additions & 10 deletions src/message/__test__/__snapshots__/demo.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
Expand Down Expand Up @@ -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>
Expand Down
60 changes: 34 additions & 26 deletions src/message/__test__/index.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand All @@ -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];
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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);
Expand All @@ -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', () => {
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/message/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
101 changes: 45 additions & 56 deletions src/message/message.tsx → src/message/message.vue
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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';
Expand All @@ -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 },
Expand Down Expand Up @@ -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>

0 comments on commit 16a8985

Please sign in to comment.