diff --git a/components/index.tsx b/components/index.tsx index 48fc53d391..5db2da34d1 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -1,2 +1,3 @@ -import Affix from './affix'; -export { Affix }; \ No newline at end of file +export { default as Affix } from './affix'; + +export { default as Tabs } from './Tabs'; diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index f06543682c..953c7db6ce 100644 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -1,19 +1,61 @@ import RcTabs from 'rc-tabs'; -import React, { cloneElement } from 'react'; +// import React, { cloneElement } from 'react'; +import * as React from 'react'; + +const {cloneElement} = React; + import classNames from 'classnames'; + import Icon from '../icon'; -export default class Tabs extends React.Component { - static TabPane = RcTabs.TabPane; +type TabsType = 'line' | 'card' | 'editable-card' +type TabsPosition = 'top' | 'right' | 'bottom' | 'left'; + +export interface TabsProps { + /** 当前激活 tab 面板的 key */ + activeKey?: string; + /** 初始化选中面板的 key,如果没有设置 activeKey*/ + defaultActiveKey?: string; + /** 是否隐藏加号图标,在 `type="editable-card"` 时有效 */ + hideAdd?: boolean; + /** 切换面板的回调*/ + onChange?: (activeKey: string) => void; + /** tab 被点击的回调 */ + onTabClick?: Function; + /** tab bar 上额外的元素 */ + tabBarExtraContent?: React.ReactNode; + /** 页签的基本样式,可选 `line`、`card` `editable-card` 类型*/ + type?: TabsType; + /** 页签位置,可选值有 `top` `right` `bottom` `left`*/ + tabPosition?: TabsPosition; + /** 新增和删除页签的回调,在 `type="editable-card"` 时有效*/ + onEdit?: (targetKey: string, action: any) => void; + /** 大小,提供 default 和 small 两种大小 */ + size?: 'default' | 'small'; + + style?: React.CSSProperties; +} + + +// Tabs +export interface TabPaneProps { + /** 选项卡头显示文字*/ + tab: React.ReactNode | string; + + style?: React.CSSProperties; +} + +export default class Tabs extends React.Component { + static TabPane: TabPaneProps = RcTabs.TabPane; static defaultProps = { prefixCls: 'ant-tabs', animation: 'slide-horizontal', type: 'line', // or 'card' 'editable-card' - onChange() {}, - onEdit() {}, + onChange() { }, + onEdit() { }, hideAdd: false, - } + }; createNewTab = (targetKey) => { this.props.onEdit(targetKey, 'add'); @@ -33,7 +75,7 @@ export default class Tabs extends React.Component { render() { let { prefixCls, size, tabPosition, animation, type, - children, tabBarExtraContent, hideAdd } = this.props; + children, tabBarExtraContent, hideAdd } = this.props; let className = classNames({ [this.props.className]: !!this.props.className, [`${prefixCls}-mini`]: size === 'small' || size === 'mini', @@ -50,7 +92,7 @@ export default class Tabs extends React.Component { return cloneElement(child, { tab:
{child.props.tab} - this.removeTab(child.key, e)} /> + this.removeTab(child.key, e) } />
, key: child.key || index, }); @@ -78,7 +120,7 @@ export default class Tabs extends React.Component { tabBarExtraContent={tabBarExtraContent} onChange={this.handleChange} animation={animation} - > + > {children} );