add tabs

packages/Tabs/README.md

+# `@wisdom-components/Tabs`
+
+> TODO: description
+
+## Usage
+
+```
+const tabs = require('@wisdom-components/Tabs');
+
+// TODO: DEMONSTRATE API
+```

packages/Tabs/package.json

+{
+  "name": "tabs",
+  "version": "1.0.0",
+  "description": "标签页",
+  "author": "tuqian <webtuqian@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/Tabs.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/Tabs/src/demos/Basic.js

+import React from 'react';
+import { Tabs, Button } from 'antd';
+import PandaTabs from '../index';
+
+const { TabPane } = Tabs;
+const { PandaTabPane } = PandaTabs;
+
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.newTabIndex = 0;
+    const panes = [
+      { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
+      { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
+      { title: 'Tab 3', content: 'Content of Tab Pane 3', key: '3' },
+      { title: 'Tab 4', content: 'Content of Tab Pane 4', key: '4' },
+    ];
+    this.state = {
+      activeKey: panes[0].key,
+      panes,
+    };
+  }
+
+  onChange = activeKey => {
+    this.setState({ activeKey });
+  };
+
+  onEdit = (targetKey, action) => {
+    this[action](targetKey);
+  };
+
+  add = () => {
+    const { panes } = this.state;
+    const activeKey = `newTab${this.newTabIndex++}`;
+    panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
+    this.setState({ panes, activeKey });
+  };
+
+  remove = targetKey => {
+    let { activeKey } = this.state;
+    let lastIndex;
+    this.state.panes.forEach((pane, i) => {
+      if (pane.key === targetKey) {
+        lastIndex = i - 1;
+      }
+    });
+    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
+    if (panes.length && activeKey === targetKey) {
+      if (lastIndex >= 0) {
+        activeKey = panes[lastIndex].key;
+      } else {
+        activeKey = panes[0].key;
+      }
+    }
+    this.setState({ panes, activeKey });
+  };
+
+  render() {
+    return (
+      <div>
+          <Tabs  hideAdd
+          onChange={this.onChange}
+          activeKey={this.state.activeKey}
+          type="editable-card"
+          onEdit={this.onEdit}
+          >
+          {this.state.panes.map(pane => (
+            <TabPane tab={pane.title} key={pane.key}>
+              {pane.content}
+            </TabPane>
+          ))}  
+          </Tabs>
+          
+        <div style={{ marginBottom: 16 }}>
+          <Button onClick={this.add}>ADD</Button>
+        </div>
+        <PandaTabs
+          hideAdd
+          onChange={this.onChange}
+          activeKey={this.state.activeKey}
+          type="editable-card"
+          onEdit={this.onEdit}
+        >
+          {this.state.panes.map(pane => (
+            <PandaTabPane tab={pane.title} key={pane.key}>
+              {pane.content}
+            </PandaTabPane>
+          ))}
+        </PandaTabs>
+      </div>
+    );
+  }
+}
+
+export default Demo;

packages/Tabs/src/index.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tabs } from 'antd';
+
+const PandaTabs = (props) => {
+    return <Tabs {...props}/>;
+};
+
+// PandaTabs.defaultProps = {
+//   activeKey: '', // 当前激活 tab 面板的 key
+//   addIcon: <></>, // 自定义添加按钮
+//   animated: false, // 是否使用动画切换 Tabs, 仅生效于 tabPosition="top"
+//   centered: false, // 标签居中展示
+//   defaultActiveKey: '', // 初始化选中面板的 key，如果没有设置 activeKey
+//   hideAdd: false, // 是否隐藏加号图标，在 type="editable-card" 时有效
+//   keyboard: true, // 开启键盘切换功能
+//   renderTabBar: (props, DefaultTabBar)=><></>, // 替换 TabBar，用于二次封装标签头
+//   size: 'default', // 大小，提供 large default 和 small 三种大小
+//   tabBarExtraContent: <></>, // tab bar 上额外的元素
+//   tabBarGutter: 0, // tabs 之间的间隙
+//   tabBarStyle: {}, // tab bar 的样式对象
+//   tabPosition: 'top', // 页签位置，可选值有 top right bottom left
+//   type: 'line', // 页签的基本样式，可选 line、card editable-card 类型
+//   onChange: (activeKey)=>{}, // 切换面板的回调
+//   onEdit: (targetKey, action)=>{}, // 新增和删除页签的回调，在 type="editable-card" 时有效
+//   onTabClick: function(key, event){}, // tab 被点击的回调
+//   onTabScroll: function({direction}){}, // tab 滚动时触发
+// };
+
+// PandaTabs.propTypes = {
+//   activeKey: PropTypes.string, // 当前激活 tab 面板的 key
+//   addIcon: PropTypes.element, // 自定义添加按钮
+//   animated: PropTypes.bool, // 是否使用动画切换 Tabs, 仅生效于 tabPosition="top"
+//   centered: PropTypes.bool, // 标签居中展示
+//   defaultActiveKey: PropTypes.string, // 初始化选中面板的 key，如果没有设置 activeKey
+//   hideAdd: PropTypes.bool, // 是否隐藏加号图标，在 type="editable-card" 时有效
+//   keyboard: PropTypes.bool, // 	开启键盘切换功能
+//   renderTabBar: PropTypes.func, // 替换 TabBar，用于二次封装标签头
+//   size: PropTypes.string, // 大小，提供 large default 和 small 三种大小
+//   tabBarExtraContent: PropTypes.element, // tab bar 上额外的元素
+//   tabBarGutter: PropTypes.number, // tabs 之间的间隙
+//   tabBarStyle: PropTypes.object, // tab bar 的样式对象
+//   tabPosition: PropTypes.string, // 页签位置，可选值有 top right bottom left
+//   type: PropTypes.string, // 页签的基本样式，可选 line、card editable-card 类型
+//   onChange: PropTypes.func, // 切换面板的回调
+//   onEdit: PropTypes.func, // 新增和删除页签的回调，在 type="editable-card" 时有效
+//   onTabClick: PropTypes.func, // tab 被点击的回调
+//   onTabScroll: PropTypes.func, // tab 滚动时触发
+// };
+
+PandaTabs.PandaTabPane = Tabs.TabPane;
+
+export default PandaTabs;
\ No newline at end of file

packages/Tabs/src/tabs.md

+---
+title: ProTabs - 标准标签页
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+# Tabs标签页
+选项卡切换组件。
+
+## 何时使用#
+提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
+
+Ant Design 依次提供了三级选项卡，分别用于不同的场景。
+
+- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
+
+- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
+
+- Radio.Button 可作为更次级的页签来使用。
+
+<code src="./demos/Basic.js">
+
+## API
+
+### Tabs
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| activeKey	| 当前激活 tab 面板的 key | <font color=#c41d7f>string</font> | - | |
+| addIcon	| 自定义添加按钮 | <font color=#c41d7f>ReactNode</font> | - | 4.4.0
+| animated	| 是否使用动画切换 Tabs, 仅生效于 tabPosition="top" | <font color=#c41d7f>boolean</font> | { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  | 
+| centered	| 标签居中展示 | <font color=#c41d7f>boolean</font> | false | 4.4.0
+| defaultActiveKey	| 初始化选中面板的 key，如果没有设置 activeKey | <font color=#c41d7f>string</font> | 第一个面板 |  | 
+| hideAdd	| 是否隐藏加号图标，在 type="editable-card" 时有效 | <font color=#c41d7f>boolean</font> | false |  | 
+| keyboard	| 开启键盘切换功能 | <font color=#c41d7f>boolean</font> | true |  | 
+| renderTabBar	| 替换 TabBar，用于二次封装标签头 | <font color=#c41d7f>(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement</font> | 	-	 |  | 
+| size	| 大小，提供 large default 和 small 三种大小 | <font color=#c41d7f>string</font> | default |  | 
+| tabBarExtraContent	| tab bar 上额外的元素 | <font color=#c41d7f>ReactNode</font> | {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0
+| tabBarGutter	| tabs 之间的间隙 | <font color=#c41d7f>number</font> | - |  | 	
+| tabBarStyle	| tab bar 的样式对象 | <font color=#c41d7f>object</font> | - |  | 
+| tabPosition	| 页签位置，可选值有 top right bottom left | <font color=#c41d7f>string</font> | top |  | 
+| type	| 页签的基本样式，可选 line、card editable-card 类型 | <font color=#c41d7f>string</font> | line |  | 	
+| onChange	| 切换面板的回调 | <font color=#c41d7f>function(activeKey) {}</font> | - |  | 	
+| onEdit	| 新增和删除页签的回调，在 type="editable-card" 时有效 | <font color=#c41d7f>(targetKey, action): void</font> | - |  | 	
+| onTabClick	| tab 被点击的回调 | <font color=#c41d7f>function(key: string, event: MouseEvent)</font> | - |  | 	
+| onTabScroll	| tab 滚动时触发 | <font color=#c41d7f>function({ direction: <code>left</code> | <code>right</code> | <code>top</code> | <code>bottom</code> })</font> | - | 4.3.0
+
+### Tabs.TabPane
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+|closeIcon | 自定义关闭图标，在 type="editable-card"时有效 | ReactNode | - | 
+|forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | 
+|key | 对应 activeKey | string | - | 
+|tab | 选项卡头显示文字 | ReactNode | - | 
\ No newline at end of file