fix: updated the layout logic for contract-viewer

AElfProject · Oct 4, 2024 · 76b8668 · 76b8668
1 parent 180f633
commit 76b8668
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 39 deletions.
diff --git a/app/workspace/[id]/page.tsx b/app/workspace/[id]/page.tsx
@@ -11,15 +11,23 @@ import Cli from "@/components/workspace/cli";
 import Editor from "@/components/workspace/editor";
 import FileExplorer from "@/components/file-explorer";
 import ContractViewer from "@/components/contract-viewer";
-
+import { Fragment } from "react";
 
 export default function Page() {
   return (
     <ResizablePanelGroup direction="horizontal" className="border">
       <ResizablePanel defaultSize={25} className="flex flex-col">
-        <BuildDeployPanel />
-        <FileExplorer />
-        <ContractViewer />
+        <TopBottom
+          top={
+            <Fragment>
+              <BuildDeployPanel />
+              <FileExplorer />
+            </Fragment>
+          }
+          bottom={<ContractViewer />}
+          topDefaultSize={30}
+          bottomDefaultSize={70}
+        />
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={75}>

diff --git a/components/contract-viewer/index.tsx b/components/contract-viewer/index.tsx
@@ -12,46 +12,21 @@ const ContractViewer = () => {
   const contractName = pathName.split("/")[2];
 
   const wallet = useWallet();
-  const [treeHeight, setTreeHeight] = useState(0);
-
-  const aelfWallet =
-    wallet?.privateKey && AElf.wallet.getWalletByPrivateKey(wallet.privateKey);
+  const aelfWallet = wallet?.privateKey && AElf.wallet.getWalletByPrivateKey(wallet.privateKey);
   const contractViewerAddress = searchParams.get("contract-viewer-address");
 
-  const setFileContainerHeight = () => {
-    const treeElement = document.querySelector(".file-tree");
-    if (treeElement) {
-      setTreeHeight(treeElement.clientHeight);
-      const resizeObserver = new ResizeObserver((entries) => {
-        setTreeHeight(treeElement.clientHeight);
-      });
-      resizeObserver.observe(treeElement);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  };
-
-  useEffect(() => {
-    if (typeof document !== "undefined") {
-      setTimeout(() => setFileContainerHeight(), 500);
-    }
-  }, []);
-
   if (!contractViewerAddress || !aelfWallet) {
     return;
   }
 
   return (
-    <div style={{height: `calc(100% - ${treeHeight + 134}px)`}} className="border-t-2 mt-[20px]">
-      <ContractView
-        wallet={aelfWallet}
-        address={contractViewerAddress}
-        headerTitle={"Contract View"}
-        rpcUrl="https://explorer-test-side02.aelf.io/chain"
-        contractName={contractName}
-      />
-    </div>
+    <ContractView
+      wallet={aelfWallet}
+      address={contractViewerAddress}
+      headerTitle={"Contract View"}
+      rpcUrl="https://explorer-test-side02.aelf.io/chain"
+      contractName={contractName}
+    />
   );
 };
 

diff --git a/components/top-bottom.tsx b/components/top-bottom.tsx
@@ -8,18 +8,27 @@ import { ReactNode } from "react";
 export default function TopBottom({
   top,
   bottom,
+  topDefaultSize = 70,
+  bottomDefaultSize = 30,
 }: {
   top: ReactNode;
   bottom: ReactNode;
+  topDefaultSize?: number;
+  bottomDefaultSize?: number;
 }) {
   return (
     <div className="h-[calc(100vh-40px)]">
       <ResizablePanelGroup direction="vertical">
-        <ResizablePanel defaultSize={70} className="overflow-y-auto">
+        <ResizablePanel
+          defaultSize={topDefaultSize}
+          className="overflow-y-auto"
+        >
           {top}
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={30}>{bottom}</ResizablePanel>
+        <ResizablePanel defaultSize={bottomDefaultSize}>
+          {bottom}
+        </ResizablePanel>
       </ResizablePanelGroup>
     </div>
   );