feat: add swipeableTabBar for antd-mobile

README.md

@@ -69,7 +69,7 @@ React.render(
   document.getElementById('t2'));
 ```
 
-## API 
+## API
 
 ### Tabs
 
@@ -237,6 +237,41 @@ tab bar with ink indicator, in addition to tab bar props, extra props:
 
 scrollable tab bar with ink indicator, same with tab bar/ink bar props.
 
+### lib/SwipeableInkTabBar
+
+swipeable tab bar with ink indicator, same with tab bar/ink bar props, and below is the additional props.
+
+<table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+          <th style="width: 100px;">name</th>
+          <th style="width: 50px;">type</th>
+          <th>default</th>
+          <th>description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+          <td>pageSize</td>
+          <td>number</td>
+          <th><5/th>
+          <td>show how many tabs at one page</td>
+      </tr>
+      <tr>
+          <td>speed</td>
+          <td>number</td>
+          <th>5</th>
+          <td>swipe speed, 1 to 10, more bigger more faster</td>
+      </tr>
+      <tr>
+          <td>hammerOptions</td>
+          <td>Object</td>
+          <td></td>
+          <td>options for react-hammerjs</td>
+      </tr>
+    </tbody>
+</table>
+
 ### lib/TabContent
 
 <table class="table table-bordered table-striped">
@@ -299,6 +334,7 @@ swipeable tab panes, in addition to lib/TabContent props, extra props:
     </tbody>
 </table>
 
+
 ## Note
 
 If you want to support old browsers(which does not support flex/css-transition),

assets/index/bottom.less

@@ -21,6 +21,12 @@
     width: 99999px;
   }
 
+  &-bottom &-nav-swipe {
+    width: 99999px;
+    position: relative;
+    left: 0;
+  }
+
   &-bottom &-nav-wrap {
     width: 100%;
   }

assets/index/left.less

@@ -34,6 +34,12 @@
     height: 99999px;
   }
 
+  &-left &-nav-swipe {
+    height: 99999px;
+    position: relative;
+    top: 0;
+  }
+
   &-left &-tab-prev, &-left &-tab-next {
     margin-top: -2px;
     height: 32px;

assets/index/right.less

@@ -26,6 +26,12 @@
     height: 99999px;
   }
 
+  &-right &-nav-swipe {
+    height: 99999px;
+    position: relative;
+    top: 0;
+  }
+
   &-right &-tab-prev, &-right &-tab-next {
     margin-top: -2px;
     height: 32px;

assets/index/top.less

@@ -21,6 +21,12 @@
     width: 99999px;
   }
 
+  &-top &-nav-swipe {
+    width: 99999px;
+    position: relative;
+    left: 0;
+  }
+
   &-top &-nav-wrap {
     width: 100%;
   }

examples/swipeInkTabBar.html

@@ -0,0 +1 @@
+placeholder

examples/swipeInkTabBar.js

@@ -0,0 +1,106 @@
+/* eslint react/no-multi-comp:0, no-console:0 */
+
+import 'rc-tabs/assets/index.less';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tabs, { TabPane } from 'rc-tabs';
+import TabContent from '../src/SwipeableTabContent';
+import SwipeableInkTabBar from '../src/SwipeableInkTabBar';
+
+class PanelContent extends React.Component {
+  constructor(props) {
+    super(props);
+    console.log(this.props.id, 'constructor');
+  }
+
+  componentWillReceiveProps() {
+    console.log(this.props.id, 'componentWillReceiveProps');
+  }
+
+  render() {
+    const count = [1, 1, 1, 1];// new Array(4) skip forEach ....
+    const els = count.map((c, i) => {
+      return <p key={i}>{this.props.id}</p>;
+    });
+    return <div>{els}</div>;
+  }
+}
+PanelContent.propTypes = {
+  id: React.PropTypes.number,
+};
+
+const Component = React.createClass({
+  getInitialState() {
+    return {
+      activeKey: '',
+      start: 0,
+    };
+  },
+
+  onChange(activeKey) {
+    console.log(`onChange ${activeKey}`);
+    this.setState({
+      activeKey,
+    });
+  },
+
+  onTabClick(key) {
+    console.log(`onTabClick ${key}`);
+    if (key === this.state.activeKey) {
+      this.setState({
+        activeKey: '',
+      });
+    }
+  },
+
+
+  render() {
+    const start = this.state.start;
+    return (
+      <div style={{ margin: '20 0', width: '100%' }}>
+        <span style={{ color: 'red' }}>
+          Swipe Tabs, please visit this demo at mobile, or chrome simulator
+        </span>
+        <Tabs
+          renderTabBar={() =>
+            <SwipeableInkTabBar
+              onTabClick={this.onTabClick}
+              pageSize={4}
+              speed={8}
+            />
+          }
+          renderTabContent={() => <TabContent animatedWithMargin />}
+          activeKey={this.state.activeKey}
+          onChange={this.onChange}
+        >
+          <TabPane tab={`tab ${start}`} key="0">
+            <PanelContent id={start}/>
+          </TabPane>
+          <TabPane tab={`tab ${start + 1}`} key="1">
+            <PanelContent id={start + 1}/>
+          </TabPane>
+          <TabPane tab={`tab ${start + 2}`} key="2">
+            <PanelContent id={start + 2}/>
+          </TabPane>
+          <TabPane tab={`tab ${start + 3}`} key="3">
+            <PanelContent id={start + 3}/>
+          </TabPane>
+          <TabPane tab={`tab ${start + 4}`} key="4">
+            <PanelContent id={start + 4}/>
+          </TabPane>
+          <TabPane tab={`tab ${start + 5}`} key="5">
+            <PanelContent id={start + 5}/>
+          </TabPane>
+          <TabPane tab={`tab ${start + 6}`} key="6">
+            <PanelContent id={start + 6}/>
+          </TabPane>
+          <TabPane tab={`tab ${start + 7}`} key="7">
+            <PanelContent id={start + 7}/>
+          </TabPane>
+        </Tabs>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(<Component />, document.getElementById('__react-content'));

package.json

@@ -23,7 +23,7 @@
   },
   "licenses": "MIT",
   "config": {
-    "port": 8002
+    "port": 8003
   },
   "scripts": {
     "build": "rc-tools run build",
@@ -35,7 +35,8 @@
     "saucelabs": "rc-tools run saucelabs",
     "test": "rc-tools run test",
     "chrome-test": "rc-tools run chrome-test",
-    "coverage": "rc-tools run coverage"
+    "coverage": "rc-tools run coverage",
+    "watch": "rc-tools run watch"
   },
   "devDependencies": {
     "expect.js": "~0.3.1",

src/SwipeableInkTabBar.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import InkTabBarMixin from './InkTabBarMixin';
+import SwipeableTabBarMixin from './SwipeableTabBarMixin';
+import TabBarMixin from './TabBarMixin';
+
+const SwipeableInkTabBar = React.createClass({
+  mixins: [TabBarMixin, InkTabBarMixin, SwipeableTabBarMixin],
+
+  render() {
+    const inkBarNode = this.getInkBarNode();
+    const tabs = this.getTabs();
+    const scrollbarNode = this.getSwipeBarNode([inkBarNode, tabs]);
+    return this.getRootNode(scrollbarNode);
+  },
+});
+
+export default SwipeableInkTabBar;

src/SwipeableTabBar.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import SwipeableTabBarMixin from './SwipeableTabBarMixin';
+import TabBarMixin from './TabBarMixin';
+
+
+const SwipeableTabBar = React.createClass({
+  mixins: [TabBarMixin, SwipeableTabBarMixin],
+  render() {
+    const tabs = this.getTabs();
+    const swipebarNode = this.getSwipeBarNode(tabs);
+    return this.getRootNode(swipebarNode);
+  },
+});
+
+export default SwipeableTabBar;