Merge pull request #74 from sandstreamdev/fix_for_issue_72

Fix for issue 72

Author: Marek Rozmus

examples/package-lock.json

@@ -32,6 +32,7 @@
     "@babel/plugin-proposal-class-properties": "7.7.4",
     "@babel/preset-env": "7.7.6",
     "@babel/preset-react": "7.7.4",
+    "autoprefixer": "^9.7.3",
     "babel-eslint": "10.0.3",
     "babel-loader": "8.0.6",
     "css-loader": "3.3.0",
@@ -42,6 +43,7 @@
     "eslint-plugin-react-hooks": "2.3.0",
     "gh-pages": "2.1.1",
     "html-webpack-plugin": "3.2.0",
+    "postcss-loader": "^3.0.0",
     "prettier": "1.19.1",
     "style-loader": "1.0.1",
     "stylelint": "12.0.0",

examples/package.json

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('autoprefixer')]
+};

examples/postcss.config.js

@@ -36,6 +36,14 @@ module.exports = {
             options: {
               modules: true
             }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              config: {
+                path: path.join(__dirname, 'src', 'examples')
+              }
+            }
           }
         ]
       }

examples/webpack.config.dev.js

@@ -36,7 +36,8 @@ module.exports = {
             options: {
               modules: true
             }
-          }
+          },
+          { loader: 'postcss-loader' }
         ]
       },
       {

examples/webpack.config.js

@@ -102,12 +102,29 @@ class SwipeableListItem extends PureComponent {
     requestAnimationFrame(this.updatePosition);
   };
 
-  handleTouchMove = event => this.handleMove(event, event.targetTouches[0]);
+  handleMouseMove = event => {
+    if (this.dragStartedWithinItem()) {
+      const { clientX, clientY } = event;
 
-  handleMouseMove = event => this.handleMove(event, event);
+      this.setDragDirection(clientX, clientY);
 
-  handleMove = (event, { clientX, clientY }) => {
+      if (this.isSwiping()) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        const delta = clientX - this.dragStartPoint.x;
+
+        if (this.shouldMoveItem(delta)) {
+          this.left = delta;
+        }
+      }
+    }
+  };
+
+  handleTouchMove = event => {
     if (this.dragStartedWithinItem()) {
+      const { clientX, clientY } = event.targetTouches[0];
+
       this.setDragDirection(clientX, clientY);
 
       if (!event.cancelable) {
@@ -119,6 +136,7 @@ class SwipeableListItem extends PureComponent {
         event.preventDefault();
 
         const delta = clientX - this.dragStartPoint.x;
+
         if (this.shouldMoveItem(delta)) {
           this.left = delta;
         }