fix: auto calculate header hight

lifinance · Jun 7, 2022 · 80b317e · 80b317e
1 parent 9fb33e9
commit 80b317e
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx
@@ -1,5 +1,5 @@
 import { Box, Container } from '@mui/material';
-import { FC } from 'react';
+import { FC, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TokenList } from '../../components/TokenList';
 import { useContentHeight, useScrollableOverflowHidden } from '../../hooks';
@@ -10,24 +10,30 @@ import { SearchTokenInput } from './SearchTokenInput';
 export const SelectTokenPage: FC<{ formType: SwapFormDirection }> = ({
   formType,
 }) => {
-  const navigate = useNavigate();
   useScrollableOverflowHidden();
+  const navigate = useNavigate();
+  const headerRef = useRef<HTMLElement>(null);
   const contentHeight = useContentHeight();
+  const [headerHeight, setHeaderHeight] = useState(0);
 
   const handleTokenClick = () => {
     navigate(-1);
   };
 
+  useLayoutEffect(() => {
+    setHeaderHeight(contentHeight - (headerRef.current?.offsetHeight ?? 0));
+  }, [contentHeight]);
+
   return (
     <Container disableGutters>
-      <Box pt={1} pb={2} px={3}>
+      <Box pt={1} pb={2} px={3} ref={headerRef}>
         <ChainSelect formType={formType} />
         <Box mt={2}>
           <SearchTokenInput />
         </Box>
       </Box>
       <TokenList
-        height={contentHeight - 184}
+        height={headerHeight}
         onClick={handleTokenClick}
         formType={formType}
       />