Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Revert "refactor(message): sfc to tsx" #1419

Merged
merged 1 commit into from
May 27, 2024
Merged

Revert "refactor(message): sfc to tsx" #1419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/message/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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>
Loading