PageHeader support tabDefaultActiveKey

src/components/PageHeader/index.d.ts

@@ -10,6 +10,7 @@ export interface IPageHeaderProps {
   breadcrumbList?: Array<{ title: React.ReactNode; href?: string }>;
   tabList?: Array<{ key: string; tab: React.ReactNode }>;
   tabActiveKey?: string;
+  tabDefaultActiveKey?: string;
   onTabChange?: (key: string) => void;
   tabBarExtraContent?: React.ReactNode;
   linkElement?: React.ReactNode;

src/components/PageHeader/index.js

@@ -166,18 +166,15 @@ export default class PageHeader extends PureComponent {
       tabList,
       className,
       tabActiveKey,
+      tabDefaultActiveKey,
       tabBarExtraContent,
     } = this.props;
     const clsString = classNames(styles.pageHeader, className);
-
-    let tabDefaultValue;
-    if (tabActiveKey === undefined && tabList) {
-      tabDefaultValue = tabList.filter(item => item.default)[0] || tabList[0];
-    }
     const breadcrumb = this.conversionBreadcrumbList();
-    const activeKeyProps = {
-      defaultActiveKey: tabDefaultValue && tabDefaultValue.key,
-    };
+    const activeKeyProps = {};
+    if (tabDefaultActiveKey !== undefined) {
+      activeKeyProps.defaultActiveKey = tabDefaultActiveKey;
+    }
     if (tabActiveKey !== undefined) {
       activeKeyProps.activeKey = tabActiveKey;
     }

src/components/PageHeader/index.md

@@ -25,6 +25,7 @@ order: 11
 | breadcrumbNameMap | 面包屑相关属性，路由的地址-名称映射表 | object | - |
 | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | -  |
 | tabActiveKey | 当前高亮的 tab 项 | string | -  |
+| tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项  |
 | onTabChange | 切换面板的回调 | (key) => void | -  |
 | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |