refactor(base-menu-mask): ts

src/_base/menu-mask/index.js

@@ -1 +0,0 @@
-export { default } from './src/MenuMask.vue'

src/_base/menu-mask/index.ts

@@ -0,0 +1 @@
+export { default } from './src/MenuMask'

src/_base/menu-mask/src/MenuMask.tsx

@@ -0,0 +1,43 @@
+import { h, ref, onBeforeUnmount, defineComponent, Transition } from 'vue'
+import { useStyle } from '../../../_mixins'
+import style from './styles/index.cssr'
+
+export default defineComponent({
+  name: 'BaseMenuMask',
+  setup () {
+    useStyle('BaseMenuMask', style)
+    const messageRef = ref<string | null>(null)
+    let timerId: number | null = null
+    const uncontrolledShowRef = ref(false)
+    onBeforeUnmount(() => {
+      if (timerId !== null) {
+        window.clearTimeout(timerId)
+      }
+    })
+    return {
+      message: messageRef,
+      show: uncontrolledShowRef,
+      showOnce (message: string, duration = 1500) {
+        if (timerId) window.clearTimeout(timerId)
+        uncontrolledShowRef.value = true
+        messageRef.value = message
+        timerId = window.setTimeout(() => {
+          uncontrolledShowRef.value = false
+          messageRef.value = null
+        }, duration)
+      }
+    }
+  },
+  render () {
+    return (
+      <Transition name="n-fade-in-transition">
+        {{
+          default: () =>
+            this.show ? (
+              <div class="n-base-menu-mask">{this.message}</div>
+            ) : null
+        }}
+      </Transition>
+    )
+  }
+})

src/_base/menu-mask/src/MenuMask.vue

@@ -1,45 +0,0 @@
-<template>
-  <transition name="n-fade-in-transition">
-    <div v-if="show" class="n-base-menu-mask">
-      <slot />
-      {{ message }}
-    </div>
-  </transition>
-</template>
-
-<script>
-import { ref, onBeforeUnmount } from 'vue'
-import { useStyle } from '../../../_mixins'
-import style from './styles/index.cssr.js'
-
-export default {
-  name: 'BaseMenuMask',
-  setup () {
-    useStyle('BaseMenuMask', style)
-    const messageRef = ref(null)
-    const timerIdRef = ref(null)
-    const uncontrolledShowRef = ref(false)
-    onBeforeUnmount(() => {
-      const { value: timerId } = timerIdRef
-      if (timerId !== null) {
-        window.clearTimeout(timerId)
-      }
-    })
-    return {
-      message: messageRef,
-      timerId: timerIdRef,
-      show: uncontrolledShowRef,
-      showOnce (message, duration = 1500) {
-        const { value: timerId } = timerIdRef
-        if (timerId) window.clearTimeout(timerId)
-        uncontrolledShowRef.value = true
-        messageRef.value = message
-        timerIdRef.value = window.setTimeout(() => {
-          uncontrolledShowRef.value = false
-          messageRef.value = null
-        }, duration)
-      }
-    }
-  }
-}
-</script>