fix: useEffect is invalid

sanyuan0704 · Oct 4, 2022 · 6495e07 · 6495e07
1 parent 52298a7
commit 6495e07
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 33 deletions.
diff --git a/src/theme-default/layout/DocLayout/index.tsx b/src/theme-default/layout/DocLayout/index.tsx
@@ -6,8 +6,6 @@ import { DocFooter } from '../../components/DocFooter/index';
 import { Content, usePageData } from 'island/client';
 import { useLocaleSiteData } from '../../logic';
 import { useLocation } from 'react-router-dom';
-import { setupCopyCodeButton } from '../../logic';
-import { useEffect } from 'react';
 
 export function DocLayout() {
   const { toc: headers = [], siteData, pagePath } = usePageData();
@@ -23,10 +21,6 @@ export function DocLayout() {
 
   const hasAside = headers.length > 0 && themeConfig.outline !== false;
 
-  useEffect(() => {
-    setupCopyCodeButton();
-  }, []);
-
   return (
     <div p="t-0 x-6 b-24 sm:6">
       {hasSidebar ? <SideBar /> : null}

diff --git a/src/theme-default/logic/copyCode.ts b/src/theme-default/logic/copyCode.ts
@@ -1,34 +1,30 @@
-import { inBrowser } from '../../shared/utils';
-
 export function setupCopyCodeButton() {
-  if (inBrowser()) {
-    const timeoutIdMap: Map<HTMLElement, NodeJS.Timeout> = new Map();
-    window.addEventListener('click', (e) => {
-      const el = e.target as HTMLElement;
+  const timeoutIdMap: Map<HTMLElement, NodeJS.Timeout> = new Map();
+  window.addEventListener('click', (e) => {
+    const el = e.target as HTMLElement;
 
-      if (el.matches('div[class*="language-"] > button.copy')) {
-        const parent = el.parentElement;
-        const sibling = el.nextElementSibling
-          ?.nextElementSibling as HTMLPreElement | null;
-        if (!parent || !sibling) {
-          return;
-        }
+    if (el.matches('div[class*="language-"] > button.copy')) {
+      const parent = el.parentElement;
+      const sibling = el.nextElementSibling
+        ?.nextElementSibling as HTMLPreElement | null;
+      if (!parent || !sibling) {
+        return;
+      }
 
-        const { innerText: text = '' } = sibling;
+      const { innerText: text = '' } = sibling;
 
-        copyToClipboard(text).then(() => {
-          el.classList.add('copied');
-          clearTimeout(timeoutIdMap.get(el));
-          const timeoutId = setTimeout(() => {
-            el.classList.remove('copied');
-            el.blur();
-            timeoutIdMap.delete(el);
-          }, 2000);
-          timeoutIdMap.set(el, timeoutId);
-        });
-      }
-    });
-  }
+      copyToClipboard(text).then(() => {
+        el.classList.add('copied');
+        clearTimeout(timeoutIdMap.get(el));
+        const timeoutId = setTimeout(() => {
+          el.classList.remove('copied');
+          el.blur();
+          timeoutIdMap.delete(el);
+        }, 2000);
+        timeoutIdMap.set(el, timeoutId);
+      });
+    }
+  });
 }
 
 async function copyToClipboard(text: string) {

diff --git a/src/theme-default/logic/sideEffects.ts b/src/theme-default/logic/sideEffects.ts
@@ -1,6 +1,7 @@
 import { throttle } from 'lodash-es';
 import { APPEARANCE_KEY } from '../../shared/constants';
 import { inBrowser } from '../../shared/utils';
+import { setupCopyCodeButton } from './copyCode';
 
 const DEFAULT_NAV_HEIGHT = 60;
 
@@ -209,4 +210,5 @@ export function setupEffects() {
     bindingAsideScroll();
   }
   bindingWindowScroll();
+  setupCopyCodeButton();
 }