feat: Re-implement touch functionality for Carousel natively

Also removes the now unused dependency Hammerjs, which was
previously used for handling touch events for Carousel.

package.json

@@ -119,7 +119,6 @@
     "@restart/hooks": "^0.3.0",
     "classnames": "^2.2.6",
     "dom-helpers": "^3.4.0",
-    "hammerjs": "^2.0.8",
     "invariant": "^2.2.4",
     "keycode": "^2.2.0",
     "popper.js": "^1.14.7",

src/Carousel.js

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import styles from 'dom-helpers/style';
 import transition from 'dom-helpers/transition';
-import Hammer from 'hammerjs';
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { uncontrollable } from 'uncontrollable';
@@ -130,6 +129,7 @@ class Carousel extends React.Component {
   state = {
     prevClasses: '',
     currentClasses: 'active',
+    touchStartX: 0,
   };
 
   isUnmounted = false;
@@ -138,26 +138,12 @@ class Carousel extends React.Component {
 
   componentDidMount() {
     this.cycle();
-    if (this.carousel && this.props.touch) {
-      this.hammer = new Hammer(this.carousel.current);
-      this.hammer.on('swipe', ev => {
-        const lastPossibleIndex = countChildren(this.props.children) - 1;
-        if (ev.direction === Hammer.DIRECTION_LEFT) {
-          this.to(
-            this.state.activeIndex === lastPossibleIndex
-              ? 0
-              : this.state.activeIndex + 1,
-            ev,
-          );
-        } else if (ev.direction === Hammer.DIRECTION_RIGHT) {
-          this.to(
-            this.state.activeIndex === 0
-              ? lastPossibleIndex
-              : this.state.activeIndex - 1,
-            ev,
-          );
-        }
-      });
+    if (this.carousel && this.carousel.current && this.props.touch) {
+      this.carousel.current.addEventListener(
+        'touchstart',
+        this.handleTouchStart,
+      );
+      this.carousel.current.addEventListener('touchend', this.handleTouchEnd);
     }
   }
 
@@ -247,12 +233,44 @@ class Carousel extends React.Component {
   componentWillUnmount() {
     clearTimeout(this.timeout);
     this.isUnmounted = true;
-    if (this.hammer) {
-      this.hammer.stop();
-      this.hammer.destroy();
+    if (this.carousel && this.carousel.current && this.props.touch) {
+      this.carousel.current.removeEventListener(
+        'touchstart',
+        this.handleTouchStart,
+      );
+      this.carousel.current.removeEventListener(
+        'touchend',
+        this.handleTouchEnd,
+      );
     }
   }
 
+  handleTouchStart = e => {
+    this.setState({ touchStartX: e.changedTouches[0].screenX });
+  };
+
+  handleTouchEnd = e => {
+    const lastPossibleIndex = countChildren(this.props.children) - 1;
+
+    // Going left
+    if (e.changedTouches[0].screenX < this.state.touchStartX) {
+      this.to(
+        this.state.activeIndex === lastPossibleIndex
+          ? 0
+          : this.state.activeIndex + 1,
+        e,
+      );
+      // Going right
+    } else {
+      this.to(
+        this.state.activeIndex === 0
+          ? lastPossibleIndex
+          : this.state.activeIndex - 1,
+        e,
+      );
+    }
+  };
+
   handleSlideEnd = () => {
     const pendingIndex = this._pendingIndex;
     this._isSliding = false;

yarn.lock

@@ -4113,11 +4113,6 @@ gud@^1.0.0:
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
   integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
 
-hammerjs@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
-  integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
-
 handlebars@^4.0.1, handlebars@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.1.tgz#6e4e41c18ebe7719ae4d38e5aca3d32fa3dd23d3"