refactor(maz-ui): toaster - close toast when timeout is ended

LouisMazel · Jun 18, 2024 · 3295c74 · 3295c74
1 parent da6e6fa
commit 3295c74
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/packages/docs/docs/composables/use-timer.md b/packages/docs/docs/composables/use-timer.md
@@ -120,5 +120,10 @@ export interface TimerOptions {
    * @default 200
    */
   remainingTimeUpdate?: number
+  /**
+   * The offset time to execute the callback
+   * @default 0
+   */
+  callbackOffsetTime?: number
 }
 ```
diff --git a/packages/lib/modules/composables/use-timer.ts b/packages/lib/modules/composables/use-timer.ts
@@ -16,9 +16,14 @@ export interface TimerOptions {
    * @default 200
    */
   remainingTimeUpdate?: number
+  /**
+   * The offset time to execute the callback
+   * @default 0
+   */
+  callbackOffsetTime?: number
 }
 
-export function useTimer({ timeout = 1000, callback, remainingTimeUpdate = 200 }: TimerOptions) {
+export function useTimer({ timeout = 1000, callback, remainingTimeUpdate = 200, callbackOffsetTime = 0 }: TimerOptions) {
   const internalTimeout = ref<number>(timeout)
   const remainingTime = ref<number>(timeout)
 
@@ -42,7 +47,7 @@ export function useTimer({ timeout = 1000, callback, remainingTimeUpdate = 200 }
         remainingTime.value -= remainingTimeUpdate
         if (remainingTime.value <= 0) {
           stop()
-          callback?.()
+          setTimeout(() => callback?.(), callbackOffsetTime)
         }
       }, remainingTimeUpdate)
     }
@@ -62,7 +67,7 @@ export function useTimer({ timeout = 1000, callback, remainingTimeUpdate = 200 }
   }
 
   function stop() {
-    remainingTime.value = internalTimeout.value
+    setTimeout(() => remainingTime.value = internalTimeout.value, callbackOffsetTime * 2)
     pause()
   }
 

diff --git a/packages/lib/modules/plugins/toaster/MazToast.vue b/packages/lib/modules/plugins/toaster/MazToast.vue
@@ -97,9 +97,10 @@ const queueTimer = ref<ReturnType<typeof setTimeout>>()
 const containerClassName = `m-toast-container --${positionY.value} --${positionX.value}`
 const selectorContainerClass = `.${containerClassName.replaceAll(' ', '.')}`
 
-const { start, stop, pause, resume, remainingTime } = useTimer({
-  callback: close,
+const timer = useTimer({
+  callback: closeToast,
   timeout: typeof props.timeout === 'number' ? props.timeout : 0,
+  callbackOffsetTime: 200,
 })
 
 function createParents() {
@@ -145,7 +146,7 @@ function showNotice() {
   isActive.value = true
 
   if (typeof props.timeout === 'number' && props.timeout > 0) {
-    start()
+    timer.start()
   }
 }
 
@@ -172,15 +173,11 @@ function getProgressBarColor() {
 }
 
 watch(
-  () => remainingTime.value,
+  timer.remainingTime,
   (remainingTime) => {
     if (typeof props.timeout === 'number') {
       const percent = (100 * remainingTime) / props.timeout
       progressBarWidth.value = `${percent}%`
-
-      if (remainingTime <= 0) {
-        close()
-      }
     }
   },
 )
@@ -189,7 +186,7 @@ function click(event: Event) {
   emits('click', event)
 
   if (!props.persistent) {
-    close()
+    closeToast()
   }
 }
 
@@ -204,7 +201,7 @@ async function clickOnAction(func: ToasterAction['func'], event: Event) {
 
 function toggleTimer(shouldPause: boolean) {
   if (!props.noPauseOnHover) {
-    shouldPause ? pause() : resume()
+    shouldPause ? timer.pause() : timer.resume()
   }
 }
 
@@ -215,12 +212,12 @@ function stopTimer() {
   }
 }
 
-function close() {
+function closeToast() {
   stopTimer()
   isActive.value = false
 }
 
-defineExpose({ close })
+defineExpose({ closeToast })
 
 function onAnimationEnter() {
   emits('open')

diff --git a/packages/lib/modules/plugins/toaster/toaster-handler.ts b/packages/lib/modules/plugins/toaster/toaster-handler.ts
@@ -35,7 +35,7 @@ export class ToasterHandler {
 
     return {
       destroy,
-      close: () => vNode.component?.exposed?.close(),
+      close: () => vNode.component?.exposed?.closeToast(),
     }
   }