Add activeTabKey for PageHeader

src/components/PageHeader/demo/standard.md

@@ -88,6 +88,7 @@ ReactDOM.render(
       extraContent={extra}
       breadcrumbList={breadcrumbList}
       tabList={tabList}
+      tabActiveKey="detail"
       onTabChange={onTabChange}
     />
   </div>

src/components/PageHeader/demo/structure.md

@@ -34,6 +34,7 @@ ReactDOM.render(
       extraContent={<div className="extraContent">extraContent</div>}
       breadcrumbList={breadcrumbList}
       tabList={tabList}
+      tabActiveKey="1"
     />
   </div>
 , mountNode);

src/components/PageHeader/index.d.ts

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

src/components/PageHeader/index.js

@@ -60,6 +60,7 @@ export default class PageHeader extends PureComponent {
     const {
       title, logo, action, content, extraContent,
       breadcrumbList, tabList, className, linkElement = 'a',
+      activeTabKey,
     } = this.props;
     const clsString = classNames(styles.pageHeader, className);
     let breadcrumb;
@@ -120,7 +121,10 @@ export default class PageHeader extends PureComponent {
       breadcrumb = null;
     }
 
-    const tabDefaultValue = tabList && (tabList.filter(item => item.default)[0] || tabList[0]);
+    let tabDefaultValue;
+    if (activeTabKey !== undefined && tabList) {
+      tabDefaultValue = tabList.filter(item => item.default)[0] || tabList[0];
+    }
 
     return (
       <div className={clsString}>
@@ -144,6 +148,7 @@ export default class PageHeader extends PureComponent {
           <Tabs
             className={styles.tabs}
             defaultActiveKey={(tabDefaultValue && tabDefaultValue.key)}
+            activeKey={activeTabKey}
             onChange={this.onChange}
           >
             {

src/components/PageHeader/index.md

@@ -22,6 +22,7 @@ order: 11
 | params | 面包屑相关属性，路由的参数 | object | - |
 | breadcrumbList | 面包屑数据，配置了 `routes` `params` 时此属性无效 | array<{title: ReactNode, href?: string}> | - |
 | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | -  |
+| tabActiveKey | 当前高亮的 tab 项 | string | -  |
 | onTabChange | 切换面板的回调 | (key) => void | -  |
 | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
 

src/routes/List/List.js

@@ -48,7 +48,7 @@ export default class SearchList extends Component {
       </div>
     );
 
-    const { match, routerData } = this.props;
+    const { match, routerData, location } = this.props;
     const routes = getRoutes(match.path, routerData);
 
     return (
@@ -56,6 +56,7 @@ export default class SearchList extends Component {
         title="搜索列表"
         content={mainSearch}
         tabList={tabList}
+        activeTabKey={location.pathname.replace(`${match.path}/`, '')}
         onTabChange={this.handleTabChange}
       >
         <Switch>