Permalink
Browse files

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 facebook/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
  • Loading branch information...
u3u authored and afc163 committed Mar 10, 2018
1 parent fe4d294 commit 30fe88d4bdcec765bf92ca32a755d9646b36978e
@@ -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>
@@ -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]}
@@ -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 | - |
@@ -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;
@@ -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 | - |

0 comments on commit 30fe88d

Please sign in to comment.