From b49950a3906de6626eedb973590d02e4d95b98b9 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Sat, 21 Nov 2020 22:47:10 +0800
Subject: [PATCH] fix: fix useTimeoutFn not work

---
 .../Container/src/LazyContainer.vue           |  8 ++--
 .../src/collapse/CollapseContainer.vue        |  2 +-
 src/components/Modal/src/Modal.tsx            |  2 +-
 .../Table/src/hooks/useDataSource.ts          |  2 +-
 src/components/Verify/src/DragVerify.tsx      |  2 +-
 src/components/Verify/src/ImgRotate.tsx       |  2 +-
 src/components/Verify/src/VerifyModal.vue     |  2 +-
 src/hooks/core/useTimeout.ts                  | 43 +++++++++++++++++++
 src/hooks/web/useApexCharts.ts                |  2 +-
 src/hooks/web/useECharts.ts                   |  2 +-
 src/hooks/web/useMessage.tsx                  |  7 +++
 src/hooks/web/useTabs.ts                      |  2 +-
 src/layouts/logo/index.vue                    |  2 +-
 13 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 src/hooks/core/useTimeout.ts

diff --git a/src/components/Container/src/LazyContainer.vue b/src/components/Container/src/LazyContainer.vue
index c6b4b2a434b..84771f28eda 100644
--- a/src/components/Container/src/LazyContainer.vue
+++ b/src/components/Container/src/LazyContainer.vue
@@ -22,7 +22,7 @@
   import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
 
   import { Skeleton } from 'ant-design-vue';
-  import { useTimeoutFn } from '@vueuse/core';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
   interface State {
     isInit: boolean;
@@ -40,9 +40,9 @@
 
       // The viewport where the component is located. If the component is scrolling in the page container, the viewport is the container
       viewport: {
-        type: (typeof window !== 'undefined' ? window.HTMLElement : Object) as PropType<
-          HTMLElement
-        >,
+        type: (typeof window !== 'undefined'
+          ? window.HTMLElement
+          : Object) as PropType<HTMLElement>,
         default: () => null,
       },
 
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index 929e5aed1cd..c29c6099e39 100644
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -32,7 +32,7 @@
 
   import { triggerWindowResize } from '/@/utils/event/triggerWindowResizeEvent';
   // hook
-  import { useTimeoutFn } from '@vueuse/core';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
   export default defineComponent({
     components: {
diff --git a/src/components/Modal/src/Modal.tsx b/src/components/Modal/src/Modal.tsx
index 2220f4713f6..6b36493d84a 100644
--- a/src/components/Modal/src/Modal.tsx
+++ b/src/components/Modal/src/Modal.tsx
@@ -1,7 +1,7 @@
 import { Modal } from 'ant-design-vue';
 import { defineComponent, watchEffect } from 'vue';
 import { basicProps } from './props';
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { extendSlots } from '/@/utils/helper/tsxHelper';
 
 export default defineComponent({
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index 010cc25cfe6..4a65e9789ce 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -3,7 +3,7 @@ import type { PaginationProps } from '../types/pagination';
 
 import { watch, ref, unref, ComputedRef, computed, onMounted, Ref } from 'vue';
 
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
 import { buildUUID } from '/@/utils/uuid';
 import { isFunction, isBoolean } from '/@/utils/is';
diff --git a/src/components/Verify/src/DragVerify.tsx b/src/components/Verify/src/DragVerify.tsx
index be164958810..6aa65aee17f 100644
--- a/src/components/Verify/src/DragVerify.tsx
+++ b/src/components/Verify/src/DragVerify.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { useEventListener } from '/@/hooks/event/useEventListener';
 import { basicProps } from './props';
 import { getSlot } from '/@/utils/helper/tsxHelper';
diff --git a/src/components/Verify/src/ImgRotate.tsx b/src/components/Verify/src/ImgRotate.tsx
index 02ea773e2d3..f6397bfa27c 100644
--- a/src/components/Verify/src/ImgRotate.tsx
+++ b/src/components/Verify/src/ImgRotate.tsx
@@ -1,7 +1,7 @@
 import type { MoveData, DragVerifyActionType } from './types';
 
 import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue';
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
 import BasicDragVerify from './DragVerify';
 
diff --git a/src/components/Verify/src/VerifyModal.vue b/src/components/Verify/src/VerifyModal.vue
index b5bf8c47422..fe5c129c0e9 100644
--- a/src/components/Verify/src/VerifyModal.vue
+++ b/src/components/Verify/src/VerifyModal.vue
@@ -1,7 +1,7 @@
 <script lang="tsx">
   import { defineComponent, ref, unref } from 'vue';
   import { BasicModal } from '/@/components/Modal/index';
-  import { useTimeoutFn } from '@vueuse/core';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
   import { RotateDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
   export default defineComponent({
diff --git a/src/hooks/core/useTimeout.ts b/src/hooks/core/useTimeout.ts
new file mode 100644
index 00000000000..4fcc19a89e8
--- /dev/null
+++ b/src/hooks/core/useTimeout.ts
@@ -0,0 +1,43 @@
+import { ref, watch } from 'vue';
+import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
+
+import { isFunction } from '/@/utils/is';
+
+export function useTimeoutFn(handle: Fn<any>, wait: number) {
+  if (!isFunction(handle)) {
+    throw new Error('handle is not Function!');
+  }
+
+  const { readyRef, stop, start } = useTimeoutRef(wait);
+
+  watch(
+    readyRef,
+    (maturity) => {
+      maturity && handle();
+    },
+    { immediate: false }
+  );
+  return { readyRef, stop, start };
+}
+
+export function useTimeoutRef(wait: number) {
+  const readyRef = ref(false);
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  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/useApexCharts.ts b/src/hooks/web/useApexCharts.ts
index 924a274786d..d9d717c7daf 100644
--- a/src/hooks/web/useApexCharts.ts
+++ b/src/hooks/web/useApexCharts.ts
@@ -1,4 +1,4 @@
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 import { unref, Ref, nextTick } from 'vue';
 
diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts
index 20d68322887..5ad47b80a1d 100644
--- a/src/hooks/web/useECharts.ts
+++ b/src/hooks/web/useECharts.ts
@@ -1,4 +1,4 @@
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 import { unref, Ref, nextTick } from 'vue';
 import type { EChartOption, ECharts } from 'echarts';
diff --git a/src/hooks/web/useMessage.tsx b/src/hooks/web/useMessage.tsx
index 02bc4267243..a11ac0038f6 100644
--- a/src/hooks/web/useMessage.tsx
+++ b/src/hooks/web/useMessage.tsx
@@ -46,6 +46,7 @@ function getIcon(iconType: string) {
     return <CloseCircleFilled class="modal-icon-error" />;
   }
 }
+
 function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
   return <div innerHTML={`<div>${content as string}</div>`}></div>;
 }
@@ -64,6 +65,7 @@ function createConfirm(options: ModalOptionsEx): ConfirmOptions {
   };
   return Modal.confirm(opt) as any;
 }
+
 const baseOptions = {
   okText: '确定',
   centered: true,
@@ -77,15 +79,19 @@ function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOp
     icon: getIcon(icon),
   };
 }
+
 function createSuccessModal(options: ModalOptionsPartial) {
   return Modal.success(createModalOptions(options, 'success'));
 }
+
 function createErrorModal(options: ModalOptionsPartial) {
   return Modal.error(createModalOptions(options, 'close'));
 }
+
 function createInfoModal(options: ModalOptionsPartial) {
   return Modal.info(createModalOptions(options, 'info'));
 }
+
 function createWarningModal(options: ModalOptionsPartial) {
   return Modal.warning(createModalOptions(options, 'warning'));
 }
@@ -94,6 +100,7 @@ notification.config({
   placement: 'topRight',
   duration: 3,
 });
+
 /**
  * @description: message
  */
diff --git a/src/hooks/web/useTabs.ts b/src/hooks/web/useTabs.ts
index fb75652620d..e9cf345e892 100644
--- a/src/hooks/web/useTabs.ts
+++ b/src/hooks/web/useTabs.ts
@@ -1,4 +1,4 @@
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { PageEnum } from '/@/enums/pageEnum';
 import { TabItem, tabStore } from '/@/store/modules/tab';
 import { appStore } from '/@/store/modules/app';
diff --git a/src/layouts/logo/index.vue b/src/layouts/logo/index.vue
index 3f848d96f22..3cfd230b7db 100644
--- a/src/layouts/logo/index.vue
+++ b/src/layouts/logo/index.vue
@@ -8,7 +8,7 @@
   import { computed, defineComponent, PropType, ref, watch } from 'vue';
   // hooks
   import { useSetting } from '/@/hooks/core/useSetting';
-  import { useTimeoutFn } from '@vueuse/core';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useGo } from '/@/hooks/web/usePage';
 
   import { PageEnum } from '/@/enums/pageEnum';