From fc9981335bb778b4fe5203406770e97de27ad860 Mon Sep 17 00:00:00 2001
From: Camol <kwwnjujlc@gmail.com>
Date: Tue, 22 Aug 2023 03:14:25 +0800
Subject: [PATCH] fix: timers type in browser env (#3875)

---
 .../src/components/affine/create-workspace-modal/index.tsx  | 2 +-
 .../delete-leave-workspace/delete/index.tsx                 | 2 +-
 apps/core/src/components/page-detail-editor.tsx             | 6 +++---
 apps/prototype/src/provider-status.tsx                      | 4 ++--
 apps/storybook/src/stories/share-menu.stories.tsx           | 2 +-
 packages/component/src/components/app-sidebar/index.tsx     | 2 +-
 .../component/src/components/notification-center/index.tsx  | 6 +++---
 .../src/components/workspace-avatar/default-avatar.tsx      | 4 ++--
 packages/component/src/ui/popper/popper.tsx                 | 4 ++--
 plugins/bookmark/src/app.tsx                                | 2 +-
 plugins/image-preview/src/component/index.tsx               | 4 ++--
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/core/src/components/affine/create-workspace-modal/index.tsx b/apps/core/src/components/affine/create-workspace-modal/index.tsx
index 5c930d3dbd..d40da0922f 100644
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/apps/core/src/components/affine/create-workspace-modal/index.tsx
@@ -70,7 +70,7 @@ const NameWorkspaceContent = ({
       <Input
         ref={ref => {
           if (ref) {
-            setTimeout(() => ref.focus(), 0);
+            window.setTimeout(() => ref.focus(), 0);
           }
         }}
         data-testid="create-workspace-input"
diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
index e7fac4174a..e9dbc3a70d 100644
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
@@ -82,7 +82,7 @@ export const WorkspaceDeleteModal = ({
           <Input
             ref={ref => {
               if (ref) {
-                setTimeout(() => ref.focus(), 0);
+                window.setTimeout(() => ref.focus(), 0);
               }
             }}
             onChange={setDeleteStr}
diff --git a/apps/core/src/components/page-detail-editor.tsx b/apps/core/src/components/page-detail-editor.tsx
index 95e2ed666c..224957e749 100644
--- a/apps/core/src/components/page-detail-editor.tsx
+++ b/apps/core/src/components/page-detail-editor.tsx
@@ -106,7 +106,7 @@ const EditorWrapper = memo(function EditorWrapper({
             const rootStore = getCurrentStore();
             const editorItems = rootStore.get(pluginEditorAtom);
             let disposes: (() => void)[] = [];
-            const renderTimeout = setTimeout(() => {
+            const renderTimeout = window.setTimeout(() => {
               disposes = Object.entries(editorItems).map(([id, editorItem]) => {
                 const div = document.createElement('div');
                 div.setAttribute('plugin-id', id);
@@ -123,7 +123,7 @@ const EditorWrapper = memo(function EditorWrapper({
             return () => {
               dispose();
               clearTimeout(renderTimeout);
-              setTimeout(() => {
+              window.setTimeout(() => {
                 disposes.forEach(dispose => dispose());
               });
             };
@@ -165,7 +165,7 @@ const PluginContentAdapter = memo<PluginContentAdapterProps>(
             };
             const dispose = addCleanup(pluginName, cl);
             abortController.signal.addEventListener('abort', () => {
-              setTimeout(() => {
+              window.setTimeout(() => {
                 dispose();
                 cl();
               });
diff --git a/apps/prototype/src/provider-status.tsx b/apps/prototype/src/provider-status.tsx
index 28da58ee17..472e065303 100644
--- a/apps/prototype/src/provider-status.tsx
+++ b/apps/prototype/src/provider-status.tsx
@@ -25,11 +25,11 @@ const App = () => {
       <button
         data-testid="start-button"
         onClick={useCallback(() => {
-          disposeRef.current = setInterval(() => {
+          disposeRef.current = window.setInterval(() => {
             const counter = counterRef.current;
             map.set('counter', counter + 1);
             counterRef.current = counter + 1;
-          }, 0) as any;
+          }, 0);
         }, [])}
       >
         start writing
diff --git a/apps/storybook/src/stories/share-menu.stories.tsx b/apps/storybook/src/stories/share-menu.stories.tsx
index 3b989a0a23..8032202b7f 100644
--- a/apps/storybook/src/stories/share-menu.stories.tsx
+++ b/apps/storybook/src/stories/share-menu.stories.tsx
@@ -91,7 +91,7 @@ Basic.play = async ({ canvasElement }) => {
     expect(button).not.toBeNull();
     button.click();
   }
-  await new Promise(resolve => setTimeout(resolve, 100));
+  await new Promise(resolve => window.setTimeout(resolve, 100));
   {
     const button = canvasElement.querySelector(
       '[data-testid="share-menu-enable-affine-cloud-button"]'
diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx
index 3925f45f49..aab102c6f5 100644
--- a/packages/component/src/components/app-sidebar/index.tsx
+++ b/packages/component/src/components/app-sidebar/index.tsx
@@ -35,7 +35,7 @@ export type AppSidebarProps = PropsWithChildren<
 function useEnableAnimation() {
   const [enable, setEnable] = useState(false);
   useEffect(() => {
-    setTimeout(() => {
+    window.setTimeout(() => {
       setEnable(true);
     }, 500);
   }, []);
diff --git a/packages/component/src/components/notification-center/index.tsx b/packages/component/src/components/notification-center/index.tsx
index 380ce250bc..11e7ec9f7c 100644
--- a/packages/component/src/components/notification-center/index.tsx
+++ b/packages/component/src/components/notification-center/index.tsx
@@ -80,7 +80,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
   const [animationKey, setAnimationKey] = useState(0);
   const animationRef = useRef<SVGAnimateElement>(null);
   const notificationRef = useRef<HTMLLIElement>(null);
-  const timerIdRef = useRef<NodeJS.Timeout>();
+  const timerIdRef = useRef<number>();
   const isFront = index === 0;
   const isVisible = index + 1 <= 3;
   const progressDuration = notification.timeout || 3000;
@@ -164,7 +164,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
     setHeights(h =>
       h.filter(height => height.notificationKey !== notification.key)
     );
-    setTimeout(() => {
+    window.setTimeout(() => {
       if (!notification.key) {
         return;
       }
@@ -177,7 +177,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
       clearTimeout(timerIdRef.current);
     }
     if (!expand) {
-      timerIdRef.current = setTimeout(() => {
+      timerIdRef.current = window.setTimeout(() => {
         onClickRemove();
       }, duration);
     }
diff --git a/packages/component/src/components/workspace-avatar/default-avatar.tsx b/packages/component/src/components/workspace-avatar/default-avatar.tsx
index 68185202b1..6e8855768d 100644
--- a/packages/component/src/components/workspace-avatar/default-avatar.tsx
+++ b/packages/component/src/components/workspace-avatar/default-avatar.tsx
@@ -29,7 +29,7 @@ export const DefaultAvatar = ({ name: propsName }: { name: string }) => {
     return colorsSchema[index % colorsSchema.length];
   }, [name]);
 
-  const timer = useRef<ReturnType<typeof setTimeout>>();
+  const timer = useRef<number>();
 
   const [topColor, middleColor, bottomColor] = colors;
   const [isHover, setIsHover] = useState(false);
@@ -38,7 +38,7 @@ export const DefaultAvatar = ({ name: propsName }: { name: string }) => {
     <div
       className={DefaultAvatarContainerStyle}
       onMouseEnter={() => {
-        timer.current = setTimeout(() => {
+        timer.current = window.setTimeout(() => {
           setIsHover(true);
         }, 300);
       }}
diff --git a/packages/component/src/ui/popper/popper.tsx b/packages/component/src/ui/popper/popper.tsx
index 04088b37c0..2d69365ff0 100644
--- a/packages/component/src/ui/popper/popper.tsx
+++ b/packages/component/src/ui/popper/popper.tsx
@@ -69,7 +69,7 @@ export const Popper = ({
     }
     window.clearTimeout(pointerLeaveTimer.current);
 
-    pointerEnterTimer.current = window.setTimeout(() => {
+    pointerEnterTimer.current = window.window.setTimeout(() => {
       setVisible(true);
     }, pointerEnterDelay);
   };
@@ -81,7 +81,7 @@ export const Popper = ({
       return;
     }
     window.clearTimeout(pointerEnterTimer.current);
-    pointerLeaveTimer.current = window.setTimeout(() => {
+    pointerLeaveTimer.current = window.window.setTimeout(() => {
       setVisible(false);
     }, pointerLeaveDelay);
   };
diff --git a/plugins/bookmark/src/app.tsx b/plugins/bookmark/src/app.tsx
index 5bf990fe93..7cf6a57c48 100644
--- a/plugins/bookmark/src/app.tsx
+++ b/plugins/bookmark/src/app.tsx
@@ -183,7 +183,7 @@ const BookMarkUI = ({ page }: BookMarkProps) => {
       if (!shouldShowBookmarkMenu(pastedBlocks)) {
         return;
       }
-      setTimeout(() => {
+      window.setTimeout(() => {
         setAnchor(getCurrentNativeRange());
       }, 100);
     });
diff --git a/plugins/image-preview/src/component/index.tsx b/plugins/image-preview/src/component/index.tsx
index 6d89f9359c..3de57c2bb1 100644
--- a/plugins/image-preview/src/component/index.tsx
+++ b/plugins/image-preview/src/component/index.tsx
@@ -72,10 +72,10 @@ const ImagePreviewModalImpl = (
   const [hasPlayedAnimation, setHasPlayedAnimation] = useState<boolean>(false);
 
   useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
+    let timeoutId: number;
 
     if (!isOpen) {
-      timeoutId = setTimeout(() => {
+      timeoutId = window.setTimeout(() => {
         props.onClose();
         setIsOpen(true);
       }, 300);