refactor(Tabs): rewrite tabs

components/index.tsx

@@ -1,2 +1,3 @@
-import Affix from './affix';
-export { Affix };
+export { default as Affix } from './affix';
+
+export { default as Tabs } from './Tabs';

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<TabsProps, any> {
+  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: <div>
             {child.props.tab}
-            <Icon type="cross" onClick={(e) => this.removeTab(child.key, e)} />
+            <Icon type="cross" onClick={(e) => this.removeTab(child.key, e) } />
           </div>,
           key: child.key || index,
         });
@@ -78,7 +120,7 @@ export default class Tabs extends React.Component {
         tabBarExtraContent={tabBarExtraContent}
         onChange={this.handleChange}
         animation={animation}
-      >
+        >
         {children}
       </RcTabs>
     );