From 48dd6ea8263c9f63dab1061f6c49e0a2bf790fc1 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Tue, 25 Oct 2022 23:12:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=A1=A8=E6=A0=BC=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/crontab/index.tsx      | 13 +++++++++----
 src/pages/dependence/index.tsx   |  8 +++++---
 src/pages/env/index.tsx          |  8 +++++---
 src/pages/subscription/index.tsx | 13 +++++++++----
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx
index a5fc1c0f..a6070c98 100644
--- a/src/pages/crontab/index.tsx
+++ b/src/pages/crontab/index.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent, Fragment, useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Button,
   message,
@@ -388,6 +388,7 @@ const Crontab = () => {
   const [cronViews, setCronViews] = useState<any[]>([]);
   const [enabledCronViews, setEnabledCronViews] = useState<any[]>([]);
   const [moreMenuActive, setMoreMenuActive] = useState(false);
+  const tableRef = useRef<any>();
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -874,12 +875,15 @@ const Crontab = () => {
       sorter: {},
       filters: {},
     });
-    setTimeout(() => {
-      setTableScrollHeight(getTableScroll());
-    });
     getCronViews();
   }, []);
 
+  useEffect(() => {
+    if (tableRef.current) {
+      setTableScrollHeight(getTableScroll());
+    }
+  }, [tableRef.current]);
+
   const panelContent = (
     <>
       {selectedRowIds.length > 0 && (
@@ -939,6 +943,7 @@ const Crontab = () => {
         </div>
       )}
       <Table
+        ref={tableRef}
         columns={columns}
         pagination={{
           current: pageConf.page,
diff --git a/src/pages/dependence/index.tsx b/src/pages/dependence/index.tsx
index 52482f48..ed62a336 100644
--- a/src/pages/dependence/index.tsx
+++ b/src/pages/dependence/index.tsx
@@ -168,6 +168,7 @@ const Dependence = () => {
   const [logDependence, setLogDependence] = useState<any>();
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [type, setType] = useState('nodejs');
+  const tableRef = useRef<any>();
 
   const getDependencies = () => {
     setLoading(true);
@@ -368,10 +369,10 @@ const Dependence = () => {
   }, [searchText, type]);
 
   useEffect(() => {
-    setTimeout(() => {
+    if (tableRef.current) {
       setTableScrollHeight(getTableScroll({ extraHeight: 87 }));
-    });
-  }, []);
+    }
+  }, [tableRef.current]);
 
   useEffect(() => {
     if (logDependence) {
@@ -454,6 +455,7 @@ const Dependence = () => {
       )}
       <DndProvider backend={HTML5Backend}>
         <Table
+          ref={tableRef}
           columns={columns}
           rowSelection={rowSelection}
           pagination={false}
diff --git a/src/pages/env/index.tsx b/src/pages/env/index.tsx
index 6fefde09..daa31dc4 100644
--- a/src/pages/env/index.tsx
+++ b/src/pages/env/index.tsx
@@ -254,6 +254,7 @@ const Env = () => {
   const [searchText, setSearchText] = useState('');
   const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [importLoading, setImportLoading] = useState(false);
+  const tableRef = useRef<any>();
 
   const getEnvs = () => {
     setLoading(true);
@@ -508,10 +509,10 @@ const Env = () => {
   }, [searchText]);
 
   useEffect(() => {
-    setTimeout(() => {
+    if (tableRef.current) {
       setTableScrollHeight(getTableScroll({ extraHeight: 87 }));
-    });
-  }, []);
+    }
+  }, [tableRef.current]);
 
   return (
     <PageContainer
@@ -587,6 +588,7 @@ const Env = () => {
       )}
       <DndProvider backend={HTML5Backend}>
         <Table
+          ref={tableRef}
           columns={columns}
           rowSelection={rowSelection}
           pagination={false}
diff --git a/src/pages/subscription/index.tsx b/src/pages/subscription/index.tsx
index 4449e7ee..95d7bd62 100644
--- a/src/pages/subscription/index.tsx
+++ b/src/pages/subscription/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Button,
   message,
@@ -247,6 +247,7 @@ const Subscription = () => {
   const [searchValue, setSearchValue] = useState('');
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [logSubscription, setLogSubscription] = useState<any>();
+  const tableRef = useRef<any>();
 
   const runSubscription = (record: any, index: number) => {
     Modal.confirm({
@@ -539,11 +540,14 @@ const Subscription = () => {
 
   useEffect(() => {
     setPageSize(parseInt(localStorage.getItem('pageSize') || '20'));
-    setTimeout(() => {
-      setTableScrollHeight(getTableScroll());
-    });
   }, []);
 
+  useEffect(() => {
+    if (tableRef.current) {
+      setTableScrollHeight(getTableScroll());
+    }
+  }, [tableRef.current]);
+
   return (
     <PageContainer
       className="ql-container-wrapper subscriptiontab-wrapper"
@@ -568,6 +572,7 @@ const Subscription = () => {
       }}
     >
       <Table
+        ref={tableRef}
         columns={columns}
         pagination={{
           current: currentPage,