feat: add swipeableTabBar for antd-mobile

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/swipeTabBar.html

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

examples/swipeTabBar.js

@@ -0,0 +1,98 @@
+/* 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 SwipeableTabBar from '../src/SwipeableTabBar';
+
+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%' }}>
+        <h1>Swipe Tabs, please visit this demo at mobile, or chrome simulator</h1>
+        <Tabs
+          renderTabBar={() => <SwipeableTabBar onTabClick={this.onTabClick}/>}
+          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'));

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;

src/SwipeableTabBarMixin.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import classnames from 'classnames';
+import Hammer from 'react-hammerjs';
+import ReactDOM from 'react-dom';
+import {
+  isVertical,
+} from './utils';
+
+export default {
+  getDefaultProps() {
+    return {
+      hammerOptions: {},
+    };
+  },
+  componentDidMount() {
+    this.swipeNode = ReactDOM.findDOMNode(this.refs.swipe);
+    this.realNode = ReactDOM.findDOMNode(this.refs.nav);
+    // todo: do we need to handle possible props.tabBarPosition change in componentWillReceiveProps
+    this._isVertical = isVertical(this.props.tabBarPosition);
+    this._relativeDirection = this._isVertical ? 'top' : 'left';
+    const screen = document.documentElement;
+    const screenSize = this._isVertical ? screen.clientHeight : screen.clientWidth;
+    const totalSize = this._isVertical ? this.realNode.offsetHeight : this.realNode.offsetWidth;
+    this._totalAvaliableDelta = totalSize - screenSize;
+  },
+  onPan(e) {
+    const nowDelta = this._isVertical ? e.deltaY : e.deltaX;
+    const preDelta = +getComputedStyle(this.swipeNode)
+      .getPropertyValue(this._relativeDirection)
+      .replace('px', '');
+    const nextTotalDelta = nowDelta + preDelta;
+    if (nextTotalDelta < 0 && -nextTotalDelta < this._totalAvaliableDelta) {
+      this.swipeNode.style[this._relativeDirection] = `${nextTotalDelta}px`;
+    }
+  },
+  getSwipeBarNode(tabs) {
+    const { prefixCls, hammerOptions, tabBarPosition } = this.props;
+    const navClassName = `${prefixCls}-nav`;
+    const navClasses = classnames({
+      [navClassName]: true,
+    });
+    let direction = {};
+    if (isVertical(tabBarPosition)) {
+      direction = {
+        vertical: true,
+      };
+    }
+    const events = {
+      onPan: this.onPan,
+    };
+    return (
+      <div
+        className={classnames({
+          [`${prefixCls}-nav-container`]: 1,
+        })}
+        key="container"
+        ref="container"
+      >
+        <div className={`${prefixCls}-nav-wrap`} ref="navWrap">
+          <Hammer
+            {...events}
+            {...direction}
+            options={hammerOptions}
+          >
+            <div className={`${prefixCls}-nav-swipe`} ref="swipe">
+              <div className={navClasses} ref="nav">
+                {tabs}
+              </div>
+            </div>
+          </Hammer>
+        </div>
+      </div>
+    );
+  },
+};