diff --git a/README.md b/README.md
index fcbfd478..cd249b04 100644
--- a/README.md
+++ b/README.md
@@ -115,6 +115,12 @@ React.render(
|
How to render tab content |
+
+ navWrapper |
+ (tabContent: React.Node):React.Node |
+ |
+ Wrapper function that will wrap around tab panes, whould be useful for features such as drag and drop |
+
onChange |
(key: string): void |
diff --git a/examples/activeKey.js b/examples/activeKey.js
index a8868671..15fe9135 100755
--- a/examples/activeKey.js
+++ b/examples/activeKey.js
@@ -1,6 +1,7 @@
/* eslint react/no-multi-comp:0, no-console:0, react/prop-types:0 */
import 'rc-tabs/assets/index.less';
import React from 'react';
+import Sortable from 'react-sortablejs';
import ReactDOM from 'react-dom';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/SwipeableTabContent';
@@ -46,6 +47,7 @@ class Demo extends React.Component {
}
renderTabContent={() => }
+ navWrapper={(content) => {content}}
activeKey={this.state.activeKey}
onChange={this.onChange}
>
diff --git a/package.json b/package.json
index b7d9e78a..e69b004d 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,8 @@
"rc-tools": "6.x",
"react": "^16.0.0",
"react-dom": "^16.0.0",
+ "react-sortablejs": "^1.3.6",
+ "sortablejs": "^1.7.0",
"react-router": "^3.0.0",
"react-test-renderer": "^16.0.0"
},
diff --git a/src/ScrollableTabBarMixin.js b/src/ScrollableTabBarMixin.js
index 237021ac..fcdabfc6 100755
--- a/src/ScrollableTabBarMixin.js
+++ b/src/ScrollableTabBarMixin.js
@@ -243,7 +243,7 @@ export default {
getScrollBarNode(content) {
const { next, prev } = this.state;
- const { prefixCls, scrollAnimated } = this.props;
+ const { prefixCls, scrollAnimated, navWrapper } = this.props;
const showNextPrev = prev || next;
const prevButton = (
@@ -299,7 +299,7 @@ export default {
- {content}
+ {navWrapper(content)}
diff --git a/src/Tabs.js b/src/Tabs.js
index 4857363f..7b8f208e 100755
--- a/src/Tabs.js
+++ b/src/Tabs.js
@@ -115,6 +115,7 @@ export default class Tabs extends React.Component {
const props = this.props;
const {
prefixCls,
+ navWrapper,
tabBarPosition, className,
renderTabContent,
renderTabBar,
@@ -131,6 +132,7 @@ export default class Tabs extends React.Component {
const contents = [
React.cloneElement(this.tabBar, {
prefixCls,
+ navWrapper,
key: 'tabBar',
onKeyDown: this.onNavKeyDown,
tabBarPosition,
@@ -167,6 +169,7 @@ Tabs.propTypes = {
destroyInactiveTabPane: PropTypes.bool,
renderTabBar: PropTypes.func.isRequired,
renderTabContent: PropTypes.func.isRequired,
+ navWrapper: PropTypes.func,
onChange: PropTypes.func,
children: PropTypes.any,
prefixCls: PropTypes.string,
@@ -181,6 +184,7 @@ Tabs.defaultProps = {
prefixCls: 'rc-tabs',
destroyInactiveTabPane: false,
onChange: noop,
+ navWrapper: arg => arg,
tabBarPosition: 'top',
style: {},
};