From 214e6fcd2ceb0e37fd732dbf5b6f25e2d6d45e8b Mon Sep 17 00:00:00 2001
From: Waleed Khaled <waleed1kh@outlook.com>
Date: Thu, 22 Sep 2022 12:12:57 +0400
Subject: [PATCH] useInterval, useTimeout, useTimestamp callback

---
 packages/core/useTimestamp/index.ts  | 15 +++++++++++++--
 packages/shared/useInterval/index.ts | 13 ++++++++++++-
 packages/shared/useTimeout/index.ts  |  9 +++++++--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/core/useTimestamp/index.ts b/packages/core/useTimestamp/index.ts
index 00fbbd2d365..deb8f2f695c 100644
--- a/packages/core/useTimestamp/index.ts
+++ b/packages/core/useTimestamp/index.ts
@@ -32,6 +32,10 @@ export interface UseTimestampOptions<Controls extends boolean> {
    * @default requestAnimationFrame
    */
   interval?: 'requestAnimationFrame' | number
+  /**
+   * Callback on each update
+   */
+  callback?: (timestamp: number) => void
 }
 
 /**
@@ -48,15 +52,22 @@ export function useTimestamp(options: UseTimestampOptions<boolean> = {}) {
     offset = 0,
     immediate = true,
     interval = 'requestAnimationFrame',
+    callback,
   } = options
 
   const ts = ref(timestamp() + offset)
 
   const update = () => ts.value = timestamp() + offset
+  const cb = callback
+    ? () => {
+        update()
+        callback(ts.value)
+      }
+    : update
 
   const controls: Pausable = interval === 'requestAnimationFrame'
-    ? useRafFn(update, { immediate })
-    : useIntervalFn(update, interval, { immediate })
+    ? useRafFn(cb, { immediate })
+    : useIntervalFn(cb, interval, { immediate })
 
   if (exposeControls) {
     return {
diff --git a/packages/shared/useInterval/index.ts b/packages/shared/useInterval/index.ts
index 3dfced64030..5976e795bd0 100644
--- a/packages/shared/useInterval/index.ts
+++ b/packages/shared/useInterval/index.ts
@@ -17,6 +17,10 @@ export interface UseIntervalOptions<Controls extends boolean> {
    * @default true
    */
   immediate?: boolean
+  /**
+   * Callback on every interval
+   */
+  callback?: (count: number) => void
 }
 
 /**
@@ -32,10 +36,17 @@ export function useInterval(interval: MaybeComputedRef<number> = 1000, options:
   const {
     controls: exposeControls = false,
     immediate = true,
+    callback,
   } = options
 
   const counter = ref(0)
-  const controls = useIntervalFn(() => counter.value += 1, interval, { immediate })
+  const update = () => counter.value += 1
+  const controls = useIntervalFn(callback
+    ? () => {
+        update()
+        callback(counter.value)
+      }
+    : update, interval, { immediate })
 
   if (exposeControls) {
     return {
diff --git a/packages/shared/useTimeout/index.ts b/packages/shared/useTimeout/index.ts
index 11ebf6fb3d4..3a2a3839c7e 100644
--- a/packages/shared/useTimeout/index.ts
+++ b/packages/shared/useTimeout/index.ts
@@ -2,7 +2,7 @@ import type { ComputedRef } from 'vue-demi'
 import { computed } from 'vue-demi'
 import type { UseTimeoutFnOptions } from '../useTimeoutFn'
 import { useTimeoutFn } from '../useTimeoutFn'
-import type { Stoppable } from '../utils'
+import type { Fn, Stoppable } from '../utils'
 import { noop } from '../utils'
 
 export interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutFnOptions {
@@ -12,6 +12,10 @@ export interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutF
    * @default false
    */
   controls?: Controls
+  /**
+   * Callback on timeout
+   */
+  callback?: Fn
 }
 
 /**
@@ -26,10 +30,11 @@ export function useTimeout(interval: number, options: UseTimeoutOptions<true>):
 export function useTimeout(interval = 1000, options: UseTimeoutOptions<boolean> = {}) {
   const {
     controls: exposeControls = false,
+    callback,
   } = options
 
   const controls = useTimeoutFn(
-    noop,
+    callback ?? noop,
     interval,
     options,
   )