@nocobase/client-v2 2.2.0-beta.9 → 3.0.0-alpha.1

package/src/flow/models/base/PageModel/PageModel.tsx

@@ -33,6 +33,7 @@ import { commonConditionHandler, ConditionBuilder } from '../../../components/Co
 import { TextAreaWithContextSelector } from '../../../components/TextAreaWithContextSelector';
 import { confirmUnsavedChangesHandler } from './closeGuard';
 import { BasePageTabModel } from './PageTabModel';
+import { FilteredPageTabBar, NO_ACTIVE_PAGE_TAB_KEY } from './PageModelTabBar';
 
 type PageModelStructure = {
   subModels: {
@@ -49,6 +50,54 @@ type PageModelContextWithRoute = {
   currentRoute?: CurrentRouteWithTabs | null;
 };
 
+type RequestedTabKey = {
+  key?: string;
+  source: 'url' | 'implicit' | 'props' | 'none';
+};
+
+type TabActiveResolution = RequestedTabKey & {
+  status: 'unspecified' | 'visible' | 'hidden' | 'unknown';
+  effectiveKey?: string;
+  allTabs: BasePageTabModel[];
+  unhiddenTabs: BasePageTabModel[];
+};
+
+type TabActiveKeySyncState = {
+  previousEffectiveActiveKey?: string;
+  effectiveActiveKey?: string;
+  previousAllHidden: boolean;
+  lastCorrectionSignature?: string;
+};
+
+type TabActiveKeySyncProps = {
+  dependencyKey: string;
+  onSync: (state: TabActiveKeySyncState) => TabActiveKeySyncState;
+};
+
+type LocallyCommittedTabTransition = {
+  activeKey: string;
+  previousActiveKey?: string;
+};
+
+function TabActiveKeySync({ dependencyKey, onSync }: TabActiveKeySyncProps) {
+  const previousEffectiveActiveKey = React.useRef<string>();
+  const previousAllHidden = React.useRef(false);
+  const lastCorrectionSignature = React.useRef<string>();
+
+  React.useEffect(() => {
+    const nextState = onSync({
+      previousEffectiveActiveKey: previousEffectiveActiveKey.current,
+      previousAllHidden: previousAllHidden.current,
+      lastCorrectionSignature: lastCorrectionSignature.current,
+    });
+    previousEffectiveActiveKey.current = nextState.effectiveActiveKey;
+    previousAllHidden.current = nextState.previousAllHidden;
+    lastCorrectionSignature.current = nextState.lastCorrectionSignature;
+  }, [dependencyKey, onSync]);
+
+  return null;
+}
+
 export class PageModel extends FlowModel<PageModelStructure> {
   tabBarExtraContent: { left?: ReactNode; right?: ReactNode } = {};
   private viewActivatedListener?: (_payload?: unknown) => void;
@@ -57,6 +106,8 @@ export class PageModel extends FlowModel<PageModelStructure> {
   private dirtyRefreshScheduled = false;
   private unmounted = false;
   private documentTitleUpdateVersion = 0;
+  private implicitActiveKey?: string;
+  private locallyCommittedTabTransition?: LocallyCommittedTabTransition;
 
   /**
    * 根页面标签页开关以路由表为准，避免 flow model 里的旧配置覆盖路由管理设置。
@@ -75,14 +126,277 @@ export class PageModel extends FlowModel<PageModelStructure> {
     return !!this.props.enableTabs;
   }
 
-  private getActiveTabKey(): string | undefined {
+  private getAllTabs(): BasePageTabModel[] {
+    return this.subModels?.tabs || [];
+  }
+
+  private getUnhiddenTabs(): BasePageTabModel[] {
+    return this.getAllTabs().filter((tab) => !tab.hidden);
+  }
+
+  private getRequestedTabKey(): RequestedTabKey {
     const viewParams = this.context.view?.navigation?.viewParams;
     if (viewParams) {
-      return viewParams.tabUid || this.getFirstTab()?.uid;
+      const urlKey = typeof viewParams.tabUid === 'string' && viewParams.tabUid ? viewParams.tabUid : undefined;
+      if (urlKey) {
+        this.implicitActiveKey = undefined;
+        return { key: urlKey, source: 'url' };
+      }
+
+      const activeKey =
+        typeof this.props.tabActiveKey === 'string' && this.props.tabActiveKey ? this.props.tabActiveKey : undefined;
+      if (activeKey && activeKey === this.implicitActiveKey) {
+        return { key: activeKey, source: 'implicit' };
+      }
+      return { source: 'none' };
+    }
+
+    const activeKey =
+      typeof this.props.tabActiveKey === 'string' && this.props.tabActiveKey ? this.props.tabActiveKey : undefined;
+    if (!activeKey) {
+      return { source: 'none' };
+    }
+    return { key: activeKey, source: activeKey === this.implicitActiveKey ? 'implicit' : 'props' };
+  }
+
+  private resolveTabActiveState(): TabActiveResolution {
+    const allTabs = this.getAllTabs();
+    const unhiddenTabs = this.getUnhiddenTabs();
+    const requested = this.getRequestedTabKey();
+
+    if (!requested.key) {
+      return {
+        ...requested,
+        status: 'unspecified',
+        effectiveKey: unhiddenTabs[0]?.uid,
+        allTabs,
+        unhiddenTabs,
+      };
+    }
+
+    const requestedTab = allTabs.find((tab) => tab.uid === requested.key);
+    if (requested.source === 'implicit' && (!requestedTab || requestedTab.hidden)) {
+      return {
+        ...requested,
+        status: 'unspecified',
+        effectiveKey: unhiddenTabs[0]?.uid,
+        allTabs,
+        unhiddenTabs,
+      };
+    }
+
+    if (!requestedTab) {
+      return {
+        ...requested,
+        status: 'unknown',
+        effectiveKey: requested.key,
+        allTabs,
+        unhiddenTabs,
+      };
+    }
+
+    if (unhiddenTabs.some((tab) => tab.uid === requested.key)) {
+      return {
+        ...requested,
+        status: 'visible',
+        effectiveKey: requested.key,
+        allTabs,
+        unhiddenTabs,
+      };
+    }
+
+    return {
+      ...requested,
+      status: 'hidden',
+      effectiveKey: requested.key,
+      allTabs,
+      unhiddenTabs,
+    };
+  }
+
+  private getActiveTabKey(): string | undefined {
+    if (!this.getEnableTabs()) {
+      const firstTabKey = this.getFirstTab()?.uid;
+      if (firstTabKey) {
+        return firstTabKey;
+      }
+    }
+    return this.resolveTabActiveState().effectiveKey;
+  }
+
+  private getTabActiveKeySyncDependency() {
+    const allTabs = this.getAllTabs();
+    const unhiddenTabs = this.getUnhiddenTabs();
+    const viewParams = this.context.view?.navigation?.viewParams;
+    return JSON.stringify([
+      !!this.context.flowSettingsEnabled,
+      viewParams ? viewParams.tabUid || null : null,
+      this.props.tabActiveKey || null,
+      allTabs.map((tab) => tab.uid),
+      unhiddenTabs.map((tab) => tab.uid),
+      this.implicitActiveKey || null,
+    ]);
+  }
+
+  private requestDocumentTitleUpdate(preferredActiveTabKey?: string, retryCount = 0) {
+    this.updateDocumentTitle(preferredActiveTabKey, retryCount).catch((error) => {
+      console.warn('[PageModel] Failed to update document title', error);
+    });
+  }
+
+  private rememberImplicitActiveKey(activeKey: string) {
+    this.implicitActiveKey = activeKey;
+    if (this.props.tabActiveKey !== activeKey) {
+      this.setProps('tabActiveKey', activeKey);
+    }
+  }
+
+  private commitTabActiveKey(
+    activeKey: string | undefined,
+    options: {
+      previousActiveKey?: string;
+      navigate: boolean;
+      preserveImplicitKey?: boolean;
+      rememberLocalTransition?: boolean;
+    },
+  ) {
+    const { previousActiveKey, navigate, preserveImplicitKey = false, rememberLocalTransition = false } = options;
+    if (rememberLocalTransition && activeKey) {
+      this.locallyCommittedTabTransition = { activeKey, previousActiveKey };
+    }
+    this.implicitActiveKey = activeKey && preserveImplicitKey ? activeKey : undefined;
+
+    if (navigate) {
+      this.context.view?.navigation?.changeTo?.({ tabUid: activeKey });
+    }
+
+    if (activeKey && activeKey !== previousActiveKey) {
+      this.invokeTabModelLifecycleMethod(activeKey, 'onActive');
+    }
+    if (previousActiveKey && previousActiveKey !== activeKey) {
+      this.invokeTabModelLifecycleMethod(previousActiveKey, 'onInactive');
+    }
+    this.setProps('tabActiveKey', activeKey);
+
+    if (!activeKey) {
+      this.requestDocumentTitleUpdate();
+    }
+  }
+
+  private consumeLocallyCommittedTabTransition(previousActiveKey: string | undefined, activeKey: string | undefined) {
+    const transition = this.locallyCommittedTabTransition;
+    if (!transition || !activeKey) {
+      return false;
+    }
+    if (transition.activeKey === activeKey && transition.previousActiveKey === previousActiveKey) {
+      this.locallyCommittedTabTransition = undefined;
+      return true;
     }
-    return this.props.tabActiveKey || this.getFirstTab()?.uid;
+    if (activeKey !== transition.previousActiveKey) {
+      this.locallyCommittedTabTransition = undefined;
+    }
+    return false;
   }
 
+  private synchronizeTabActiveKey = (state: TabActiveKeySyncState): TabActiveKeySyncState => {
+    const resolution = this.resolveTabActiveState();
+    const allHidden = resolution.allTabs.length > 0 && resolution.unhiddenTabs.length === 0;
+    const createNextState = (effectiveActiveKey: string | undefined, lastCorrectionSignature?: string) => ({
+      previousEffectiveActiveKey: effectiveActiveKey,
+      effectiveActiveKey,
+      previousAllHidden: allHidden,
+      lastCorrectionSignature,
+    });
+
+    if (resolution.status === 'unknown') {
+      return createNextState(resolution.effectiveKey);
+    }
+
+    if (resolution.status === 'visible') {
+      const activeKey = resolution.effectiveKey;
+      if (this.consumeLocallyCommittedTabTransition(state.previousEffectiveActiveKey, activeKey)) {
+        return createNextState(activeKey);
+      }
+      const shouldActivateAfterRestore = state.previousAllHidden && resolution.source !== 'url';
+      const shouldSyncChangedVisibleKey =
+        !!state.previousEffectiveActiveKey && state.previousEffectiveActiveKey !== activeKey;
+      if ((shouldActivateAfterRestore || shouldSyncChangedVisibleKey) && activeKey) {
+        const signature = `visible:${resolution.source}:${state.previousEffectiveActiveKey || ''}->${activeKey}`;
+        if (signature !== state.lastCorrectionSignature) {
+          this.commitTabActiveKey(activeKey, {
+            previousActiveKey: state.previousEffectiveActiveKey,
+            navigate: false,
+            preserveImplicitKey: resolution.source === 'implicit',
+          });
+        }
+        return createNextState(activeKey, signature);
+      }
+      return createNextState(activeKey);
+    }
+
+    if (resolution.status === 'hidden') {
+      const activeKey = resolution.effectiveKey;
+      if (this.consumeLocallyCommittedTabTransition(state.previousEffectiveActiveKey, activeKey)) {
+        return createNextState(activeKey);
+      }
+      if (activeKey && state.previousEffectiveActiveKey !== activeKey) {
+        const signature = `hidden:${resolution.source}:${state.previousEffectiveActiveKey || ''}->${activeKey}`;
+        if (signature !== state.lastCorrectionSignature) {
+          this.commitTabActiveKey(activeKey, {
+            previousActiveKey: state.previousEffectiveActiveKey,
+            navigate: false,
+          });
+        }
+        return createNextState(activeKey, signature);
+      }
+      return createNextState(activeKey);
+    }
+
+    const activeKey = resolution.effectiveKey;
+    if (!activeKey) {
+      if (!allHidden) {
+        if (resolution.source !== 'implicit' || !resolution.key) {
+          return createNextState(undefined);
+        }
+        const signature = `implicit-missing:${state.previousEffectiveActiveKey || ''}`;
+        if (signature !== state.lastCorrectionSignature) {
+          this.commitTabActiveKey(undefined, {
+            previousActiveKey: state.previousEffectiveActiveKey,
+            navigate: false,
+          });
+        }
+        return createNextState(undefined, signature);
+      }
+      const signature = `all-hidden:${state.previousEffectiveActiveKey || ''}`;
+      if (!state.previousAllHidden && signature !== state.lastCorrectionSignature) {
+        this.implicitActiveKey = undefined;
+        if (this.props.tabActiveKey || state.previousEffectiveActiveKey) {
+          this.commitTabActiveKey(undefined, {
+            previousActiveKey: state.previousEffectiveActiveKey,
+            navigate: false,
+          });
+        } else {
+          this.requestDocumentTitleUpdate();
+        }
+      }
+      return createNextState(undefined, signature);
+    }
+
+    const shouldSwitchImplicitActiveKey =
+      state.previousAllHidden || (!!state.previousEffectiveActiveKey && state.previousEffectiveActiveKey !== activeKey);
+    const signature = `implicit:${state.previousEffectiveActiveKey || ''}->${activeKey}`;
+    if (shouldSwitchImplicitActiveKey && signature !== state.lastCorrectionSignature) {
+      this.commitTabActiveKey(activeKey, {
+        previousActiveKey: state.previousEffectiveActiveKey,
+        navigate: false,
+        preserveImplicitKey: true,
+      });
+    } else {
+      this.rememberImplicitActiveKey(activeKey);
+    }
+    return createNextState(activeKey, shouldSwitchImplicitActiveKey ? signature : undefined);
+  };
+
   private scheduleActiveLifecycleRefresh(forceRefresh = false): void {
     if (this.dirtyRefreshScheduled) return;
     this.dirtyRefreshScheduled = true;
@@ -107,7 +421,7 @@ export class PageModel extends FlowModel<PageModelStructure> {
   }
 
   deactivateCurrentTab() {
-    const activeKey = this.props.tabActiveKey || this.getFirstTab()?.uid;
+    const activeKey = this.getActiveTabKey();
     if (activeKey) {
       this.invokeTabModelLifecycleMethod(activeKey, 'onInactive');
     }
@@ -116,9 +430,10 @@ export class PageModel extends FlowModel<PageModelStructure> {
   onMount(): void {
     super.onMount();
     this.unmounted = false;
+    this.implicitActiveKey = undefined;
     this.setProps('tabActiveKey', this.context.view.inputArgs?.tabUid);
     if (this.context?.pageInfo) this.context.pageInfo.version = 'v2';
-    void this.updateDocumentTitle();
+    this.requestDocumentTitleUpdate();
 
     // When a nested view (popup/page) is closed, the opener view becomes active again.
     // We align this with the existing tab lifecycle by invoking `onActive` for the current tab blocks.
@@ -189,7 +504,7 @@ export class PageModel extends FlowModel<PageModelStructure> {
     }
 
     if (method === 'onActive') {
-      void this.updateDocumentTitle(tabActiveKey);
+      this.requestDocumentTitleUpdate(tabActiveKey);
     }
   }
 
@@ -236,11 +551,15 @@ export class PageModel extends FlowModel<PageModelStructure> {
       }
     };
 
+    const unhiddenTabs = this.getUnhiddenTabs();
+    const activeTabKey = preferredActiveTabKey || this.getActiveTabKey();
+    const shouldUsePageTitle = !this.getEnableTabs() || (!activeTabKey && unhiddenTabs.length === 0);
+
     let nextTitle = '';
-    if (this.getEnableTabs()) {
-      const activeTabKey = preferredActiveTabKey || this.getActiveTabKey();
+    if (!shouldUsePageTitle) {
       const activeTabModel = activeTabKey
-        ? (this.flowEngine.getModel(activeTabKey) as BasePageTabModel | undefined)
+        ? this.findSubModel('tabs', (model) => model.uid === activeTabKey) ||
+          (this.flowEngine.getModel(activeTabKey) as BasePageTabModel | undefined)
         : this.getFirstTab();
       if (!activeTabModel && retryCount < 5) {
         window.setTimeout(() => {
@@ -251,7 +570,7 @@ export class PageModel extends FlowModel<PageModelStructure> {
           if (updateVersion !== this.documentTitleUpdateVersion) {
             return;
           }
-          void this.updateDocumentTitle(activeTabKey, retryCount + 1);
+          this.requestDocumentTitleUpdate(activeTabKey, retryCount + 1);
         }, 0);
         return;
       }
@@ -293,33 +612,31 @@ export class PageModel extends FlowModel<PageModelStructure> {
 
   mapTabs() {
     return this.mapSubModels('tabs', (model) => {
-      return !this.context.flowSettingsEnabled && model.hidden
-        ? null
-        : {
-            key: model.uid,
-            label: (
-              <Droppable model={model}>
-                <FlowModelRenderer
-                  model={model}
-                  showFlowSettings={{
-                    showBackground: true,
-                    showBorder: false,
-                    toolbarPosition: 'above',
-                    style: { transform: 'translateY(8px)' },
-                  }}
-                  extraToolbarItems={[
-                    {
-                      key: 'drag-handler',
-                      component: DragHandler,
-                      sort: 1,
-                    },
-                  ]}
-                />
-              </Droppable>
-            ),
-            children: model.renderChildren(),
-          };
-    }).filter(Boolean);
+      return {
+        key: model.uid,
+        label: (
+          <Droppable model={model}>
+            <FlowModelRenderer
+              model={model}
+              showFlowSettings={{
+                showBackground: true,
+                showBorder: false,
+                toolbarPosition: 'above',
+                style: { transform: 'translateY(8px)' },
+              }}
+              extraToolbarItems={[
+                {
+                  key: 'drag-handler',
+                  component: DragHandler,
+                  sort: 1,
+                },
+              ]}
+            />
+          </Droppable>
+        ),
+        children: model.renderChildren(),
+      };
+    });
   }
 
   getFirstTab() {
@@ -336,6 +653,17 @@ export class PageModel extends FlowModel<PageModelStructure> {
   }
 
   renderTabs() {
+    const activeState = this.resolveTabActiveState();
+    const tabItems = this.mapTabs();
+    const hiddenTabKeys = new Set(
+      this.context.flowSettingsEnabled ? [] : activeState.allTabs.filter((tab) => tab.hidden).map((tab) => tab.uid),
+    );
+    const hiddenActiveTabLabel =
+      activeState.status === 'hidden'
+        ? activeState.allTabs.find((tab) => tab.uid === activeState.effectiveKey)?.getTabTitle?.()
+        : undefined;
+    const tabsActiveKey =
+      activeState.effectiveKey || (activeState.allTabs.length > 0 ? NO_ACTIVE_PAGE_TAB_KEY : undefined);
     const tabNavPaddingInlineStart = this.context.themeToken?.paddingLG ?? 16;
     const leftExtraContent =
       this.tabBarExtraContent.left !== undefined ? (
@@ -366,25 +694,31 @@ export class PageModel extends FlowModel<PageModelStructure> {
 
     return (
       <DndProvider onDragEnd={this.handleDragEnd.bind(this)}>
+        <TabActiveKeySync dependencyKey={this.getTabActiveKeySyncDependency()} onSync={this.synchronizeTabActiveKey} />
         <Tabs
-          activeKey={
-            this.context.view?.navigation?.viewParams
-              ? this.context.view.navigation.viewParams.tabUid || this.getFirstTab()?.uid
-              : this.props.tabActiveKey
-          }
+          activeKey={tabsActiveKey}
           tabBarStyle={this.props.tabBarStyle}
-          items={this.mapTabs()}
+          items={tabItems}
+          renderTabBar={
+            hiddenTabKeys.size > 0
+              ? (tabBarProps) => (
+                  <FilteredPageTabBar
+                    hiddenTabKeys={hiddenTabKeys}
+                    hiddenActiveTabLabel={hiddenActiveTabLabel}
+                    items={tabItems}
+                    tabBarProps={tabBarProps}
+                  />
+                )
+              : undefined
+          }
           onChange={(activeKey) => {
-            const previousActiveKey = this.props.tabActiveKey || this.getActiveTabKey();
-            this.context.view.navigation?.changeTo?.({
-              tabUid: activeKey,
+            const previousActiveKey = this.getActiveTabKey();
+            this.implicitActiveKey = undefined;
+            this.commitTabActiveKey(activeKey, {
+              previousActiveKey,
+              navigate: !!this.context.view?.navigation,
+              rememberLocalTransition: true,
             });
-
-            this.invokeTabModelLifecycleMethod(activeKey, 'onActive');
-            if (previousActiveKey && previousActiveKey !== activeKey) {
-              this.invokeTabModelLifecycleMethod(previousActiveKey, 'onInactive');
-            }
-            this.setProps('tabActiveKey', activeKey);
           }}
           // destroyInactiveTabPane
           tabBarExtraContent={{
@@ -527,7 +861,7 @@ PageModel.registerFlow({
             marginBottom: 0,
           });
         }
-        void (ctx.model as PageModel).updateDocumentTitle();
+        await (ctx.model as PageModel).updateDocumentTitle();
       },
     },
   },

package/src/flow/models/base/PageModel/PageModelTabBar.tsx

@@ -0,0 +1,114 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Tabs } from 'antd';
+import type { TabsProps } from 'antd';
+import React from 'react';
+
+export const NO_ACTIVE_PAGE_TAB_KEY = '__no_active_page_tab__';
+
+type RenderTabBar = NonNullable<React.ComponentProps<typeof Tabs>['renderTabBar']>;
+type PageTabItem = NonNullable<TabsProps['items']>[number];
+
+type FilteredPageTabBarProps = {
+  hiddenTabKeys: Set<string>;
+  hiddenActiveTabLabel?: React.ReactNode;
+  items: PageTabItem[];
+  tabBarProps: Parameters<RenderTabBar>[0];
+};
+
+export function FilteredPageTabBar({
+  hiddenTabKeys,
+  hiddenActiveTabLabel,
+  items,
+  tabBarProps,
+}: FilteredPageTabBarProps) {
+  // Keep the outer Tabs instance responsible for every pane, while a navigation-only Tabs instance
+  // receives only visible items. This avoids relying on the rc-tabs Context instance bundled by antd.
+  const visibleItems = items
+    .filter((item) => !hiddenTabKeys.has(String(item.key)))
+    .map(
+      ({
+        children: _children,
+        className: _className,
+        destroyInactiveTabPane: _destroyInactiveTabPane,
+        forceRender: _forceRender,
+        style: _style,
+        ...item
+      }) => ({
+        ...item,
+        children: null,
+      }),
+    );
+  const activeKey = visibleItems.some((item) => item.key === tabBarProps.activeKey)
+    ? tabBarProps.activeKey
+    : NO_ACTIVE_PAGE_TAB_KEY;
+  const firstFocusableTabKey = visibleItems.find((item) => !item.disabled)?.key;
+  const hiddenActiveTabKey = hiddenTabKeys.has(String(tabBarProps.activeKey))
+    ? String(tabBarProps.activeKey)
+    : undefined;
+  const hiddenActiveTabLabelId =
+    hiddenActiveTabKey && tabBarProps.id ? `${tabBarProps.id}-tab-${hiddenActiveTabKey}` : undefined;
+  const renderTabNode = (node: React.ReactElement) => {
+    const tabKey = String(node.key);
+    if (activeKey !== NO_ACTIVE_PAGE_TAB_KEY || tabKey !== String(firstFocusableTabKey)) {
+      return node;
+    }
+    let tabButtonFound = false;
+    const children = React.Children.map(
+      (node.props as { children?: React.ReactNode }).children,
+      (child: React.ReactNode) => {
+        if (tabButtonFound || !React.isValidElement(child)) {
+          return child;
+        }
+        const childProps = child.props as {
+          role?: string;
+          tabIndex?: number | null;
+        };
+        if (childProps.role !== 'tab') {
+          return child;
+        }
+        tabButtonFound = true;
+        return React.cloneElement(child as React.ReactElement<typeof childProps>, {
+          tabIndex: 0,
+        });
+      },
+    );
+    return React.cloneElement(node, undefined, children);
+  };
+
+  return (
+    <>
+      {hiddenActiveTabLabelId ? (
+        <span id={hiddenActiveTabLabelId} hidden>
+          {hiddenActiveTabLabel || hiddenActiveTabKey}
+        </span>
+      ) : null}
+      <Tabs
+        activeKey={NO_ACTIVE_PAGE_TAB_KEY}
+        animated={{ inkBar: tabBarProps.animated.inkBar, tabPane: false }}
+        destroyInactiveTabPane
+        id={tabBarProps.id}
+        items={visibleItems}
+        more={tabBarProps.more}
+        onTabClick={(key, event) => tabBarProps.onTabClick(key, event)}
+        onTabScroll={tabBarProps.onTabScroll}
+        renderTabBar={(navigationTabBarProps, NavigationDefaultTabBar) => (
+          <NavigationDefaultTabBar {...navigationTabBarProps} activeKey={activeKey}>
+            {renderTabNode}
+          </NavigationDefaultTabBar>
+        )}
+        tabBarExtraContent={tabBarProps.extra}
+        tabBarGutter={tabBarProps.tabBarGutter}
+        tabBarStyle={tabBarProps.style}
+        tabPosition={tabBarProps.tabPosition}
+      />
+    </>
+  );
+}