fix: scroll to center

binary-com · Aug 14, 2024 · fa103ba · fa103ba
1 parent 01999dd
commit fa103ba
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 25 deletions.
diff --git a/packages/trader/src/AppV2/Components/ActiveSymbolsList/active-symbols-list.tsx b/packages/trader/src/AppV2/Components/ActiveSymbolsList/active-symbols-list.tsx
@@ -62,6 +62,7 @@ const ActiveSymbolsList = observer(({ isOpen, setIsOpen }: TActiveSymbolsList) =
                                 setSelectedSymbol={setSelectedSymbol}
                                 setIsOpen={setIsOpen}
                                 isOpen={isOpen}
+                                marketCategoriesRef={marketCategoriesRef}
                             />
                         )}
                     </Tab.Container>

diff --git a/packages/trader/src/AppV2/Components/MarketCategories/__tests__/market-categories.spec.tsx b/packages/trader/src/AppV2/Components/MarketCategories/__tests__/market-categories.spec.tsx
@@ -20,6 +20,9 @@ describe('<MarketCategories />', () => {
         setSelectedSymbol: jest.fn(),
         setIsOpen: jest.fn(),
         isOpen: false,
+        marketCategoriesRef: {
+            current: document.createElement('div'),
+        },
     };
     beforeEach(() => {
         jest.clearAllMocks();

diff --git a/packages/trader/src/AppV2/Components/MarketCategories/market-categories.tsx b/packages/trader/src/AppV2/Components/MarketCategories/market-categories.tsx
@@ -11,33 +11,36 @@ type TMarketCategories = {
     setSelectedSymbol: (input: string) => void;
     setIsOpen: (input: boolean) => void;
     isOpen: boolean;
+    marketCategoriesRef: React.RefObject<HTMLDivElement>;
 };
 
-const MarketCategories = observer(({ selectedSymbol, setSelectedSymbol, setIsOpen, isOpen }: TMarketCategories) => {
-    const { activeSymbols } = useActiveSymbols();
-    const categorizedSymbols = categorizeSymbols(activeSymbols);
+const MarketCategories = observer(
+    ({ selectedSymbol, setSelectedSymbol, setIsOpen, isOpen, marketCategoriesRef }: TMarketCategories) => {
+        const { activeSymbols } = useActiveSymbols();
+        const categorizedSymbols = categorizeSymbols(activeSymbols);
 
-    return (
-        <React.Fragment>
-            <Tab.List>
-                {Object.values(categorizedSymbols).map(category => (
-                    <MarketCategoryTab key={category.market} category={category} />
-                ))}
-            </Tab.List>
-            <Tab.Content className='market-categories__list'>
-                {Object.values(categorizedSymbols).map(category => (
-                    <MarketCategory
-                        key={category.market}
-                        category={category}
-                        selectedSymbol={selectedSymbol}
-                        setSelectedSymbol={setSelectedSymbol}
-                        setIsOpen={setIsOpen}
-                        isOpen={isOpen}
-                    />
-                ))}
-            </Tab.Content>
-        </React.Fragment>
-    );
-});
+        return (
+            <React.Fragment>
+                <Tab.List>
+                    {Object.values(categorizedSymbols).map(category => (
+                        <MarketCategoryTab key={category.market} category={category} />
+                    ))}
+                </Tab.List>
+                <Tab.Content className='market-categories__list' ref={marketCategoriesRef}>
+                    {Object.values(categorizedSymbols).map(category => (
+                        <MarketCategory
+                            key={category.market}
+                            category={category}
+                            selectedSymbol={selectedSymbol}
+                            setSelectedSymbol={setSelectedSymbol}
+                            setIsOpen={setIsOpen}
+                            isOpen={isOpen}
+                        />
+                    ))}
+                </Tab.Content>
+            </React.Fragment>
+        );
+    }
+);
 
 export default MarketCategories;