fix: (Tabs & CapsuleTabs & JumboTabs) wrap pane content with ShouldRe…

…nder
ant-design · Feb 28, 2022 · 5a9d665 · 5a9d665
1 parent db89e14
commit 5a9d665
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 41 deletions.
diff --git a/src/components/capsule-tabs/capsule-tabs.tsx b/src/components/capsule-tabs/capsule-tabs.tsx
@@ -12,6 +12,7 @@ import { usePropsValue } from '../../utils/use-props-value'
 import { useResizeEffect } from '../../utils/use-resize-effect'
 import { useTabListScroll } from '../../utils/use-tab-list-scroll'
 import ScrollMask from '../scroll-mask'
+import { ShouldRender } from '../../utils/should-render'
 
 const classPrefix = `adm-capsule-tabs`
 
@@ -107,21 +108,21 @@ export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
         if (pane.props.children === undefined) {
           return null
         }
-        if (pane.key === activeKey) {
-          return (
-            <div key={pane.key} className={`${classPrefix}-content`}>
+        const active = pane.key === activeKey
+        return (
+          <ShouldRender
+            key={pane.key}
+            active={active}
+            forceRender={pane.props.forceRender}
+          >
+            <div
+              className={`${classPrefix}-content`}
+              style={{ display: active ? 'block' : 'none' }}
+            >
               {pane.props.children}
             </div>
-          )
-        }
-        if (pane.props.forceRender) {
-          return (
-            <div key={pane.key} style={{ display: 'none' }}>
-              {pane.props.children}
-            </div>
-          )
-        }
-        return null
+          </ShouldRender>
+        )
       })}
     </div>
   )

diff --git a/src/components/jumbo-tabs/jumbo-tabs.tsx b/src/components/jumbo-tabs/jumbo-tabs.tsx
@@ -12,6 +12,7 @@ import { usePropsValue } from '../../utils/use-props-value'
 import { useResizeEffect } from '../../utils/use-resize-effect'
 import { useTabListScroll } from '../../utils/use-tab-list-scroll'
 import ScrollMask from '../scroll-mask'
+import { ShouldRender } from '../../utils/should-render'
 
 const classPrefix = `adm-jumbo-tabs`
 
@@ -113,21 +114,21 @@ export const JumboTabs: FC<JumboTabsProps> = props => {
         if (pane.props.children === undefined) {
           return null
         }
-        if (pane.key === activeKey) {
-          return (
-            <div key={pane.key} className={`${classPrefix}-content`}>
+        const active = pane.key === activeKey
+        return (
+          <ShouldRender
+            key={pane.key}
+            active={active}
+            forceRender={pane.props.forceRender}
+          >
+            <div
+              className={`${classPrefix}-content`}
+              style={{ display: active ? 'block' : 'none' }}
+            >
               {pane.props.children}
             </div>
-          )
-        }
-        if (pane.props.forceRender) {
-          return (
-            <div key={pane.key} style={{ display: 'none' }}>
-              {pane.props.children}
-            </div>
-          )
-        }
-        return null
+          </ShouldRender>
+        )
       })}
     </div>
   )

diff --git a/src/components/tabs/demos/demo1.tsx b/src/components/tabs/demos/demo1.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Tabs, Badge } from 'antd-mobile'
+import { Tabs } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 
 export default () => {

diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
@@ -15,6 +15,7 @@ import { useMutationEffect } from '../../utils/use-mutation-effect'
 import { useResizeEffect } from '../../utils/use-resize-effect'
 import { mergeProps } from '../../utils/with-default-props'
 import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect'
+import { ShouldRender } from '../../utils/should-render'
 
 const classPrefix = `adm-tabs`
 
@@ -288,25 +289,21 @@ export const Tabs: FC<TabsProps> = p => {
         if (pane.props.children === undefined) {
           return null
         }
-        if (pane.key === activeKey) {
-          return (
-            <div key={pane.key} className={`${classPrefix}-content`}>
-              {pane.props.children}
-            </div>
-          )
-        }
-        if (pane.props.forceRender) {
-          return (
+        const active = pane.key === activeKey
+        return (
+          <ShouldRender
+            key={pane.key}
+            active={active}
+            forceRender={pane.props.forceRender}
+          >
             <div
-              key={pane.key}
               className={`${classPrefix}-content`}
-              style={{ display: 'none' }}
+              style={{ display: active ? 'block' : 'none' }}
             >
               {pane.props.children}
             </div>
-          )
-        }
-        return null
+          </ShouldRender>
+        )
       })}
     </div>
   )