fix: refactor minHeight calculating (#866)

gravity-ui · Mar 21, 2024 · ab0e32a · ab0e32a
1 parent cd24fed
commit ab0e32a
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, {Fragment, useCallback, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
@@ -56,16 +56,19 @@ export const TabsBlock = ({
     const onSelectTab = useCallback(
         (id: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
             setActiveTab(id);
-            handleImageHeight();
             e.currentTarget.scrollIntoView({
                 inline: 'center',
                 behavior: 'smooth',
                 block: 'nearest',
             });
         },
-        [handleImageHeight],
+        [],
     );
 
+    useEffect(() => {
+        handleImageHeight();
+    }, [activeTab, handleImageHeight]);
+
     if (activeTabData) {
         const themedImage = getThemedValue(activeTabData?.image, theme);
 
@@ -102,8 +105,8 @@ export const TabsBlock = ({
             }}
             className={b('col', {centered: centered})}
         >
-            <div style={{minHeight: mediaVideoHeight || minImageHeight}}>
-                {activeTabData?.media && (
+            {activeTabData?.media && (
+                <div style={{minHeight: mediaVideoHeight || minImageHeight}}>
                     <div ref={ref}>
                         <Media
                             {...getThemedValue(activeTabData.media, theme)}
@@ -114,8 +117,8 @@ export const TabsBlock = ({
                             onImageLoad={handleImageHeight}
                         />
                     </div>
-                )}
-            </div>
+                </div>
+            )}
             {imageProps && (
                 <Fragment>
                     <FullscreenImage {...imageProps} imageClassName={b('image', {border})} />