Merge pull request #116 from Canner/master

add navwrapper function

README.md

@@ -115,6 +115,12 @@ React.render(
         <th></th>
         <td>How to render tab content</td>
       </tr>
+      <tr>
+         <td>navWrapper</td>
+         <td>(tabContent: React.Node):React.Node</td>
+         <th></th>
+         <td>Wrapper function that will wrap around tab panes, whould be useful for features such as drag and drop</td>
+      </tr>
       <tr>
           <td>onChange</td>
           <td>(key: string): void</td>

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 {
         <Tabs
           renderTabBar={() => <ScrollableInkTabBar onTabClick={this.onTabClick}/>}
           renderTabContent={() => <TabContent animatedWithMargin />}
+          navWrapper={(content) => <Sortable>{content}</Sortable>}
           activeKey={this.state.activeKey}
           onChange={this.onChange}
         >

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"
   },

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 {
         <div className={`${prefixCls}-nav-wrap`} ref={this.saveRef('navWrap')}>
           <div className={`${prefixCls}-nav-scroll`}>
             <div className={navClasses} ref={this.saveRef('nav')}>
-              {content}
+              {navWrapper(content)}
             </div>
           </div>
         </div>

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: {},
 };