refactor(toast): sfc to tsx (#1397)

* refactor(toast): sfc to tsx * perf(toast): sfc to tsx * test(config-provider): snap update * perf(toast): sfc to tsx
Tencent · Jun 5, 2024 · 5689942 · 5689942
1 parent 2888dda
commit 5689942
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 58 deletions.
diff --git a/src/toast/__test__/index.test.jsx b/src/toast/__test__/index.test.jsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import Toast from '../toast.vue';
+import Toast from '../toast';
 import Overlay from '../../overlay';
 import { mount } from '@vue/test-utils';
 import { LoadingIcon } from 'tdesign-icons-vue-next';

diff --git a/src/toast/index.ts b/src/toast/index.ts
@@ -1,5 +1,5 @@
 import { createApp, App, DefineComponent } from 'vue';
-import vueToast from './toast.vue';
+import vueToast from './toast';
 import { TdToastProps } from './type';
 import { WithInstallType, isBrowser } from '../shared';
 

diff --git a/src/toast/toast.vue → src/toast/toast.tsx b/src/toast/toast.vue → src/toast/toast.tsx
@@ -1,21 +1,6 @@
-<template>
-  <div>
-    <t-overlay v-bind="customOverlayProps" />
-    <div :class="classes" :style="{ top: placement === 'top' ? '25%' : placement === 'bottom' ? '75%' : '45%' }">
-      <div v-if="iconContent" :class="iconClasses">
-        <t-node :content="iconContent"></t-node>
-      </div>
-      <div v-if="messageContent" :class="textClasses">
-        <t-node :content="messageContent"></t-node>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
 import { LoadingIcon, CheckCircleIcon, CloseCircleIcon } from 'tdesign-icons-vue-next';
-import { computed, toRefs, ref, defineComponent, getCurrentInstance, h, onUnmounted } from 'vue';
-import { renderTNode, TNode } from '../shared';
+import { computed, defineComponent, h, onUnmounted } from 'vue';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
 import TOverlay from '../overlay';
 import ToastProps from './props';
 import config from '../config';
@@ -26,25 +11,28 @@ const bodyLockClass = `${name}-overflow-hidden`;
 
 export default defineComponent({
   name,
-  components: { TOverlay, TNode },
   props: ToastProps,
   setup(props) {
     const toastTypeIcon = {
       loading: LoadingIcon,
       success: CheckCircleIcon,
       error: CloseCircleIcon,
     };
-    // 获取当前实例-单例
-    const internalInstance = getCurrentInstance();
-    // 内容渲染
-    const messageContent = computed(() => renderTNode(internalInstance, 'message'));
-    // 图标渲染
-    const iconContent = computed(() => {
-      let iconNode = renderTNode(internalInstance, 'icon');
-      if (iconNode === undefined && props.theme) {
-        iconNode = h(toastTypeIcon[props.theme]);
-      }
-      return iconNode;
+
+    const renderTNodeJSX = useTNodeJSX();
+
+    const renderContent = useContent();
+
+    const customOverlayProps = computed(() => {
+      const toastOverlayProps = {
+        preventScrollThrough: props.preventScrollThrough,
+        visible: props.showOverlay,
+      };
+      props.preventScrollThrough ? lock() : unlock();
+      return {
+        ...props.overlayProps,
+        ...toastOverlayProps,
+      };
     });
 
     const classes = computed(() => [
@@ -58,19 +46,50 @@ export default defineComponent({
       },
     ]);
 
-    const textClasses = computed(() => [
+    const topOptions = {
+      top: '25%',
+      bottom: '75%',
+    };
+
+    const computedStyle = computed(() => ({ top: topOptions[props.placement] ?? '45%' }));
+
+    const iconClasses = computed(() => [
       {
-        [`${name}__text`]: !iconContent.value,
-        [`${name}__text--${props.direction}`]: props.direction,
+        [`${name}__icon--${props.direction}`]: props.direction,
       },
     ]);
 
-    const iconClasses = computed(() => [
+    const iconContent = computed(() => {
+      let iconNode = renderTNodeJSX('icon');
+      if (iconNode === undefined && props.theme) {
+        iconNode = h(toastTypeIcon[props.theme]);
+      }
+      return iconNode;
+    });
+
+    const renderIconContent = computed(() => {
+      if (iconContent.value) {
+        return <div class={iconClasses.value}>{iconContent.value}</div>;
+      }
+      return '';
+    });
+
+    const textClasses = computed(() => [
       {
-        [`${name}__icon--${props.direction}`]: props.direction,
+        [`${name}__text`]: !iconContent.value,
+        [`${name}__text--${props.direction}`]: props.direction,
       },
     ]);
 
+    const messageContent = computed(() => renderContent('default', 'message'));
+
+    const renderMessageContent = computed(() => {
+      if (messageContent.value) {
+        return <div class={textClasses.value}>{messageContent.value}</div>;
+      }
+      return '';
+    });
+
     const lock = () => {
       document.body.classList.add(bodyLockClass);
     };
@@ -79,32 +98,21 @@ export default defineComponent({
       document.body.classList.remove(bodyLockClass);
     };
 
-    const customOverlayProps = computed(() => {
-      const toastOverlayProps = {
-        preventScrollThrough: props.preventScrollThrough,
-        visible: props.showOverlay,
-      };
-      props.preventScrollThrough ? lock() : unlock();
-      return {
-        ...props.overlayProps,
-        ...toastOverlayProps,
-      };
-    });
-
     onUnmounted(() => {
       unlock();
     });
 
-    return {
-      name: ref(name),
-      classes,
-      textClasses,
-      iconClasses,
-      iconContent,
-      messageContent,
-      customOverlayProps,
-      ...toRefs(props),
+    return () => {
+      return (
+        <div>
+          <TOverlay {...customOverlayProps.value} />
+
+          <div class={classes.value} style={computedStyle.value}>
+            {renderIconContent.value}
+            {renderMessageContent.value}
+          </div>
+        </div>
+      );
     };
   },
 });
-</script>