Merge 8cbefb9 into b6c208e

.travis.yml

@@ -4,6 +4,7 @@ notifications:
   email:
   - rjmuqiang@gmail.com
   - hust2012jiangkai@gmail.com
+  - quentinyang1985@gmail.com
 
 node_js:
 - 6.9.4

HISTORY.md

@@ -1,5 +1,10 @@
 # History
 
+# 2.0.7
+- add browserslist config file, then tell babel need to add prefix for `display: flex`.
+- refine swipe and demo
+- fix: https://github.com/ant-design/ant-design-mobile/issues/1954 (#56)
+
 # 2.0.6
 
 - fix: https://github.com/ant-design/ant-design-mobile/issues/1954 As rc-gesture revert preventDefault in v0.0.19 for tabs+listview issue (https://github.com/ant-design/ant-design-mobile/issues/2589).

browserslist

@@ -0,0 +1,7 @@
+# Browsers that we support
+last 2 versions
+Firefox ESR
+> 2%
+ie >= 8
+iOS >= 8
+Android >= 4

examples/simple.tsx

@@ -54,21 +54,22 @@ const SwipeDemo = () => (
 
 ReactDOM.render(
   <div style={{ marginBottom: 12 }}>
+    <div>Basic</div>
     <SwipeDemo/>
-    <div style={{height: 100}}></div>
-    <SwipeDemo />
-    <div style={{height: 100}}></div>
+    <div style={{height: 20}}></div>
     <div>Test scroll</div>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
-    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <div style={{margin: 20, overflow: 'scroll', height: 500}}>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+      <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    </div>
   </div>,
   document.getElementById('__react-content'),
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-swipeout",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "swipe out ui component for react(web and react-native)",
   "keywords": [
     "react",

src/Swipeout.tsx

@@ -223,6 +223,12 @@ export default class Swipeout extends React.Component <SwipeoutPropType, any> {
     ) : null;
   }
 
+  onTouchMove = (e) => {
+    if (this.swiping) {
+      e.preventDefault();
+    }
+  }
+
   render() {
     const { prefixCls, left, right, disabled, children, ...restProps } = this.props;
 
@@ -237,12 +243,13 @@ export default class Swipeout extends React.Component <SwipeoutPropType, any> {
     };
 
     return (left!.length || right!.length) && !disabled ? (
-      <div className={cls} {...divProps}>
+      <div className={cls} {...divProps} >
         {/* 保证 body touchStart 后不触发 pan */}
         <div className={`${prefixCls}-cover`} ref={(el) => this.cover = el} />
         { this.renderButtons(left, 'left') }
         { this.renderButtons(right, 'right') }
         <Gesture
+          onTouchMove={this.onTouchMove}
           onPanStart={this.onPanStart}
           onPanMove={this.onPanMove}
           onPanEnd={this.onPanEnd}

tests/usage.tsx

@@ -26,12 +26,13 @@ describe('simple', () => {
   it('works when swipe', done => {
     const instance = ReactDOM.render(
       <Swipeout
+        left={[
+          { text: 'read', style: { width: 80 } },
+          { text: 'reply', style: { width: 60 } },
+        ]}
         right={[
           { text: 'more', style: { width: 60 }},
           { text: 'delete', style: { width: 60 } },
-        ]} left={[
-          { text: 'read', style: { width: 80 } },
-          { text: 'reply', style: { width: 60 } },
         ]}
       >
         swipeout demo