Merge pull request #2 from mateusbslopes/feature/handle_multiple_touches

Feature/handle multiple touches

Author: mateusbslopes

README.md

@@ -5,6 +5,7 @@ A React carousel develop for the Scandiweb's React [developer test](./TEST_DESCR
 ## Table of content
 - Usage
 - Running
+- Known Issues
 
 ### Usage
 The component accepts the following params:
@@ -39,3 +40,5 @@ In order to run the example page locally on you computer (assuming that you alre
 - And to start the server:
 `yarn serve`
 
+### Known Issues
+1. Multiple touches does not works correctly when one of the touches is not on the Carousel.

ROADMAP.md

@@ -1,15 +1,13 @@
-1. Handle multiple touches
-  - Be able to move 2 carousels on a touchable device
-2. Make it infinite scroll
-3. Add basic arrows when config:
+1. Make it infinite scroll
+2. Add basic arrows when config:
 ```jsx
 <ReactCarousel
   navigation={{
     arrows: true,
   }}
 >...</ReactCarousel>
 ```
-4. Permit custom dots:
+3. Permit custom dots:
 ```jsx
 <ReactCarousel
   navigation={{
@@ -19,7 +17,7 @@
   }}
 >...</ReactCarousel>
 ```
-5. Permit custom arrows:
+4. Permit custom arrows:
 ```jsx
 <ReactCarousel
   navigation={{
@@ -30,4 +28,4 @@
   }}
 >...</ReactCarousel>
 ```
-6. Handle keyboard navigation (accessibility purpose)
+5. Handle keyboard navigation (accessibility purpose)

example/style.js

@@ -1,6 +1,7 @@
 export default `
   width: 100%;
   margin: auto;
+  touch-action: pan-x pan-y;
 
   .content {
     width: clamp(200px, 100%, 1000px);

package.json

@@ -17,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/preset-env": "^7.12.10",
     "@babel/preset-react": "^7.12.10",
     "@emotion/babel-plugin": "^11.1.2",

src/Item.jsx

@@ -1,9 +1,12 @@
 import React, { createRef, useState } from "react";
+import { TouchHandler } from "./services/TouchHandler";
 
 const Item = ({ children, increaseValue, decreaseValue, setViewValue }) => {
   const [x, setX] = useState(0);
   const [viewX, setViewX] = useState(0);
 
+  const [elementKey, setElementKey] = useState("");
+
   const itemRef = createRef();
 
   const getTouches = (evt) => evt.touches;
@@ -15,7 +18,9 @@ const Item = ({ children, increaseValue, decreaseValue, setViewValue }) => {
   };
 
   const handleTouchStart = (evt) => {
-    let currentX = Math.trunc(getTouches(evt)[0].clientX);
+    let key = TouchHandler.insertElement();
+    setElementKey(key);
+    let currentX = Math.trunc(getTouches(evt)[TouchHandler.getIndex(key)].clientX);
     setX(currentX);
     setViewX(currentX);
   };
@@ -28,7 +33,7 @@ const Item = ({ children, increaseValue, decreaseValue, setViewValue }) => {
   };
 
   const handleTouchMove = (evt) => {
-    let currentX = Math.trunc(getTouches(evt)[0].clientX);
+    let currentX = Math.trunc(getTouches(evt)[TouchHandler.getIndex(elementKey)].clientX);
     if (currentX !== viewX) {
       setViewValue(x - currentX);
       setViewX(currentX);
@@ -41,6 +46,7 @@ const Item = ({ children, increaseValue, decreaseValue, setViewValue }) => {
   };
 
   const handleTouchEnd = () => {
+    TouchHandler.removeElement(elementKey);
     if (viewX < x) increaseValue();
     else if(viewX > x) decreaseValue();
   };

src/services/TouchHandler.js

@@ -0,0 +1,27 @@
+export class TouchHandler {
+  static touchedElementIndexes = {};
+  static touchedElementIndexesLength = 0;
+
+  static getKey () {
+    return Math.random().toString(36).substring(7);
+  }
+
+  static insertElement() {
+    let key = this.getKey();
+    this.touchedElementIndexes[key] = this.touchedElementIndexesLength;
+    this.touchedElementIndexesLength += 1;
+    return key;
+  }
+
+  static getIndex(key) {
+    return this.touchedElementIndexes[key];
+  }
+
+  static removeElement(key) {
+    Object.keys(this.touchedElementIndexes).map(value => {
+      if (value > this.touchedElementIndexes[key]) return value -= 1;
+    })
+    delete this.touchedElementIndexes[key];
+    this.touchedElementIndexesLength -= 1;
+  }
+}

webpack.config.js

@@ -1,50 +1,54 @@
 const path = require("path");
 
 module.exports = {
-  entry: path.resolve(__dirname, 'example', 'index.js'),
+  entry: path.resolve(__dirname, "example", "index.js"),
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js'
+    path: path.resolve(__dirname, "dist"),
+    filename: "bundle.js",
   },
   devServer: {
-    contentBase: [
-      path.resolve(__dirname, 'dist')
-    ],
+    contentBase: [path.resolve(__dirname, "dist")],
     open: true,
     port: 3000,
-    host: '0.0.0.0',
-    useLocalIp: true
+    host: "0.0.0.0",
+    useLocalIp: true,
   },
   module: {
     rules: [
       {
         test: [/\.js$/, /\.jsx$/],
         include: [
-          path.resolve(__dirname, 'src'),
-          path.resolve(__dirname, 'example')
+          path.resolve(__dirname, "src"),
+          path.resolve(__dirname, "example"),
         ],
         exclude: [/node_modules/],
-        use: [{
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              ['@babel/preset-env', {
-                "targets": "defaults"
-              }],
-              '@babel/preset-react',
-              '@emotion/babel-preset-css-prop'
-            ]
-          }
-        }]
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: [
+                [
+                  "@babel/preset-env",
+                  {
+                    targets: "defaults",
+                  },
+                ],
+                "@babel/preset-react",
+                "@emotion/babel-preset-css-prop",
+              ],
+              plugins: ["@babel/plugin-proposal-class-properties"],
+            },
+          },
+        ],
       },
       {
         test: /\.(jpg|gif|mp4)$/i,
         use: [
           {
-            loader: 'file-loader',
+            loader: "file-loader",
           },
         ],
       },
-    ]
-  }
-}
+    ],
+  },
+};