From 3ccabbf54ce05736ee422b81229203b8cd73b036 Mon Sep 17 00:00:00 2001
From: lmhcoding <13265878974@163.com>
Date: Thu, 1 Oct 2020 00:58:21 +0800
Subject: [PATCH] feat(useResize): support debounce

---
 src/useResize.ts | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/useResize.ts b/src/useResize.ts
index 79e823b..5e5cc1f 100644
--- a/src/useResize.ts
+++ b/src/useResize.ts
@@ -1,9 +1,30 @@
+import { DeepReadonly, readonly, Ref, ref } from 'vue'
 import { useEvent } from './useEvent'
+import { useDebounceFn } from './useDebounceFn'
 
 export interface ResizeHandler {
   (this: Window, e: WindowEventMap['resize']): any
 }
 
-export function useResize(handler: ResizeHandler): void {
-  useEvent('resize', handler)
+export interface IResizeState {
+  width: DeepReadonly<Ref<number>>
+  height: DeepReadonly<Ref<number>>
+}
+
+export function useResize(handler: ResizeHandler | null = null, delay = 200): IResizeState {
+  const width = ref(window.innerWidth)
+  const height = ref(window.innerHeight)
+  let cb: ResizeHandler = function (this: Window, e: WindowEventMap['resize']) {
+    handler && handler.call(this, e)
+    width.value = window.innerWidth
+    height.value = window.innerHeight
+  }
+  if (delay) {
+    cb = useDebounceFn(cb, delay)
+  }
+  useEvent('resize', cb)
+  return {
+    width: readonly(width),
+    height: readonly(height)
+  }
 }