From ab42e2fc417918b9b741b521ba43f5c53c94cd6a Mon Sep 17 00:00:00 2001
From: picodoth <pikaleize@gmail.com>
Date: Sun, 27 May 2018 20:04:19 +0800
Subject: [PATCH 1/8] refactor: rm mixin and react-create-class

---
 examples/antd.js                              |  46 +++-
 package.json                                  |   1 -
 src/InkTabBar.js                              |  46 ++--
 src/{InkTabBarMixin.js => InkTabBarNode.js}   |  51 +++--
 src/RefMixin.js                               |   7 -
 src/ScrollableInkTabBar.js                    |  44 ++--
 src/ScrollableTabBar.js                       |  41 ++--
 ...TabBarMixin.js => ScrollableTabBarNode.js} | 107 +++++----
 src/SwipeableInkTabBar.js                     |  93 +++-----
 ...eTabBarMixin.js => SwipeableTabBarNode.js} | 208 ++++++++++--------
 src/SwipeableTabContent.js                    |  61 +++--
 src/TabBar.js                                 |  31 ++-
 src/TabBarRootNode.js                         |  68 ++++++
 src/TabBarSwipeableTabs.js                    |  66 ++++++
 src/TabBarTabsNode.js                         |  65 ++++++
 src/TabContent.js                             |  39 ++--
 src/TabPane.js                                |  32 ++-
 src/Tabs.js                                   |   3 +-
 18 files changed, 652 insertions(+), 357 deletions(-)
 rename src/{InkTabBarMixin.js => InkTabBarNode.js} (86%)
 mode change 100755 => 100644
 delete mode 100644 src/RefMixin.js
 rename src/{ScrollableTabBarMixin.js => ScrollableTabBarNode.js} (81%)
 rename src/{SwipeableTabBarMixin.js => SwipeableTabBarNode.js} (79%)
 mode change 100755 => 100644 src/TabBar.js
 create mode 100644 src/TabBarRootNode.js
 create mode 100644 src/TabBarSwipeableTabs.js
 create mode 100644 src/TabBarTabsNode.js

diff --git a/examples/antd.js b/examples/antd.js
index 785c0154..484a0723 100755
--- a/examples/antd.js
+++ b/examples/antd.js
@@ -5,7 +5,9 @@ import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
 import TabContent from 'rc-tabs/lib/TabContent';
 import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
+import ScrollableTabBar from 'rc-tabs/lib/ScrollableTabBar';
 import InkTabBar from 'rc-tabs/lib/InkTabBar';
+import TabBar from 'rc-tabs/lib/TabBar';
 
 class PanelContent extends React.Component {
   constructor(props) {
@@ -115,7 +117,29 @@ class Demo extends React.Component {
 
     return (
       <div style={{ margin: 20 }}>
-        <h2>Simple Tabs</h2>
+        <h2>Basic Tabs</h2>
+        <p>
+          tabBarPosition:
+          <select value={this.state.tabBarPosition} onChange={this.changeTabPosition}>
+            <option value="top">top</option>
+            <option value="bottom">bottom</option>
+            <option value="left">left</option>
+            <option value="right">right</option>
+          </select>
+        </p>
+        <div>
+          <Tabs
+            defaultActiveKey="3"
+            style={style}
+            tabBarPosition={this.state.tabBarPosition}
+            renderTabBar={() => <TabBar onTabClick={this.onTabClick}/>}
+            renderTabContent={() => <TabContent style={contentStyle}/>}
+            onChange={this.onChange}
+          >
+            {ends2}
+          </Tabs>
+        </div>
+        <h2>Basic Tabs With Ink Bar</h2>
         <p>
           tabBarPosition:
           <select value={this.state.tabBarPosition} onChange={this.changeTabPosition}>
@@ -138,6 +162,26 @@ class Demo extends React.Component {
           </Tabs>
         </div>
         <h2>Scroll Tabs</h2>
+        <div>
+          <button onClick={() => this.switchToLast(ends)}>
+            switch to last tab
+          </button>
+          <Tabs
+            activeKey={this.state.activeKey}
+            style={style}
+            tabBarPosition={this.state.tabBarPosition}
+            renderTabBar={() => <ScrollableTabBar
+              ref={this.saveBar}
+              onTabClick={this.onTabClick}
+            />}
+            renderTabContent={() => <TabContent style={contentStyle}/>}
+            onChange={this.onChange2}
+          >
+            {ends}
+          </Tabs>
+        </div>
+        <button onClick={this.tick}>rerender</button>
+        <h2>Scroll Tabs with inkBar</h2>
         <div>
           <button onClick={() => this.switchToLast(ends)}>
             switch to last tab
diff --git a/package.json b/package.json
index f06aa808..0d222c90 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "classnames": "2.x",
-    "create-react-class": "15.x",
     "lodash": "^4.17.5",
     "prop-types": "15.x",
     "rc-hammerjs": "~0.6.0",
diff --git a/src/InkTabBar.js b/src/InkTabBar.js
index fac494e8..9759462e 100755
--- a/src/InkTabBar.js
+++ b/src/InkTabBar.js
@@ -1,16 +1,36 @@
-import createReactClass from 'create-react-class';
-import InkTabBarMixin from './InkTabBarMixin';
-import TabBarMixin from './TabBarMixin';
-import RefMixin from './RefMixin';
+import React from 'react';
+import PropTypes from 'prop-types';
+import InkTabBarNode from './InkTabBarNode';
+import TabBarTabsNode from './TabBarTabsNode';
+import TabBarRootNode from './TabBarRootNode';
+
+export default class InkTabBar extends React.Component {
+  getRef = (name) => {
+    return this[name];
+  }
+
+  saveRef = (name) => {
+    return (node) => {
+      if (node) {
+        this[name] = node;
+      }
+    };
+  }
 
-const InkTabBar = createReactClass({
-  displayName: 'InkTabBar',
-  mixins: [RefMixin, TabBarMixin, InkTabBarMixin],
   render() {
-    const inkBarNode = this.getInkBarNode();
-    const tabs = this.getTabs();
-    return this.getRootNode([inkBarNode, tabs]);
-  },
-});
+    return (
+      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
+        <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
+        <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={this.saveRef} {...this.props} />
+      </TabBarRootNode>
+    );
+  }
+}
+
+InkTabBar.propTypes = {
+  onTabClick: PropTypes.func,
+};
 
-export default InkTabBar;
+InkTabBar.defaultProps = {
+  onTabClick: () => {},
+};
diff --git a/src/InkTabBarMixin.js b/src/InkTabBarNode.js
old mode 100755
new mode 100644
similarity index 86%
rename from src/InkTabBarMixin.js
rename to src/InkTabBarNode.js
index 8a7354be..669d57ac
--- a/src/InkTabBarMixin.js
+++ b/src/InkTabBarNode.js
@@ -1,6 +1,7 @@
-import { setTransform, isTransformSupported } from './utils';
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { setTransform, isTransformSupported } from './utils';
 
 const isDev = process.env.NODE_ENV !== 'production';
 
@@ -41,11 +42,11 @@ function offset(elem) {
 
 function componentDidUpdate(component, init) {
   const { styles } = component.props;
-  const rootNode = component.root;
-  const wrapNode = component.nav || rootNode;
+  const rootNode = component.props.getRef('root');
+  const wrapNode = component.props.getRef('nav') || rootNode;
   const containerOffset = offset(wrapNode);
-  const inkBarNode = component.inkBar;
-  const activeTab = component.activeTab;
+  const inkBarNode = component.props.getRef('inkBar');
+  const activeTab = component.props.getRef('activeTab');
   const inkBarNodeStyle = inkBarNode.style;
   const tabBarPosition = component.props.tabBarPosition;
   if (init) {
@@ -106,17 +107,7 @@ function componentDidUpdate(component, init) {
   inkBarNodeStyle.display = activeTab ? 'block' : 'none';
 }
 
-export default {
-  getDefaultProps() {
-    return {
-      inkBarAnimated: true,
-    };
-  },
-
-  componentDidUpdate() {
-    componentDidUpdate(this);
-  },
-
+export default class InkTabBarNode extends React.Component {
   componentDidMount() {
     if (isDev) {
       // https://github.com/ant-design/ant-design/issues/8678
@@ -126,13 +117,17 @@ export default {
     } else {
       componentDidUpdate(this, true);
     }
-  },
+  }
+
+  componentDidUpdate() {
+    componentDidUpdate(this);
+  }
 
   componentWillUnmount() {
     clearTimeout(this.timeout);
-  },
+  }
 
-  getInkBarNode() {
+  render() {
     const { prefixCls, styles, inkBarAnimated } = this.props;
     const className = `${prefixCls}-ink-bar`;
     const classes = classnames({
@@ -148,8 +143,22 @@ export default {
         style={styles.inkBar}
         className={classes}
         key="inkBar"
-        ref={this.saveRef('inkBar')}
+        ref={this.props.saveRef('inkBar')}
       />
     );
-  },
+  }
+}
+
+InkTabBarNode.propTypes = {
+  prefixCls: PropTypes.string,
+  styles: PropTypes.object,
+  inkBarAnimated: PropTypes.bool,
+  saveRef: PropTypes.func,
+};
+
+InkTabBarNode.defaultProps = {
+  prefixCls: '',
+  inkBarAnimated: true,
+  styles: {},
+  saveRef: () => {},
 };
diff --git a/src/RefMixin.js b/src/RefMixin.js
deleted file mode 100644
index 9887661d..00000000
--- a/src/RefMixin.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  saveRef(name) {
-    return node => {
-      this[name] = node;
-    };
-  },
-};
diff --git a/src/ScrollableInkTabBar.js b/src/ScrollableInkTabBar.js
index e29c773b..ce6aadf6 100755
--- a/src/ScrollableInkTabBar.js
+++ b/src/ScrollableInkTabBar.js
@@ -1,18 +1,30 @@
-import createReactClass from 'create-react-class';
-import InkTabBarMixin from './InkTabBarMixin';
-import ScrollableTabBarMixin from './ScrollableTabBarMixin';
-import TabBarMixin from './TabBarMixin';
-import RefMixin from './RefMixin';
+import React from 'react';
+import InkTabBarNode from './InkTabBarNode';
+import TabBarTabsNode from './TabBarTabsNode';
+import TabBarRootNode from './TabBarRootNode';
+import ScrollableTabBarNode from './ScrollableTabBarNode';
 
-const ScrollableInkTabBar = createReactClass({
-  displayName: 'ScrollableInkTabBar',
-  mixins: [RefMixin, TabBarMixin, InkTabBarMixin, ScrollableTabBarMixin],
-  render() {
-    const inkBarNode = this.getInkBarNode();
-    const tabs = this.getTabs();
-    const scrollbarNode = this.getScrollBarNode([inkBarNode, tabs]);
-    return this.getRootNode(scrollbarNode);
-  },
-});
+export default class ScrollableInkTabBar extends React.Component {
+  getRef = (name) => {
+    return this[name];
+  }
+
+  saveRef = (name) => {
+    return (node) => {
+      if (node) {
+        this[name] = node;
+      }
+    };
+  }
 
-export default ScrollableInkTabBar;
+  render() {
+    return (
+      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
+        <ScrollableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
+          <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
+          <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
+        </ScrollableTabBarNode>
+      </TabBarRootNode>
+    );
+  }
+}
diff --git a/src/ScrollableTabBar.js b/src/ScrollableTabBar.js
index e195fb3c..6a735214 100755
--- a/src/ScrollableTabBar.js
+++ b/src/ScrollableTabBar.js
@@ -1,17 +1,28 @@
-import createReactClass from 'create-react-class';
-import ScrollableTabBarMixin from './ScrollableTabBarMixin';
-import TabBarMixin from './TabBarMixin';
-import RefMixin from './RefMixin';
+import React from 'react';
+import ScrollableTabBarNode from './ScrollableTabBarNode';
+import TabBarRootNode from './TabBarRootNode';
+import TabBarTabsNode from './TabBarTabsNode';
 
-const ScrollableTabBar = createReactClass({
-  displayName: 'ScrollableTabBar',
-  mixins: [RefMixin, TabBarMixin, ScrollableTabBarMixin],
-  render() {
-    const inkBarNode = this.getInkBarNode();
-    const tabs = this.getTabs();
-    const scrollbarNode = this.getScrollBarNode([inkBarNode, tabs]);
-    return this.getRootNode(scrollbarNode);
-  },
-});
+export default class ScrollableTabBar extends React.Component {
+  getRef = (name) => {
+    return this[name];
+  }
+
+  saveRef = (name) => {
+    return (node) => {
+      if (node) {
+        this[name] = node;
+      }
+    };
+  }
 
-export default ScrollableTabBar;
+  render() {
+    return (
+      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
+        <ScrollableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
+          <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
+        </ScrollableTabBarNode>
+      </TabBarRootNode>
+    );
+  }
+}
diff --git a/src/ScrollableTabBarMixin.js b/src/ScrollableTabBarNode.js
similarity index 81%
rename from src/ScrollableTabBarMixin.js
rename to src/ScrollableTabBarNode.js
index fcdabfc6..f2a2ebdc 100755
--- a/src/ScrollableTabBarMixin.js
+++ b/src/ScrollableTabBarNode.js
@@ -1,25 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { setTransform, isTransformSupported } from './utils';
-import React from 'react';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import debounce from 'lodash/debounce';
 
-export default {
-  getDefaultProps() {
-    return {
-      scrollAnimated: true,
-      onPrevClick() {},
-      onNextClick() {},
-    };
-  },
-
-  getInitialState() {
+export default class ScrollableTabBarNode extends React.Component {
+  constructor(props) {
+    super(props);
     this.offset = 0;
-    return {
+
+    this.state = {
       next: false,
       prev: false,
     };
-  },
+  }
 
   componentDidMount() {
     this.componentDidUpdate();
@@ -28,7 +23,7 @@ export default {
       this.scrollToActiveTab();
     }, 200);
     this.resizeEvent = addEventListener(window, 'resize', this.debouncedResize);
-  },
+  }
 
   componentDidUpdate(prevProps) {
     const props = this.props;
@@ -45,7 +40,7 @@ export default {
       // can not use props.activeKey
       this.scrollToActiveTab();
     }
-  },
+  }
 
   componentWillUnmount() {
     if (this.resizeEvent) {
@@ -54,13 +49,13 @@ export default {
     if (this.debouncedResize && this.debouncedResize.cancel) {
       this.debouncedResize.cancel();
     }
-  },
+  }
 
   setNextPrev() {
-    const navNode = this.nav;
+    const navNode = this.props.getRef('nav');
     const navNodeWH = this.getScrollWH(navNode);
-    const containerWH = this.getOffsetWH(this.container);
-    const navWrapNodeWH = this.getOffsetWH(this.navWrap);
+    const containerWH = this.getOffsetWH(this.props.getRef('container'));
+    const navWrapNodeWH = this.getOffsetWH(this.props.getRef('navWrap'));
     let { offset } = this;
     const minOffset = containerWH - navNodeWH;
     let { next, prev } = this.state;
@@ -92,7 +87,7 @@ export default {
       next,
       prev,
     };
-  },
+  }
 
   getOffsetWH(node) {
     const tabBarPosition = this.props.tabBarPosition;
@@ -101,7 +96,7 @@ export default {
       prop = 'offsetHeight';
     }
     return node[prop];
-  },
+  }
 
   getScrollWH(node) {
     const tabBarPosition = this.props.tabBarPosition;
@@ -110,7 +105,7 @@ export default {
       prop = 'scrollHeight';
     }
     return node[prop];
-  },
+  }
 
 
   getOffsetLT(node) {
@@ -120,7 +115,7 @@ export default {
       prop = 'top';
     }
     return node.getBoundingClientRect()[prop];
-  },
+  }
 
   setOffset(offset, checkNextPrev = true) {
     const target = Math.min(0, offset);
@@ -128,7 +123,7 @@ export default {
       this.offset = target;
       let navOffset = {};
       const tabBarPosition = this.props.tabBarPosition;
-      const navStyle = this.nav.style;
+      const navStyle = this.props.getRef('nav').style;
       const transformSupported = isTransformSupported(navStyle);
       if (tabBarPosition === 'left' || tabBarPosition === 'right') {
         if (transformSupported) {
@@ -162,7 +157,7 @@ export default {
         this.setNextPrev();
       }
     }
-  },
+  }
 
   setPrev(v) {
     if (this.state.prev !== v) {
@@ -170,7 +165,7 @@ export default {
         prev: v,
       });
     }
-  },
+  }
 
   setNext(v) {
     if (this.state.next !== v) {
@@ -178,28 +173,29 @@ export default {
         next: v,
       });
     }
-  },
+  }
 
   isNextPrevShown(state) {
     if (state) {
       return state.next || state.prev;
     }
     return this.state.next || this.state.prev;
-  },
+  }
 
-  prevTransitionEnd(e) {
+  prevTransitionEnd = (e) => {
     if (e.propertyName !== 'opacity') {
       return;
     }
-    const { container } = this;
+    const container = this.props.getRef('container');
     this.scrollToActiveTab({
       target: container,
       currentTarget: container,
     });
-  },
+  }
 
-  scrollToActiveTab(e) {
-    const { activeTab, navWrap } = this;
+  scrollToActiveTab = (e) => {
+    const activeTab = this.props.getRef('activeTab');
+    const navWrap = this.props.getRef('navWrap');
     if (e && e.target !== e.currentTarget || !activeTab) {
       return;
     }
@@ -223,25 +219,25 @@ export default {
       offset -= (activeTabOffset + activeTabWH) - (wrapOffset + navWrapNodeWH);
       this.setOffset(offset);
     }
-  },
+  }
 
-  prev(e) {
+  prev = (e) => {
     this.props.onPrevClick(e);
-    const navWrapNode = this.navWrap;
+    const navWrapNode = this.props.getRef('navWrap');
     const navWrapNodeWH = this.getOffsetWH(navWrapNode);
     const { offset } = this;
     this.setOffset(offset + navWrapNodeWH);
-  },
+  }
 
-  next(e) {
+  next = (e) => {
     this.props.onNextClick(e);
-    const navWrapNode = this.navWrap;
+    const navWrapNode = this.props.getRef('navWrap');
     const navWrapNodeWH = this.getOffsetWH(navWrapNode);
     const { offset } = this;
     this.setOffset(offset - navWrapNodeWH);
-  },
+  }
 
-  getScrollBarNode(content) {
+  render() {
     const { next, prev } = this.state;
     const { prefixCls, scrollAnimated, navWrapper } = this.props;
     const showNextPrev = prev || next;
@@ -292,18 +288,37 @@ export default {
           [`${prefixCls}-nav-container-scrolling`]: showNextPrev,
         })}
         key="container"
-        ref={this.saveRef('container')}
+        ref={this.props.saveRef('container')}
       >
         {prevButton}
         {nextButton}
-        <div className={`${prefixCls}-nav-wrap`} ref={this.saveRef('navWrap')}>
+        <div className={`${prefixCls}-nav-wrap`} ref={this.props.saveRef('navWrap')}>
           <div className={`${prefixCls}-nav-scroll`}>
-            <div className={navClasses} ref={this.saveRef('nav')}>
-              {navWrapper(content)}
+            <div className={navClasses} ref={this.props.saveRef('nav')}>
+              {/*navWrapper(content)*/this.props.children}
             </div>
           </div>
         </div>
       </div>
     );
-  },
+  }
+}
+
+ScrollableTabBarNode.propTypes = {
+  getRef: PropTypes.func.isRequired,
+  saveRef: PropTypes.func.isRequired,
+  tabBarPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  prefixCls: PropTypes.string,
+  scrollAnimated: PropTypes.bool,
+  onPrevClick: PropTypes.func,
+  onNextClick: PropTypes.func,
+  children: PropTypes.node,
+};
+
+ScrollableTabBarNode.defaultProps = {
+  tabBarPosition: 'left',
+  prefixCls: '',
+  scrollAnimated: true,
+  onPrevClick: () => {},
+  onNextClick: () => {},
 };
diff --git a/src/SwipeableInkTabBar.js b/src/SwipeableInkTabBar.js
index c16b84c9..0a555eed 100755
--- a/src/SwipeableInkTabBar.js
+++ b/src/SwipeableInkTabBar.js
@@ -1,71 +1,30 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
-import classnames from 'classnames';
-import InkTabBarMixin from './InkTabBarMixin';
-import SwipeableTabBarMixin from './SwipeableTabBarMixin';
-import TabBarMixin from './TabBarMixin';
-import RefMixin from './RefMixin';
-
-const SwipeableInkTabBar = createReactClass({
-  displayName: 'SwipeableInkTabBar',
-
-  mixins: [RefMixin, TabBarMixin, InkTabBarMixin, SwipeableTabBarMixin],
-
-  getSwipeableTabs() {
-    const props = this.props;
-    const children = props.panels;
-    const activeKey = props.activeKey;
-    const rst = [];
-    const prefixCls = props.prefixCls;
-
-    const _flexWidth = `${1 / props.pageSize * 100}%`;
-    const tabStyle = {
-      WebkitFlexBasis: _flexWidth,
-      flexBasis: _flexWidth,
-    };
-
-    React.Children.forEach(children, (child) => {
-      if (!child) {
-        return;
+import SwipeableTabBarNode from './SwipeableTabBarNode';
+import TabBarSwipeableTabs from './TabBarSwipeableTabs';
+import TabBarRootNode from './TabBarRootNode';
+import InkTabBarNode from './InkTabBarNode';
+
+export default class SwipeableInkTabBar extends React.Component {
+  getRef = (name) => {
+    return this[name];
+  }
+
+  saveRef = (name) => {
+    return (node) => {
+      if (node) {
+        this[name] = node;
       }
-      const key = child.key;
-      const cls = classnames(`${prefixCls}-tab`, {
-        [`${prefixCls}-tab-active`]: activeKey === key,
-        [`${prefixCls}-tab-disabled`]: child.props.disabled,
-      });
-      let events = {};
-      if (!child.props.disabled) {
-        events = {
-          onClick: this.onTabClick.bind(this, key),
-        };
-      }
-      const refProps = {};
-      if (activeKey === key) {
-        refProps.ref = this.saveRef('activeTab');
-      }
-      rst.push(<div
-        role="tab"
-        style={tabStyle}
-        aria-disabled={child.props.disabled ? 'true' : 'false'}
-        aria-selected={activeKey === key ? 'true' : 'false'}
-        {...events}
-        className={cls}
-        key={key}
-        {...refProps}
-      >
-        {child.props.tab}
-      </div>);
-    });
-
-    return rst;
-  },
+    };
+  }
 
   render() {
-    const inkBarNode = this.getInkBarNode();
-    const tabs = this.getSwipeableTabs();
-    const scrollbarNode = this.getSwipeBarNode([inkBarNode, tabs]);
-    return this.getRootNode(scrollbarNode);
-  },
-});
-
-export default SwipeableInkTabBar;
+    return (
+      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
+        <SwipeableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
+          <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
+          <TabBarSwipeableTabs saveRef={this.saveRef} {...this.props} />
+        </SwipeableTabBarNode>
+      </TabBarRootNode>
+    );
+  }
+}
diff --git a/src/SwipeableTabBarMixin.js b/src/SwipeableTabBarNode.js
similarity index 79%
rename from src/SwipeableTabBarMixin.js
rename to src/SwipeableTabBarNode.js
index 64f2d9ae..0b6ad9bf 100755
--- a/src/SwipeableTabBarMixin.js
+++ b/src/SwipeableTabBarNode.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Hammer from 'rc-hammerjs';
 import ReactDOM from 'react-dom';
@@ -8,84 +9,17 @@ import {
   setPxStyle,
 } from './utils';
 
-export default {
-  getInitialState() {
+export default class SwipeableTabBarNode extends React.Component {
+  constructor(props) {
+    super(props);
+
     const { hasPrevPage, hasNextPage } = this.checkPaginationByKey(this.props.activeKey);
-    return {
+    this.state = {
       hasPrevPage,
       hasNextPage,
     };
-  },
-  getDefaultProps() {
-    return {
-      hammerOptions: {},
-      pageSize: 5, // per page show how many tabs
-      speed: 7, // swipe speed, 1 to 10, more bigger more faster
-    };
-  },
-  checkPaginationByKey(activeKey) {
-    const { panels, pageSize } = this.props;
-    const index = this.getIndexByKey(activeKey);
-    const centerTabCount = Math.floor(pageSize / 2);
-    // the basic rule is to make activeTab be shown in the center of TabBar viewport
-    return {
-      hasPrevPage: index - centerTabCount > 0,
-      hasNextPage: index + centerTabCount < panels.length,
-    };
-  },
-  /**
-   * used for props.activeKey setting, not for swipe callback
-   */
-  getDeltaByKey(activeKey) {
-    const { pageSize } = this.props;
-    const index = this.getIndexByKey(activeKey);
-    const centerTabCount = Math.floor(pageSize / 2);
-    const { tabWidth } = this.cache;
-    const delta = (index - centerTabCount) * tabWidth * -1;
-    return delta;
-  },
-  getIndexByKey(activeKey) {
-    const { panels } = this.props;
-    const length = panels.length;
-    for (let i = 0; i < length; i++) {
-      if (panels[i].key === activeKey) {
-        return i;
-      }
-    }
-    return -1;
-  },
-  checkPaginationByDelta(delta) {
-    const { totalAvaliableDelta } = this.cache;
-    return {
-      hasPrevPage: delta < 0,
-      hasNextPage: -delta < totalAvaliableDelta,
-    };
-  },
-  setSwipePositionByKey(activeKey) {
-    const { hasPrevPage, hasNextPage } = this.checkPaginationByKey(activeKey);
-    const { totalAvaliableDelta } = this.cache;
-    this.setState({
-      hasPrevPage,
-      hasNextPage,
-    });
-    let delta;
-    if (!hasPrevPage) {
-      // the first page
-      delta = 0;
-    } else if (!hasNextPage) {
-      // the last page
-      delta = -totalAvaliableDelta;
-    } else if (hasNextPage) {
-      // the middle page
-      delta = this.getDeltaByKey(activeKey);
-    }
-    this.cache.totalDelta = delta;
-    this.setSwipePosition();
-  },
-  setSwipePosition() {
-    const { totalDelta, vertical } = this.cache;
-    setPxStyle(this.swipeNode, totalDelta, vertical);
-  },
+  }
+
   setCache() {
     const { tabBarPosition, pageSize, panels } = this.props;
     const _isVertical = isVertical(tabBarPosition);
@@ -96,22 +30,26 @@ export default {
       totalAvaliableDelta: _tabWidth * panels.length - _viewSize,
       tabWidth: _tabWidth,
     };
-  },
+  }
+
   componentDidMount() {
-    const { swipe, nav } = this;
+    const swipe = this.props.getRef('swipe');
+    const nav = this.props.getRef('nav');
     const { activeKey } = this.props;
     this.swipeNode = ReactDOM.findDOMNode(swipe); // dom which scroll (9999px)
     this.realNode = ReactDOM.findDOMNode(nav); // dom which visiable in screen (viewport)
     this.setCache();
     this.setSwipePositionByKey(activeKey);
-  },
+  }
+
   componentDidUpdate(prevProps) {
     this.setCache();
     if (this.props.activeKey && this.props.activeKey !== prevProps.activeKey) {
       this.setSwipePositionByKey(this.props.activeKey);
     }
-  },
-  onPan(e) {
+  }
+
+  onPan = (e) => {
     const { vertical, totalAvaliableDelta, totalDelta } = this.cache;
     const { speed } = this.props;
     // calculate touch distance
@@ -137,8 +75,79 @@ export default {
         hasNextPage,
       });
     }
-  },
-  getSwipeBarNode(tabs) {
+  }
+
+
+  /**
+   * used for props.activeKey setting, not for swipe callback
+   */
+  getDeltaByKey(activeKey) {
+    const { pageSize } = this.props;
+    const index = this.getIndexByKey(activeKey);
+    const centerTabCount = Math.floor(pageSize / 2);
+    const { tabWidth } = this.cache;
+    const delta = (index - centerTabCount) * tabWidth * -1;
+    return delta;
+  }
+
+  getIndexByKey(activeKey) {
+    const { panels } = this.props;
+    const length = panels.length;
+    for (let i = 0; i < length; i++) {
+      if (panels[i].key === activeKey) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  setSwipePositionByKey(activeKey) {
+    const { hasPrevPage, hasNextPage } = this.checkPaginationByKey(activeKey);
+    const { totalAvaliableDelta } = this.cache;
+    this.setState({
+      hasPrevPage,
+      hasNextPage,
+    });
+    let delta;
+    if (!hasPrevPage) {
+      // the first page
+      delta = 0;
+    } else if (!hasNextPage) {
+      // the last page
+      delta = -totalAvaliableDelta;
+    } else if (hasNextPage) {
+      // the middle page
+      delta = this.getDeltaByKey(activeKey);
+    }
+    this.cache.totalDelta = delta;
+    this.setSwipePosition();
+  }
+
+  setSwipePosition() {
+    const { totalDelta, vertical } = this.cache;
+    setPxStyle(this.swipeNode, totalDelta, vertical);
+  }
+
+  checkPaginationByKey(activeKey) {
+    const { panels, pageSize } = this.props;
+    const index = this.getIndexByKey(activeKey);
+    const centerTabCount = Math.floor(pageSize / 2);
+    // the basic rule is to make activeTab be shown in the center of TabBar viewport
+    return {
+      hasPrevPage: index - centerTabCount > 0,
+      hasNextPage: index + centerTabCount < panels.length,
+    };
+  }
+
+  checkPaginationByDelta(delta) {
+    const { totalAvaliableDelta } = this.cache;
+    return {
+      hasPrevPage: delta < 0,
+      hasNextPage: -delta < totalAvaliableDelta,
+    };
+  }
+
+  render() {
     const { prefixCls, hammerOptions, tabBarPosition } = this.props;
     const { hasPrevPage, hasNextPage } = this.state;
     const navClassName = `${prefixCls}-nav`;
@@ -158,22 +167,47 @@ export default {
           [`${prefixCls}-nextpage`]: hasNextPage,
         })}
         key="container"
-        ref={this.saveRef('container')}
+        ref={this.props.saveRef('container')}
       >
-        <div className={`${prefixCls}-nav-wrap`} ref={this.saveRef('navWrap')}>
+        <div className={`${prefixCls}-nav-wrap`} ref={this.props.saveRef('navWrap')}>
           <Hammer
             {...events}
             direction={isVertical(tabBarPosition) ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL'}
             options={hammerOptions}
           >
-            <div className={`${prefixCls}-nav-swipe`} ref={this.saveRef('swipe')}>
-              <div className={navClasses} ref={this.saveRef('nav')}>
-                {tabs}
+            <div className={`${prefixCls}-nav-swipe`} ref={this.props.saveRef('swipe')}>
+              <div className={navClasses} ref={this.props.saveRef('nav')}>
+                {this.props.children}
               </div>
             </div>
           </Hammer>
         </div>
       </div>
     );
-  },
+  }
+}
+
+SwipeableTabBarNode.propTypes = {
+  activeKey: PropTypes.string.isRequired,
+  panels: PropTypes.node,
+  pageSize: PropTypes.number,
+  tabBarPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  prefixCls: PropTypes.string,
+  children: PropTypes.node,
+  hammerOptions: PropTypes.object,
+  speed: PropTypes.number,
+  saveRef: PropTypes.func,
+  getRef: PropTypes.func,
+};
+
+SwipeableTabBarNode.defaultProps = {
+  panels: null,
+  tabBarPosition: 'top',
+  prefixCls: '',
+  children: null,
+  hammerOptions: {},
+  pageSize: 5, // per page show how many tabs
+  speed: 7, // swipe speed, 1 to 10, more bigger more faster
+  saveRef: () => {},
+  getRef: () => {},
 };
diff --git a/src/SwipeableTabContent.js b/src/SwipeableTabContent.js
index 87bc9a82..a46be101 100755
--- a/src/SwipeableTabContent.js
+++ b/src/SwipeableTabContent.js
@@ -1,7 +1,6 @@
 import TabContent from './TabContent';
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import Hammer from 'rc-hammerjs';
 import ReactDOM from 'react-dom';
 import {
@@ -55,27 +54,10 @@ function getIndexByDelta(e) {
   return currentIndex;
 }
 
-const SwipeableTabContent = createReactClass({
-  displayName: 'SwipeableTabContent',
-
-  propTypes: {
-    tabBarPosition: PropTypes.string,
-    onChange: PropTypes.func,
-    children: PropTypes.any,
-    hammerOptions: PropTypes.any,
-    animated: PropTypes.bool,
-    activeKey: PropTypes.string,
-  },
-
-  getDefaultProps() {
-    return {
-      animated: true,
-    };
-  },
-
+export default class SwipeableTabContent extends React.Component {
   componentDidMount() {
     this.rootNode = ReactDOM.findDOMNode(this);
-  },
+  }
 
   onPanStart() {
     const { tabBarPosition, children, activeKey, animated } = this.props;
@@ -92,8 +74,9 @@ const SwipeableTabContent = createReactClass({
     this.viewSize = isVertical(tabBarPosition) ?
       this.rootNode.offsetHeight :
       this.rootNode.offsetWidth;
-  },
-  onPan(e) {
+  }
+
+  onPan = (e) => {
     if (!this.startDrag) {
       return;
     }
@@ -102,18 +85,20 @@ const SwipeableTabContent = createReactClass({
     if (currentIndex !== undefined) {
       setTransform(this.rootNode.style, getTransformByIndex(currentIndex, tabBarPosition));
     }
-  },
-  onPanEnd(e) {
+  }
+
+  onPanEnd = (e) => {
     if (!this.startDrag) {
       return;
     }
     this.end(e);
-  },
-  onSwipe(e) {
+  }
+
+  onSwipe = (e) => {
     this.end(e, true);
-  },
+  }
 
-  end(e, swipe) {
+  end = (e, swipe) => {
     const { tabBarPosition, animated } = this.props;
     this.startDrag = false;
     if (animated) {
@@ -149,7 +134,8 @@ const SwipeableTabContent = createReactClass({
     } else {
       this.props.onChange(getActiveKey(this.props.children, finalIndex));
     }
-  },
+  }
+
   render() {
     const { tabBarPosition, hammerOptions, animated } = this.props;
     let events = {
@@ -172,7 +158,18 @@ const SwipeableTabContent = createReactClass({
         <TabContent {...this.props}/>
       </Hammer>
     );
-  },
-});
+  }
+}
+
+SwipeableTabContent.propTypes = {
+  tabBarPosition: PropTypes.string,
+  onChange: PropTypes.func,
+  children: PropTypes.node,
+  hammerOptions: PropTypes.any,
+  animated: PropTypes.bool,
+  activeKey: PropTypes.string,
+};
 
-export default SwipeableTabContent;
+SwipeableTabContent.defaultProps = {
+  animated: true,
+};
diff --git a/src/TabBar.js b/src/TabBar.js
old mode 100755
new mode 100644
index 3d6c77f2..1a59ae3a
--- a/src/TabBar.js
+++ b/src/TabBar.js
@@ -1,14 +1,21 @@
-import createReactClass from 'create-react-class';
-import TabBarMixin from './TabBarMixin';
-import RefMixin from './RefMixin';
+import React from 'react';
+import TabBarRootNode from './TabBarRootNode';
+import TabBarTabsNode from './TabBarTabsNode';
 
-const TabBar = createReactClass({
-  displayName: 'TabBar',
-  mixins: [RefMixin, TabBarMixin],
-  render() {
-    const tabs = this.getTabs();
-    return this.getRootNode(tabs);
-  },
-});
+export default class TabBar1 extends React.Component {
+  saveRef = (name) => {
+    return (node) => {
+      if (node) {
+        this[name] = node;
+      }
+    };
+  }
 
-export default TabBar;
+  render() {
+    return (
+      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
+        <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
+      </TabBarRootNode>
+    );
+  }
+}
diff --git a/src/TabBarRootNode.js b/src/TabBarRootNode.js
new file mode 100644
index 00000000..1b4c6fac
--- /dev/null
+++ b/src/TabBarRootNode.js
@@ -0,0 +1,68 @@
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { getDataAttr } from './utils';
+
+export default class TabBarRootNode extends React.Component {
+  render() {
+    const {
+      prefixCls, onKeyDown, className, extraContent, style, tabBarPosition, children,
+      ...restProps,
+    } = this.props;
+    const cls = classnames(`${prefixCls}-bar`, {
+      [className]: !!className,
+    });
+    const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom');
+    const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {};
+    const extraContentStyle = (extraContent && extraContent.props) ? extraContent.props.style : {};
+    let newChildren = children;
+    if (extraContent) {
+      newChildren = [
+        cloneElement(extraContent, {
+          key: 'extra',
+          style: {
+            ...tabBarExtraContentStyle,
+            ...extraContentStyle,
+          },
+        }),
+        cloneElement(children, { key: 'content' }),
+      ];
+      newChildren = topOrBottom ? newChildren : newChildren.reverse();
+    }
+    return (
+      <div
+        role="tablist"
+        className={cls}
+        tabIndex="0"
+        ref={this.props.saveRef('root')}
+        onKeyDown={onKeyDown}
+        style={style}
+        {...getDataAttr(restProps)}
+      >
+        {newChildren}
+      </div>
+    );
+  }
+}
+
+TabBarRootNode.propTypes = {
+  prefixCls: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  tabBarPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  children: PropTypes.node,
+  extraContent: PropTypes.node,
+  onKeyDown: PropTypes.func,
+  saveRef: PropTypes.func,
+};
+
+TabBarRootNode.defaultProps = {
+  prefixCls: '',
+  className: '',
+  style: {},
+  tabBarPosition: 'top',
+  extraContent: null,
+  children: null,
+  onKeyDown: () => {},
+  saveRef: () => {},
+};
diff --git a/src/TabBarSwipeableTabs.js b/src/TabBarSwipeableTabs.js
new file mode 100644
index 00000000..681ab0a4
--- /dev/null
+++ b/src/TabBarSwipeableTabs.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class TabBarSwipeableTabs extends React.Component {
+  render() {
+    const props = this.props;
+    const children = props.panels;
+    const activeKey = props.activeKey;
+    const rst = [];
+    const prefixCls = props.prefixCls;
+
+    const _flexWidth = `${1 / props.pageSize * 100}%`;
+    const tabStyle = {
+      WebkitFlexBasis: _flexWidth,
+      flexBasis: _flexWidth,
+    };
+
+    React.Children.forEach(children, (child) => {
+      if (!child) {
+        return;
+      }
+      const key = child.key;
+      const cls = classnames(`${prefixCls}-tab`, {
+        [`${prefixCls}-tab-active`]: activeKey === key,
+        [`${prefixCls}-tab-disabled`]: child.props.disabled,
+      });
+      let events = {};
+      if (!child.props.disabled) {
+        events = {
+          onClick: this.props.onTabClick.bind(this, key),
+        };
+      }
+      const refProps = {};
+      if (activeKey === key) {
+        refProps.ref = this.props.saveRef('activeTab');
+      }
+      rst.push(<div
+        role="tab"
+        style={tabStyle}
+        aria-disabled={child.props.disabled ? 'true' : 'false'}
+        aria-selected={activeKey === key ? 'true' : 'false'}
+        {...events}
+        className={cls}
+        key={key}
+        {...refProps}
+      >
+        {child.props.tab}
+      </div>);
+    });
+
+    return rst;
+  }
+}
+
+TabBarSwipeableTabs.propTypes = {
+  pageSize: PropTypes.number,
+  onTabClick: PropTypes.func,
+  saveRef: PropTypes.func,
+};
+
+TabBarSwipeableTabs.defaultProps = {
+  pageSize: 5,
+  onTabClick: () => {},
+  saveRef: () => {},
+};
diff --git a/src/TabBarTabsNode.js b/src/TabBarTabsNode.js
new file mode 100644
index 00000000..2bfd9958
--- /dev/null
+++ b/src/TabBarTabsNode.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import warning from 'warning';
+import PropTypes from 'prop-types';
+
+export default class TabBarTabsNode extends React.Component {
+  render() {
+    const { panels: children, activeKey, prefixCls, tabBarGutter } = this.props;
+    const rst = [];
+
+    React.Children.forEach(children, (child, index) => {
+      if (!child) {
+        return;
+      }
+      const key = child.key;
+      let cls = activeKey === key ? `${prefixCls}-tab-active` : '';
+      cls += ` ${prefixCls}-tab`;
+      let events = {};
+      if (child.props.disabled) {
+        cls += ` ${prefixCls}-tab-disabled`;
+      } else {
+        events = {
+          onClick: this.props.onTabClick.bind(this, key),
+        };
+      }
+      const ref = {};
+      if (activeKey === key) {
+        ref.ref = this.props.saveRef('activeTab');
+      }
+      warning('tab' in child.props, 'There must be `tab` property on children of Tabs.');
+      rst.push(
+        <div
+          role="tab"
+          aria-disabled={child.props.disabled ? 'true' : 'false'}
+          aria-selected={activeKey === key ? 'true' : 'false'}
+          {...events}
+          className={cls}
+          key={key}
+          style={{ marginRight: tabBarGutter && index === children.length - 1 ? 0 : tabBarGutter }}
+          {...ref}
+        >
+          {child.props.tab}
+        </div>
+      );
+    });
+
+    return rst;
+  }
+}
+
+TabBarTabsNode.propTypes = {
+  activeKey: PropTypes.string.isRequired,
+  panels: PropTypes.arrayOf(PropTypes.node), 
+  prefixCls: PropTypes.string,
+  tabBarGutter: PropTypes.number,
+  onTabClick: PropTypes.func,
+  saveRef: PropTypes.func, 
+};
+
+TabBarTabsNode.defaultProps = {
+  panels: [],
+  prefixCls: [],
+  tabBarGutter: null, 
+  onTabClick: () => {},
+  saveRef: () => {}, 
+};
diff --git a/src/TabContent.js b/src/TabContent.js
index 0be17c27..6d5220f8 100755
--- a/src/TabContent.js
+++ b/src/TabContent.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
@@ -9,22 +8,7 @@ import {
   getMarginStyle,
 } from './utils';
 
-const TabContent = createReactClass({
-  displayName: 'TabContent',
-  propTypes: {
-    animated: PropTypes.bool,
-    animatedWithMargin: PropTypes.bool,
-    prefixCls: PropTypes.string,
-    children: PropTypes.any,
-    activeKey: PropTypes.string,
-    style: PropTypes.any,
-    tabBarPosition: PropTypes.string,
-  },
-  getDefaultProps() {
-    return {
-      animated: true,
-    };
-  },
+export default class TabContent extends React.Component {
   getTabPanes() {
     const props = this.props;
     const activeKey = props.activeKey;
@@ -45,7 +29,8 @@ const TabContent = createReactClass({
     });
 
     return newChildren;
-  },
+  }
+
   render() {
     const { props } = this;
     const {
@@ -84,7 +69,19 @@ const TabContent = createReactClass({
         {this.getTabPanes()}
       </div>
     );
-  },
-});
+  }
+};
+
+TabContent.propTypes = {
+  animated: PropTypes.bool,
+  animatedWithMargin: PropTypes.bool,
+  prefixCls: PropTypes.string,
+  children: PropTypes.any,
+  activeKey: PropTypes.string,
+  style: PropTypes.any,
+  tabBarPosition: PropTypes.string,
+};
 
-export default TabContent;
+TabContent.defaultProps = {
+  animated: true,
+};
diff --git a/src/TabPane.js b/src/TabPane.js
index be074a81..616e53e1 100755
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -1,22 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import classnames from 'classnames';
 import { getDataAttr } from './utils';
 
-const TabPane = createReactClass({
-  displayName: 'TabPane',
-  propTypes: {
-    className: PropTypes.string,
-    active: PropTypes.bool,
-    style: PropTypes.any,
-    destroyInactiveTabPane: PropTypes.bool,
-    forceRender: PropTypes.bool,
-    placeholder: PropTypes.node,
-  },
-  getDefaultProps() {
-    return { placeholder: null };
-  },
+export default class TabPane extends React.Component {
   render() {
     const {
       className, destroyInactiveTabPane, active, forceRender,
@@ -42,7 +29,18 @@ const TabPane = createReactClass({
         {isRender || forceRender ? children : placeholder}
       </div>
     );
-  },
-});
+  }
+};
 
-export default TabPane;
+TabPane.propTypes = {
+  className: PropTypes.string,
+  active: PropTypes.bool,
+  style: PropTypes.any,
+  destroyInactiveTabPane: PropTypes.bool,
+  forceRender: PropTypes.bool,
+  placeholder: PropTypes.node,
+};
+
+TabPane.defaultProps = {
+  placeholder: null,
+};
diff --git a/src/Tabs.js b/src/Tabs.js
index 7b8f208e..b10b19ff 100755
--- a/src/Tabs.js
+++ b/src/Tabs.js
@@ -171,7 +171,7 @@ Tabs.propTypes = {
   renderTabContent: PropTypes.func.isRequired,
   navWrapper: PropTypes.func,
   onChange: PropTypes.func,
-  children: PropTypes.any,
+  children: PropTypes.node,
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   tabBarPosition: PropTypes.string,
@@ -186,6 +186,7 @@ Tabs.defaultProps = {
   onChange: noop,
   navWrapper: arg => arg,
   tabBarPosition: 'top',
+  children: null,
   style: {},
 };
 

From dcdded6cafae567cb455f9ca6294b94d1bf5002e Mon Sep 17 00:00:00 2001
From: picodoth <pikaleize@gmail.com>
Date: Tue, 12 Jun 2018 23:01:18 +0800
Subject: [PATCH 2/8] refactor: apply saveref as render children

---
 src/InkTabBar.js           | 25 +++++++++----------------
 src/SaveRef.js             | 19 +++++++++++++++++++
 src/ScrollableInkTabBar.js | 29 +++++++++++------------------
 src/ScrollableTabBar.js    | 27 ++++++++++-----------------
 src/SwipeableInkTabBar.js  | 29 +++++++++++------------------
 src/TabBar.js              | 20 +++++++++-----------
 6 files changed, 69 insertions(+), 80 deletions(-)
 create mode 100644 src/SaveRef.js

diff --git a/src/InkTabBar.js b/src/InkTabBar.js
index 9759462e..f398d74e 100755
--- a/src/InkTabBar.js
+++ b/src/InkTabBar.js
@@ -3,26 +3,19 @@ import PropTypes from 'prop-types';
 import InkTabBarNode from './InkTabBarNode';
 import TabBarTabsNode from './TabBarTabsNode';
 import TabBarRootNode from './TabBarRootNode';
+import SaveRef from './SaveRef';
 
 export default class InkTabBar extends React.Component {
-  getRef = (name) => {
-    return this[name];
-  }
-
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
-        <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={this.saveRef} {...this.props} />
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
+            <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={saveRef} {...this.props} />
+          </TabBarRootNode>
+        )}
+      </SaveRef>
     );
   }
 }
diff --git a/src/SaveRef.js b/src/SaveRef.js
new file mode 100644
index 00000000..f4c3204d
--- /dev/null
+++ b/src/SaveRef.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default class SaveRef extends React.Component {
+  getRef = (name) => {
+    return this[name];
+  }
+
+  saveRef = (name) => {
+    return (node) => {
+      if (node) {
+        this[name] = node;
+      }
+    };
+  }
+
+  render() {
+    return this.props.children(this.saveRef, this.getRef);
+  }
+}
diff --git a/src/ScrollableInkTabBar.js b/src/ScrollableInkTabBar.js
index ce6aadf6..1f57b986 100755
--- a/src/ScrollableInkTabBar.js
+++ b/src/ScrollableInkTabBar.js
@@ -3,28 +3,21 @@ import InkTabBarNode from './InkTabBarNode';
 import TabBarTabsNode from './TabBarTabsNode';
 import TabBarRootNode from './TabBarRootNode';
 import ScrollableTabBarNode from './ScrollableTabBarNode';
+import SaveRef from './SaveRef';
 
 export default class ScrollableInkTabBar extends React.Component {
-  getRef = (name) => {
-    return this[name];
-  }
-
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <ScrollableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
-          <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
-          <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
-        </ScrollableTabBarNode>
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
+              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
+              <TabBarTabsNode saveRef={saveRef} {...this.props} />
+            </ScrollableTabBarNode>
+          </TabBarRootNode>
+        )}
+      </SaveRef>
     );
   }
 }
diff --git a/src/ScrollableTabBar.js b/src/ScrollableTabBar.js
index 6a735214..762b26d3 100755
--- a/src/ScrollableTabBar.js
+++ b/src/ScrollableTabBar.js
@@ -2,27 +2,20 @@ import React from 'react';
 import ScrollableTabBarNode from './ScrollableTabBarNode';
 import TabBarRootNode from './TabBarRootNode';
 import TabBarTabsNode from './TabBarTabsNode';
+import SaveRef from './SaveRef';
 
 export default class ScrollableTabBar extends React.Component {
-  getRef = (name) => {
-    return this[name];
-  }
-
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <ScrollableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
-          <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
-        </ScrollableTabBarNode>
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
+              <TabBarTabsNode saveRef={saveRef} {...this.props} />
+            </ScrollableTabBarNode>
+          </TabBarRootNode>
+        )}
+      </SaveRef>
     );
   }
 }
diff --git a/src/SwipeableInkTabBar.js b/src/SwipeableInkTabBar.js
index 0a555eed..fc3edca0 100755
--- a/src/SwipeableInkTabBar.js
+++ b/src/SwipeableInkTabBar.js
@@ -3,28 +3,21 @@ import SwipeableTabBarNode from './SwipeableTabBarNode';
 import TabBarSwipeableTabs from './TabBarSwipeableTabs';
 import TabBarRootNode from './TabBarRootNode';
 import InkTabBarNode from './InkTabBarNode';
+import SaveRef from './SaveRef'
 
 export default class SwipeableInkTabBar extends React.Component {
-  getRef = (name) => {
-    return this[name];
-  }
-
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <SwipeableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
-          <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
-          <TabBarSwipeableTabs saveRef={this.saveRef} {...this.props} />
-        </SwipeableTabBarNode>
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <SwipeableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
+              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
+              <TabBarSwipeableTabs saveRef={saveRef} {...this.props} />
+            </SwipeableTabBarNode>
+          </TabBarRootNode>
+        )}
+      </SaveRef>
     );
   }
 }
diff --git a/src/TabBar.js b/src/TabBar.js
index 1a59ae3a..3cfa23e3 100644
--- a/src/TabBar.js
+++ b/src/TabBar.js
@@ -1,21 +1,19 @@
 import React from 'react';
 import TabBarRootNode from './TabBarRootNode';
 import TabBarTabsNode from './TabBarTabsNode';
+import SaveRef from './SaveRef';
 
 export default class TabBar1 extends React.Component {
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <TabBarTabsNode saveRef={saveRef} {...this.props} />
+          </TabBarRootNode>
+        )}
+
+      </SaveRef>
     );
   }
 }

From 516a90407a6b8abdbdeef5b30487e85c9b30d09c Mon Sep 17 00:00:00 2001
From: picodoth <pikaleize@gmail.com>
Date: Tue, 12 Jun 2018 23:33:22 +0800
Subject: [PATCH 3/8] chore: fix lint

---
 src/SaveRef.js            | 9 +++++++++
 src/SwipeableInkTabBar.js | 2 +-
 src/TabBarTabsNode.js     | 8 ++++----
 src/TabContent.js         | 2 +-
 src/TabPane.js            | 4 +++-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/SaveRef.js b/src/SaveRef.js
index f4c3204d..18414d78 100644
--- a/src/SaveRef.js
+++ b/src/SaveRef.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class SaveRef extends React.Component {
   getRef = (name) => {
@@ -17,3 +18,11 @@ export default class SaveRef extends React.Component {
     return this.props.children(this.saveRef, this.getRef);
   }
 }
+
+SaveRef.propTypes = {
+  children: PropTypes.function,
+};
+
+SaveRef.defaultProps = {
+  children: () => null,
+};
diff --git a/src/SwipeableInkTabBar.js b/src/SwipeableInkTabBar.js
index fc3edca0..b21d77a3 100755
--- a/src/SwipeableInkTabBar.js
+++ b/src/SwipeableInkTabBar.js
@@ -3,7 +3,7 @@ import SwipeableTabBarNode from './SwipeableTabBarNode';
 import TabBarSwipeableTabs from './TabBarSwipeableTabs';
 import TabBarRootNode from './TabBarRootNode';
 import InkTabBarNode from './InkTabBarNode';
-import SaveRef from './SaveRef'
+import SaveRef from './SaveRef';
 
 export default class SwipeableInkTabBar extends React.Component {
   render() {
diff --git a/src/TabBarTabsNode.js b/src/TabBarTabsNode.js
index 2bfd9958..427ec317 100644
--- a/src/TabBarTabsNode.js
+++ b/src/TabBarTabsNode.js
@@ -49,17 +49,17 @@ export default class TabBarTabsNode extends React.Component {
 
 TabBarTabsNode.propTypes = {
   activeKey: PropTypes.string.isRequired,
-  panels: PropTypes.arrayOf(PropTypes.node), 
+  panels: PropTypes.arrayOf(PropTypes.node),
   prefixCls: PropTypes.string,
   tabBarGutter: PropTypes.number,
   onTabClick: PropTypes.func,
-  saveRef: PropTypes.func, 
+  saveRef: PropTypes.func,
 };
 
 TabBarTabsNode.defaultProps = {
   panels: [],
   prefixCls: [],
-  tabBarGutter: null, 
+  tabBarGutter: null,
   onTabClick: () => {},
-  saveRef: () => {}, 
+  saveRef: () => {},
 };
diff --git a/src/TabContent.js b/src/TabContent.js
index 6d5220f8..47df152c 100755
--- a/src/TabContent.js
+++ b/src/TabContent.js
@@ -70,7 +70,7 @@ export default class TabContent extends React.Component {
       </div>
     );
   }
-};
+}
 
 TabContent.propTypes = {
   animated: PropTypes.bool,
diff --git a/src/TabPane.js b/src/TabPane.js
index 616e53e1..a8db3db4 100755
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -30,7 +30,7 @@ export default class TabPane extends React.Component {
       </div>
     );
   }
-};
+}
 
 TabPane.propTypes = {
   className: PropTypes.string,
@@ -39,6 +39,8 @@ TabPane.propTypes = {
   destroyInactiveTabPane: PropTypes.bool,
   forceRender: PropTypes.bool,
   placeholder: PropTypes.node,
+  rootPrefixCls: PropTypes.string,
+  children: React.ReactNode,
 };
 
 TabPane.defaultProps = {

From 5dfca7ad90b256a3d2678b6e6a7e798758125caf Mon Sep 17 00:00:00 2001
From: picodoth <pikaleize@gmail.com>
Date: Tue, 19 Jun 2018 16:23:21 +0800
Subject: [PATCH 4/8] fix warning

---
 src/SaveRef.js              | 2 +-
 src/ScrollableTabBarNode.js | 2 +-
 src/TabContent.js           | 2 +-
 src/TabPane.js              | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/SaveRef.js b/src/SaveRef.js
index 18414d78..a5c201fb 100644
--- a/src/SaveRef.js
+++ b/src/SaveRef.js
@@ -20,7 +20,7 @@ export default class SaveRef extends React.Component {
 }
 
 SaveRef.propTypes = {
-  children: PropTypes.function,
+  children: PropTypes.func,
 };
 
 SaveRef.defaultProps = {
diff --git a/src/ScrollableTabBarNode.js b/src/ScrollableTabBarNode.js
index f2a2ebdc..d7d259b9 100755
--- a/src/ScrollableTabBarNode.js
+++ b/src/ScrollableTabBarNode.js
@@ -295,7 +295,7 @@ export default class ScrollableTabBarNode extends React.Component {
         <div className={`${prefixCls}-nav-wrap`} ref={this.props.saveRef('navWrap')}>
           <div className={`${prefixCls}-nav-scroll`}>
             <div className={navClasses} ref={this.props.saveRef('nav')}>
-              {/*navWrapper(content)*/this.props.children}
+              {navWrapper(this.props.children)}
             </div>
           </div>
         </div>
diff --git a/src/TabContent.js b/src/TabContent.js
index 47df152c..eb831437 100755
--- a/src/TabContent.js
+++ b/src/TabContent.js
@@ -76,7 +76,7 @@ TabContent.propTypes = {
   animated: PropTypes.bool,
   animatedWithMargin: PropTypes.bool,
   prefixCls: PropTypes.string,
-  children: PropTypes.any,
+  children: PropTypes.node,
   activeKey: PropTypes.string,
   style: PropTypes.any,
   tabBarPosition: PropTypes.string,
diff --git a/src/TabPane.js b/src/TabPane.js
index a8db3db4..f906337e 100755
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -40,7 +40,7 @@ TabPane.propTypes = {
   forceRender: PropTypes.bool,
   placeholder: PropTypes.node,
   rootPrefixCls: PropTypes.string,
-  children: React.ReactNode,
+  children: PropTypes.node,
 };
 
 TabPane.defaultProps = {

From d28d8bab8d417f8eedda3a408573288754051733 Mon Sep 17 00:00:00 2001
From: picodoth <pikaleize@gmail.com>
Date: Tue, 19 Jun 2018 16:24:18 +0800
Subject: [PATCH 5/8] rm obsolete file

---
 src/TabBarMixin.js | 96 ----------------------------------------------
 1 file changed, 96 deletions(-)
 delete mode 100755 src/TabBarMixin.js

diff --git a/src/TabBarMixin.js b/src/TabBarMixin.js
deleted file mode 100755
index 5d77067d..00000000
--- a/src/TabBarMixin.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { cloneElement } from 'react';
-import classnames from 'classnames';
-import warning from 'warning';
-import { getDataAttr } from './utils';
-
-export default {
-  getDefaultProps() {
-    return {
-      styles: {},
-    };
-  },
-  onTabClick(key, e) {
-    this.props.onTabClick(key, e);
-  },
-  getTabs() {
-    const { panels: children, activeKey, prefixCls, tabBarGutter } = this.props;
-    const rst = [];
-
-    React.Children.forEach(children, (child, index) => {
-      if (!child) {
-        return;
-      }
-      const key = child.key;
-      let cls = activeKey === key ? `${prefixCls}-tab-active` : '';
-      cls += ` ${prefixCls}-tab`;
-      let events = {};
-      if (child.props.disabled) {
-        cls += ` ${prefixCls}-tab-disabled`;
-      } else {
-        events = {
-          onClick: (e) => this.onTabClick.call(this, key, e),
-        };
-      }
-      const ref = {};
-      if (activeKey === key) {
-        ref.ref = this.saveRef('activeTab');
-      }
-      warning('tab' in child.props, 'There must be `tab` property on children of Tabs.');
-      rst.push(
-        <div
-          role="tab"
-          aria-disabled={child.props.disabled ? 'true' : 'false'}
-          aria-selected={activeKey === key ? 'true' : 'false'}
-          {...events}
-          className={cls}
-          key={key}
-          style={{ marginRight: tabBarGutter && index === children.length - 1 ? 0 : tabBarGutter }}
-          {...ref}
-        >
-          {child.props.tab}
-        </div>
-      );
-    });
-
-    return rst;
-  },
-  getRootNode(contents) {
-    const {
-      prefixCls, onKeyDown, className, extraContent, style, tabBarPosition,
-      ...restProps,
-    } = this.props;
-    const cls = classnames(`${prefixCls}-bar`, {
-      [className]: !!className,
-    });
-    const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom');
-    const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {};
-    const extraContentStyle = (extraContent && extraContent.props) ? extraContent.props.style : {};
-    let children = contents;
-    if (extraContent) {
-      children = [
-        cloneElement(extraContent, {
-          key: 'extra',
-          style: {
-            ...tabBarExtraContentStyle,
-            ...extraContentStyle,
-          },
-        }),
-        cloneElement(contents, { key: 'content' }),
-      ];
-      children = topOrBottom ? children : children.reverse();
-    }
-    return (
-      <div
-        role="tablist"
-        className={cls}
-        tabIndex="0"
-        ref={this.saveRef('root')}
-        onKeyDown={onKeyDown}
-        style={style}
-        {...getDataAttr(restProps)}
-      >
-        {children}
-      </div>
-    );
-  },
-};

From a66110ea070b0f6a6071798cd5494c95abd3e6d4 Mon Sep 17 00:00:00 2001
From: picodoth <pikaleize@gmail.com>
Date: Tue, 19 Jun 2018 17:22:25 +0800
Subject: [PATCH 6/8] fix activeTab regression

InkTabBarNode has to be after TabBarTabsNode, since InkTabBarNode depends on current activeTab which is set inside TabBarTabsNode
---
 src/InkTabBar.js           |  2 +-
 src/ScrollableInkTabBar.js |  2 +-
 src/SwipeableInkTabBar.js  |  2 +-
 tests/index.spec.js        | 17 +++++++++++++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/InkTabBar.js b/src/InkTabBar.js
index f398d74e..09c01e71 100755
--- a/src/InkTabBar.js
+++ b/src/InkTabBar.js
@@ -11,8 +11,8 @@ export default class InkTabBar extends React.Component {
       <SaveRef>
         {(saveRef, getRef) => (
           <TabBarRootNode saveRef={saveRef} {...this.props}>
-            <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
             <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={saveRef} {...this.props} />
+            <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
           </TabBarRootNode>
         )}
       </SaveRef>
diff --git a/src/ScrollableInkTabBar.js b/src/ScrollableInkTabBar.js
index 1f57b986..878616cc 100755
--- a/src/ScrollableInkTabBar.js
+++ b/src/ScrollableInkTabBar.js
@@ -12,8 +12,8 @@ export default class ScrollableInkTabBar extends React.Component {
         {(saveRef, getRef) => (
           <TabBarRootNode saveRef={saveRef} {...this.props}>
             <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
-              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
               <TabBarTabsNode saveRef={saveRef} {...this.props} />
+              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
             </ScrollableTabBarNode>
           </TabBarRootNode>
         )}
diff --git a/src/SwipeableInkTabBar.js b/src/SwipeableInkTabBar.js
index b21d77a3..79856145 100755
--- a/src/SwipeableInkTabBar.js
+++ b/src/SwipeableInkTabBar.js
@@ -12,8 +12,8 @@ export default class SwipeableInkTabBar extends React.Component {
         {(saveRef, getRef) => (
           <TabBarRootNode saveRef={saveRef} {...this.props}>
             <SwipeableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
-              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
               <TabBarSwipeableTabs saveRef={saveRef} {...this.props} />
+              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
             </SwipeableTabBarNode>
           </TabBarRootNode>
         )}
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 31091dc8..2279d634 100755
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -5,6 +5,7 @@ import { renderToJson } from 'enzyme-to-json';
 import Tabs, { TabPane } from '../src';
 import TabContent from '../src/TabContent';
 import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
+import InkTabBar from '../src/InkTabBar';
 
 class NormoalTabs extends Component {
   getRoot() {
@@ -141,4 +142,20 @@ describe('rc-tabs', () => {
     });
     expect(wrapper.state().activeKey).toBe('1');
   });
+
+  it('activate tab on click should show inkbar', () => {
+    const children = [1, 2]
+      .map(number => <TabPane tab={number} key={number.toString()}>{number}</TabPane>);
+    const wrapper = mount(
+      <Tabs
+        renderTabBar={() => <InkTabBar />}
+        renderTabContent={() => <TabContent/>}
+      >
+        {children}
+      </Tabs>
+    );
+
+    wrapper.find('TabBarTabsNode').find('div').at(1).simulate('click', {});
+    expect(wrapper.find('InkTabBarNode').html().indexOf('display: block;') !== -1).toBe(true);
+  });
 });

From bae3ef3939900811f21474b98178e6246b9025ed Mon Sep 17 00:00:00 2001
From: picodoth <pikaleize@gmail.com>
Date: Mon, 25 Jun 2018 20:48:18 +0800
Subject: [PATCH 7/8] fix lint

---
 src/ScrollableTabBarNode.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ScrollableTabBarNode.js b/src/ScrollableTabBarNode.js
index d7d259b9..974cf32e 100755
--- a/src/ScrollableTabBarNode.js
+++ b/src/ScrollableTabBarNode.js
@@ -312,6 +312,7 @@ ScrollableTabBarNode.propTypes = {
   scrollAnimated: PropTypes.bool,
   onPrevClick: PropTypes.func,
   onNextClick: PropTypes.func,
+  navWrapper: PropTypes.func,
   children: PropTypes.node,
 };
 
@@ -321,4 +322,5 @@ ScrollableTabBarNode.defaultProps = {
   scrollAnimated: true,
   onPrevClick: () => {},
   onNextClick: () => {},
+  navWrapper: (ele) => ele,
 };

From bef712fdf447c71cca13ce961158a89a4f69e819 Mon Sep 17 00:00:00 2001
From: picodoth <pikaleize@gmail.com>
Date: Tue, 26 Jun 2018 09:49:23 +0800
Subject: [PATCH 8/8] update snapshot

---
 tests/__snapshots__/index.spec.js.snap | 10 +++++-----
 tests/__snapshots__/swipe.spec.js.snap | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap
index 980b16b8..8ae65d8d 100644
--- a/tests/__snapshots__/index.spec.js.snap
+++ b/tests/__snapshots__/index.spec.js.snap
@@ -41,11 +41,6 @@ exports[`rc-tabs should render Tabs with correct DOM structure 1`] = `
           <div
             class="rc-tabs-nav rc-tabs-nav-animated"
           >
-            <div
-              class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
-            >
-              
-            </div>
             <div
               aria-disabled="false"
               aria-selected="false"
@@ -70,6 +65,11 @@ exports[`rc-tabs should render Tabs with correct DOM structure 1`] = `
             >
               tab 3
             </div>
+            <div
+              class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
+            >
+              
+            </div>
           </div>
         </div>
       </div>
diff --git a/tests/__snapshots__/swipe.spec.js.snap b/tests/__snapshots__/swipe.spec.js.snap
index 132e074f..eb7b879f 100644
--- a/tests/__snapshots__/swipe.spec.js.snap
+++ b/tests/__snapshots__/swipe.spec.js.snap
@@ -24,11 +24,6 @@ exports[`rc-swipeable-tabs should render Slider with correct DOM structure 1`] =
             <div
               class="rc-tabs-nav"
             >
-              <div
-                class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
-              >
-                
-              </div>
               <div
                 aria-disabled="false"
                 aria-selected="false"
@@ -128,6 +123,11 @@ exports[`rc-swipeable-tabs should render Slider with correct DOM structure 1`] =
               >
                 选项10
               </div>
+              <div
+                class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
+              >
+                
+              </div>
             </div>
           </div>
         </div>