From 0f17f1fd657aefad509d9f6940254a0f98a42bd0 Mon Sep 17 00:00:00 2001
From: liaoxuezhi <liaoxuezhi@baidu.com>
Date: Fri, 24 May 2019 14:38:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20Tabs=20=E7=94=B1=E4=BA=8E?=
 =?UTF-8?q?=E6=98=BE=E9=9A=90=E5=88=87=E6=8D=A2=E5=AF=BC=E8=87=B4=E7=9A=84?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=86=B2=E7=AA=81=E5=92=8Cactive=E9=A1=B9?=
 =?UTF-8?q?=E6=B6=88=E5=A4=B1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderers/Tabs.tsx | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/renderers/Tabs.tsx b/src/renderers/Tabs.tsx
index d986a565..fd5099a5 100644
--- a/src/renderers/Tabs.tsx
+++ b/src/renderers/Tabs.tsx
@@ -106,6 +106,35 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         }
     }
 
+    componentDidUpdate() {
+        const {
+            tabs,
+            data
+        } = this.props;
+
+        if (!Array.isArray(tabs)) {
+            return;
+        }
+
+        const tabIndex = findIndex(tabs, (tab: TabProps, index) =>
+            tab.hash ? tab.hash === this.state.activeKey : index === this.state.activeKey
+        );
+
+        if (tabs[tabIndex] && !isVisible(tabs[tabIndex], this.props.data)) {
+            let i = tabIndex - 1;
+            while (tabs[i]) {
+                if (isVisible(tabs[i], data)) {
+                    let activeKey = tabs[i].hash || i;
+                    this.setState({
+                        activeKey
+                    })
+                    break;
+                }
+                i--;
+            }
+        }
+    }
+
     handleSelect(key: any) {
         const {env} = this.props;
 
@@ -162,7 +191,6 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         }
 
         const mode = tabsMode || dMode;
-        const visibleTabs = tabs.filter(tab => isVisible(tab, data));
 
         return (
             <TabContainer
@@ -179,7 +207,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
             >
                 <div>
                     <Nav className={cx('Tabs-links')} role="tablist">
-                        {visibleTabs.map((tab, index) => (
+                        {tabs.map((tab, index) => isVisible(tab, data) ? (
                             <NavItem
                                 className={cx('Tabs-link')}
                                 key={index}
@@ -194,7 +222,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
                                     tab.title
                                 )}
                             </NavItem>
-                        ))}
+                        ) : null)}
                     </Nav>
 
                     <TabContent
@@ -202,7 +230,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
                         mountOnEnter={mountOnEnter}
                         unmountOnExit={unmountOnExit}
                     >
-                        {visibleTabs.map((tab, index) => (
+                        {tabs.map((tab, index) => isVisible(tab, data) ? (
                             <TabPane
                                 key={index}
                                 eventKey={tab.hash || index}
@@ -213,7 +241,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
                                     ? tabRender(tab, this.props)
                                     : render(`tab/${index}`, tab.tab || tab.body || '')}
                             </TabPane>
-                        ))}
+                        ) : null)}
                     </TabContent>
                 </div>
             </TabContainer>