From fa18365c211ea9819f1ffcf18ad6435c527aab49 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Thu, 6 Apr 2023 22:49:16 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E7=A7=BB=E9=99=A4=20useTimeoutFn?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=EF=BC=8C=E4=BD=BF=E7=94=A8=20vueuse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/hooks/src/index.ts                   |  2 +
 .../Container/src/LazyContainer.vue           |  2 +-
 .../src/collapse/CollapseContainer.vue        |  2 +-
 src/components/Menu/src/useOpenKeys.ts        | 37 ++++++++-------
 .../Modal/src/hooks/useModalDrag.ts           |  2 +-
 src/components/SimpleMenu/src/useOpenKeys.ts  | 43 +++++++++---------
 .../Table/src/hooks/useDataSource.ts          |  2 +-
 src/components/Verify/src/DragVerify.vue      |  2 +-
 src/components/Verify/src/ImgRotate.vue       |  2 +-
 src/hooks/core/useTimeout.ts                  | 45 -------------------
 src/hooks/web/useECharts.ts                   |  2 +-
 11 files changed, 48 insertions(+), 93 deletions(-)
 delete mode 100644 src/hooks/core/useTimeout.ts

diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 2ffa9937..137143b0 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -1,3 +1,5 @@
 export * from './onMountedOrActivated';
 export * from './useAttrs';
 export * from './useRefs';
+
+export { useTimeoutFn } from '@vueuse/core';
diff --git a/src/components/Container/src/LazyContainer.vue b/src/components/Container/src/LazyContainer.vue
index a7ad2b69..7baa8675 100644
--- a/src/components/Container/src/LazyContainer.vue
+++ b/src/components/Container/src/LazyContainer.vue
@@ -19,8 +19,8 @@
 <script lang="ts">
   import type { PropType } from 'vue';
   import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
+  import { useTimeoutFn } from '@vben/hooks';
   import { Skeleton } from 'ant-design-vue';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
 
   interface State {
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index 7046bd4d..c9128b0d 100644
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -2,10 +2,10 @@
   import { ref, unref, defineComponent, type PropType, type ExtractPropTypes } from 'vue';
   import { isNil } from 'lodash-es';
   import { Skeleton } from 'ant-design-vue';
+  import { useTimeoutFn } from '@vben/hooks';
   import { CollapseTransition } from '/@/components/Transition';
   import CollapseHeader from './CollapseHeader.vue';
   import { triggerWindowResize } from '/@/utils/event';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useDesign } from '/@/hooks/web/useDesign';
 
   const collapseContainerProps = {
diff --git a/src/components/Menu/src/useOpenKeys.ts b/src/components/Menu/src/useOpenKeys.ts
index 598d281c..fc0b5a5a 100644
--- a/src/components/Menu/src/useOpenKeys.ts
+++ b/src/components/Menu/src/useOpenKeys.ts
@@ -1,13 +1,11 @@
 import { MenuModeEnum } from '/@/enums/menuEnum';
 import type { Menu as MenuType } from '/@/router/types';
 import type { MenuState } from './types';
-
 import { computed, Ref, toRaw, unref } from 'vue';
-
+import { useTimeoutFn } from '@vben/hooks';
 import { uniq } from 'lodash-es';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import { getAllParentPath } from '/@/router/helper/menuHelper';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
 export function useOpenKeys(
   menuState: MenuState,
@@ -22,22 +20,23 @@ export function useOpenKeys(
       return;
     }
     const native = unref(getIsMixSidebar);
-    useTimeoutFn(
-      () => {
-        const menuList = toRaw(menus.value);
-        if (menuList?.length === 0) {
-          menuState.openKeys = [];
-          return;
-        }
-        if (!unref(accordion)) {
-          menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)]);
-        } else {
-          menuState.openKeys = getAllParentPath(menuList, path);
-        }
-      },
-      16,
-      !native,
-    );
+    const handle = () => {
+      const menuList = toRaw(menus.value);
+      if (menuList?.length === 0) {
+        menuState.openKeys = [];
+        return;
+      }
+      if (!unref(accordion)) {
+        menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)]);
+      } else {
+        menuState.openKeys = getAllParentPath(menuList, path);
+      }
+    };
+    if (native) {
+      handle();
+    } else {
+      useTimeoutFn(handle, 16);
+    }
   }
 
   const getOpenKeys = computed(() => {
diff --git a/src/components/Modal/src/hooks/useModalDrag.ts b/src/components/Modal/src/hooks/useModalDrag.ts
index ff05b7b1..5ece37a6 100644
--- a/src/components/Modal/src/hooks/useModalDrag.ts
+++ b/src/components/Modal/src/hooks/useModalDrag.ts
@@ -1,5 +1,5 @@
 import { Ref, unref, watchEffect } from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vben/hooks';
 
 export interface UseModalDragMoveContext {
   draggable: Ref<boolean>;
diff --git a/src/components/SimpleMenu/src/useOpenKeys.ts b/src/components/SimpleMenu/src/useOpenKeys.ts
index b67eba7e..1028f974 100644
--- a/src/components/SimpleMenu/src/useOpenKeys.ts
+++ b/src/components/SimpleMenu/src/useOpenKeys.ts
@@ -1,12 +1,9 @@
 import type { Menu as MenuType } from '/@/router/types';
 import type { MenuState } from './types';
-
 import { computed, Ref, toRaw, unref } from 'vue';
-
 import { uniq } from 'lodash-es';
 import { getAllParentPath } from '/@/router/helper/menuHelper';
-
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vben/hooks';
 import { useDebounceFn } from '@vueuse/core';
 
 export function useOpenKeys(
@@ -20,25 +17,27 @@ export function useOpenKeys(
   async function setOpenKeys(path: string) {
     const native = !mixSider.value;
     const menuList = toRaw(menus.value);
-    useTimeoutFn(
-      () => {
-        if (menuList?.length === 0) {
-          menuState.activeSubMenuNames = [];
-          menuState.openNames = [];
-          return;
-        }
-        const keys = getAllParentPath(menuList, path);
 
-        if (!unref(accordion)) {
-          menuState.openNames = uniq([...menuState.openNames, ...keys]);
-        } else {
-          menuState.openNames = keys;
-        }
-        menuState.activeSubMenuNames = menuState.openNames;
-      },
-      30,
-      native,
-    );
+    const handle = () => {
+      if (menuList?.length === 0) {
+        menuState.activeSubMenuNames = [];
+        menuState.openNames = [];
+        return;
+      }
+      const keys = getAllParentPath(menuList, path);
+
+      if (!unref(accordion)) {
+        menuState.openNames = uniq([...menuState.openNames, ...keys]);
+      } else {
+        menuState.openNames = keys;
+      }
+      menuState.activeSubMenuNames = menuState.openNames;
+    };
+    if (native) {
+      handle();
+    } else {
+      useTimeoutFn(handle, 30);
+    }
   }
 
   const getOpenKeys = computed(() => {
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index 898bdc4c..f1616c66 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -11,7 +11,7 @@ import {
   Ref,
   watchEffect,
 } from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vben/hooks';
 import { buildUUID } from '/@/utils/uuid';
 import { isFunction, isBoolean, isObject } from '/@/utils/is';
 import { get, cloneDeep, merge } from 'lodash-es';
diff --git a/src/components/Verify/src/DragVerify.vue b/src/components/Verify/src/DragVerify.vue
index 46800b08..09bbc7bc 100644
--- a/src/components/Verify/src/DragVerify.vue
+++ b/src/components/Verify/src/DragVerify.vue
@@ -1,7 +1,7 @@
 <script lang="tsx">
   import type { Ref } from 'vue';
   import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { useTimeoutFn } from '@vben/hooks';
   import { useEventListener } from '/@/hooks/event/useEventListener';
   import { basicProps } from './props';
   import { getSlot } from '/@/utils/helper/tsxHelper';
diff --git a/src/components/Verify/src/ImgRotate.vue b/src/components/Verify/src/ImgRotate.vue
index 9e9b2164..83142958 100644
--- a/src/components/Verify/src/ImgRotate.vue
+++ b/src/components/Verify/src/ImgRotate.vue
@@ -1,7 +1,7 @@
 <script lang="tsx">
   import type { MoveData, DragVerifyActionType } from './typing';
   import { defineComponent, computed, unref, reactive, watch, ref } from 'vue';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { useTimeoutFn } from '@vben/hooks';
   import BasicDragVerify from './DragVerify.vue';
   import { hackCss } from '/@/utils/domUtils';
   import { rotateProps } from './props';
diff --git a/src/hooks/core/useTimeout.ts b/src/hooks/core/useTimeout.ts
deleted file mode 100644
index 9905c2b6..00000000
--- a/src/hooks/core/useTimeout.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ref, watch } from 'vue';
-import { tryOnUnmounted } from '@vueuse/core';
-import { isFunction } from '/@/utils/is';
-
-export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
-  if (!isFunction(handle)) {
-    throw new Error('handle is not Function!');
-  }
-
-  const { readyRef, stop, start } = useTimeoutRef(wait);
-  if (native) {
-    handle();
-  } else {
-    watch(
-      readyRef,
-      (maturity) => {
-        maturity && handle();
-      },
-      { immediate: false },
-    );
-  }
-  return { readyRef, stop, start };
-}
-
-export function useTimeoutRef(wait: number) {
-  const readyRef = ref(false);
-
-  let timer: TimeoutHandle;
-  function stop(): void {
-    readyRef.value = false;
-    timer && window.clearTimeout(timer);
-  }
-  function start(): void {
-    stop();
-    timer = setTimeout(() => {
-      readyRef.value = true;
-    }, wait);
-  }
-
-  start();
-
-  tryOnUnmounted(stop);
-
-  return { readyRef, stop, start };
-}
diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts
index 2f65a7df..643ce608 100644
--- a/src/hooks/web/useECharts.ts
+++ b/src/hooks/web/useECharts.ts
@@ -1,6 +1,6 @@
 import type { EChartsOption } from 'echarts';
 import type { Ref } from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vben/hooks';
 import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
 import { unref, nextTick, watch, computed, ref } from 'vue';
 import { useEventListener } from '/@/hooks/event/useEventListener';
-- 
GitLab