Add the defaultActiveTabKey property for the Card component (#9526)

* Add the defaultActiveTabKey property for the Card component (close #8789, #8942) * `activeTabKey` should be added * Improve * Fix large tabs font size, close #9509 * docs: Add TreeSelect[dropdownClassName] * Fix passing dropdownClassName to tree-select * build: update remark-parse requirement to ^5.0.0 (#9545) Updates the requirements on [remark-parse](https://github.com/remarkjs/remark) to permit the latest version. - [Release notes](https://github.com/remarkjs/remark/releases) - [Commits](https://github.com/remarkjs/remark/commits/remark@5.0.0) Signed-off-by: dependabot[bot] <support@dependabot.com> * add Tooltip contextMenu doc * Improve Grid and Layout type definition * fix: focus editor (#9548) * Fix test case for new jsdom (#9527) * Fix test case for new jsdom * use setTimeout as raf in jest jsdom * Fix cancelAnimationFrame * Add comment for jestjs/jest#5147 * longer timeout * fix snap * upgrade antd-tools * Update typescript requirement to ~2.7.2 (#9522) Updates the requirements on [typescript](https://github.com/Microsoft/TypeScript) to permit the latest version. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/commits/v2.7.2) Signed-off-by: dependabot[bot] <support@dependabot.com> * Fix a ts error * build: update react-slick requirement to ~0.20.0 (#9543) Updates the requirements on [react-slick](https://github.com/akiran/react-slick) to permit the latest version. - [Changelog](https://github.com/akiran/react-slick/blob/master/CHANGELOG.md) - [Commits](https://github.com/akiran/react-slick/commits) Signed-off-by: dependabot[bot] <support@dependabot.com> * Fix test cases * site: fix intersection-observer polyfill * docs: update recommendation * Fix typo WeexPickerProps -> WeekPickerProps (#9564) * use lodash * Fixed typo on Visualization rules (#9575) Style of a navigation should conform to the its level. should be Style of a navigation should conform to its level. * Improve Radio/Checkbox type definition Close #9574 * Remove AbstractCheckboxChangeEvent, fix TS4029 error See microsoft/TypeScript#9944 * Update index.en-US.md (#9579) * add transitionName from message.config (#9580) * add transitionName from message.config * Update index.en-US.md (#9579) * modify doc * build: update react-virtualized requirement to ~9.18.5 (#9544) Updates the requirements on [react-virtualized](https://github.com/bvaughn/react-virtualized) to permit the latest version. - [Changelog](https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md) - [Commits](https://github.com/bvaughn/react-virtualized/commits/9.18.5) Signed-off-by: dependabot[bot] <support@dependabot.com> * When treeNode is disabled, its switcher is highlight and clickabled (#9539) * When treeNode is disabled, its switcher is highlight and clickabled * rc-tree@1.7.11 * Fix moment require (#9528) Fix #9502 * Update snapshot
ant-design · Mar 10, 2018 · 30fe88d · 30fe88d
1 parent fe4d294
commit 30fe88d
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 18 deletions.
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -616,8 +616,8 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
                   />
                   <div
                     aria-disabled="false"
-                    aria-selected="true"
-                    class="ant-tabs-tab-active ant-tabs-tab"
+                    aria-selected="false"
+                    class=" ant-tabs-tab"
                     role="tab"
                   >
                     tab1
@@ -637,11 +637,11 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
         </div>
         <div
           class="ant-tabs-content ant-tabs-content-animated"
-          style="margin-left:0%"
+          style="display:none"
         >
           <div
-            aria-hidden="false"
-            class="ant-tabs-tabpane ant-tabs-tabpane-active"
+            aria-hidden="true"
+            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
             role="tabpanel"
           />
           <div
@@ -713,16 +713,16 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
                   />
                   <div
                     aria-disabled="false"
-                    aria-selected="true"
-                    class="ant-tabs-tab-active ant-tabs-tab"
+                    aria-selected="false"
+                    class=" ant-tabs-tab"
                     role="tab"
                   >
                     article
                   </div>
                   <div
                     aria-disabled="false"
-                    aria-selected="false"
-                    class=" ant-tabs-tab"
+                    aria-selected="true"
+                    class="ant-tabs-tab-active ant-tabs-tab"
                     role="tab"
                   >
                     app
@@ -742,16 +742,16 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
         </div>
         <div
           class="ant-tabs-content ant-tabs-content-animated"
-          style="margin-left:0%"
+          style="margin-left:-100%"
         >
           <div
-            aria-hidden="false"
-            class="ant-tabs-tabpane ant-tabs-tabpane-active"
+            aria-hidden="true"
+            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
             role="tabpanel"
           />
           <div
-            aria-hidden="true"
-            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+            aria-hidden="false"
+            class="ant-tabs-tabpane ant-tabs-tabpane-active"
             role="tabpanel"
           />
           <div
@@ -766,7 +766,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
       class="ant-card-body"
     >
       <p>
-        article content
+        app content
       </p>
     </div>
   </div>

diff --git a/components/card/demo/tabs.md b/components/card/demo/tabs.md
@@ -49,7 +49,7 @@ const contentListNoTitle = {
 class TabsCard extends React.Component {
   state = {
     key: 'tab1',
-    noTitleKey: 'article',
+    noTitleKey: 'app',
   }
   onTabChange = (key, type) => {
     console.log(key, type);
@@ -71,6 +71,7 @@ class TabsCard extends React.Component {
         <Card
           style={{ width: '100%' }}
           tabList={tabListNoTitle}
+          activeTabKey={this.state.noTitleKey}
           onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }}
         >
           {contentListNoTitle[this.state.noTitleKey]}

diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
@@ -29,6 +29,8 @@ A card can be used to display content related to a single subject. The content c
 | hoverable | Lift up when hovering card | boolean | false |
 | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |
 | tabList | List of TabPane's head. | Array&lt;{key: string, tab: ReactNode}> | - |
+| activeTabKey | Current TabPane's key | string | - |
+| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - |
 | title | Card title | string\|ReactNode | - |
 | type | Card style type, can be set to `inner` or not set | string | - |
 | onTabChange | Callback when tab is switched | (key) => void | - |

diff --git a/components/card/index.tsx b/components/card/index.tsx
@@ -36,6 +36,8 @@ export interface CardProps {
   actions?: Array<React.ReactNode>;
   tabList?: CardTabListType[];
   onTabChange?: (key: string) => void;
+  activeTabKey?: string;
+  defaultActiveTabKey?: string;
 }
 
 export default class Card extends React.Component<CardProps, {}> {
@@ -123,7 +125,7 @@ export default class Card extends React.Component<CardProps, {}> {
   render() {
     const {
       prefixCls = 'ant-card', className, extra, bodyStyle, noHovering, hoverable, title, loading,
-      bordered = true, type, cover, actions, tabList, children, ...others,
+      bordered = true, type, cover, actions, tabList, children, activeTabKey, defaultActiveTabKey, ...others,
     } = this.props;
 
     const classString = classNames(prefixCls, className, {
@@ -160,9 +162,21 @@ export default class Card extends React.Component<CardProps, {}> {
       </div>
     );
 
+    const hasActiveTabKey = activeTabKey !== undefined;
+    const extraProps = {
+      [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
+        ? activeTabKey
+        : defaultActiveTabKey,
+    };
+
     let head;
     const tabs = tabList && tabList.length ? (
-      <Tabs className={`${prefixCls}-head-tabs`} size="large" onChange={this.onTabChange}>
+      <Tabs
+        {...extraProps}
+        className={`${prefixCls}-head-tabs`}
+        size="large"
+        onChange={this.onTabChange}
+      >
         {tabList.map(item => <Tabs.TabPane tab={item.tab} key={item.key} />)}
       </Tabs>
     ) : null;

diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
@@ -30,6 +30,8 @@ cols: 1
 | hoverable | 鼠标移过时可浮起 | boolean | false |
 | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
 | tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - |
+| activeTabKey | 当前激活页签的 key | string | - |
+| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 |
 | title | 卡片标题 | string\|ReactNode | - |
 | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
 | onTabChange | 页签切换的回调 | (key) => void | - |