feat: toast 增加淡出动画，修改错误的 demo

AntmJS · Oct 9, 2024 · 6461c7e · 6461c7e
1 parent 83a6ecb
commit 6461c7e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/packages/vantui/src/toast/demo/demo2.tsx b/packages/vantui/src/toast/demo/demo2.tsx
@@ -5,14 +5,8 @@ const Toast_ = Toast.createOnlyToast()
 
 export default function Demo() {
   const show = () => {
-    Toast_.success({
-      message: '成功文案',
-    })
-  }
-
-  const showLong = () => {
-    Toast_.fail({
-      message: '失败文案',
+    Toast_.loading({
+      message: '加载中...',
     })
   }
 
@@ -21,9 +15,6 @@ export default function Demo() {
       <Button type="primary" onClick={show}>
         加载提示
       </Button>
-      <Button type="primary" onClick={showLong}>
-        自定义加载图标
-      </Button>
       <Toast_ />
     </View>
   )

diff --git a/packages/vantui/src/toast/demo/demo3.tsx b/packages/vantui/src/toast/demo/demo3.tsx
@@ -11,7 +11,7 @@ export default function Demo() {
   }
 
   const showLong = () => {
-    Toast.loading({
+    Toast.fail({
       message: '失败文案',
       selector: '#vanToast-demo2',
       mask: true,

diff --git a/packages/vantui/src/toast/toast.tsx b/packages/vantui/src/toast/toast.tsx
@@ -1,5 +1,5 @@
 import { View, Text, RichText } from '@tarojs/components'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { ToastProps } from '../../types/toast'
 import VanTransition from '../transition/index'
 import VanOverlay from '../overlay/index'
@@ -24,20 +24,35 @@ export function Toast(props: ToastProps) {
     id: '',
     ...props,
   })
+  const [visible, setVisible] = useState(state.show)
+
+  useEffect(() => {
+    let timer: any = null
+
+    if (state.duration !== 0) {
+      timer = setTimeout(() => {
+        setVisible(false)
+      }, state.duration)
+    }
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [state.duration])
 
   const noop = function () {}
 
   return (
     <View>
       {(state.mask || state.forbidClick) && (
         <VanOverlay
-          show={state.show}
+          show={visible}
           zIndex={state.zIndex}
           style={state.mask ? '' : 'background-color: transparent;'}
         ></VanOverlay>
       )}
       <VanTransition
-        show={state.show}
+        show={visible}
         style={state.zIndex ? { zIndex: state.zIndex } : {}}
         className="van-toast__container"
       >