@snack-uikit/carousel 0.4.5 → 0.4.6-preview-a3b4b368.0

package/dist/cjs/components/ItemProvider/ItemProvider.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
@@ -11,9 +19,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.ItemProvider = ItemProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
+const react_swipeable_1 = require("react-swipeable");
 const testIds_1 = require("../../testIds");
-const helpers_1 = require("./helpers");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function ItemProvider(_ref) {
   let {
@@ -85,68 +94,6 @@ function ItemProvider(_ref) {
     hideNonVisibleItems();
     showVisibleItems(scrollBy, page, showItems);
   }, [page, scrollBy, showItems]);
-  const [drag, setDrag] = (0, react_1.useState)({
-    initial: transform,
-    start: 0,
-    isDown: false,
-    drag: 0,
-    finished: true,
-    pointers: true
-  });
-  const handleDragStart = e => {
-    e.persist();
-    setDrag(Object.assign(Object.assign({}, drag), {
-      isDown: true,
-      start: (0, helpers_1.getPageX)(e),
-      initial: transform,
-      finished: false
-    }));
-  };
-  const handleDragFinish = e => {
-    e.persist();
-    if (drag.finished) {
-      return;
-    }
-    if (Math.abs(drag.drag) < swipeActivateLength) {
-      return setDrag({
-        initial: transform,
-        start: 0,
-        isDown: false,
-        drag: 0,
-        finished: true,
-        pointers: true
-      });
-    }
-    slideCallback(drag.drag > 0 ? -1 : 1);
-    setDrag(Object.assign(Object.assign({}, drag), {
-      drag: 0,
-      isDown: false,
-      finished: true,
-      pointers: true
-    }));
-    return;
-  };
-  const handleDragMove = e => {
-    e.persist();
-    if (!drag.isDown) {
-      return;
-    }
-    const pos = (0, helpers_1.getPageX)(e);
-    setDrag(Object.assign(Object.assign({}, drag), {
-      drag: drag.start - pos,
-      pointers: Math.abs(drag.start - pos) < Number.MIN_SAFE_INTEGER
-    }));
-  };
-  const swipeProps = swipe ? {
-    onTouchCancel: handleDragFinish,
-    onTouchEnd: handleDragFinish,
-    onTouchMove: handleDragMove,
-    onTouchStart: handleDragStart,
-    onMouseDown: handleDragStart,
-    onMouseLeave: handleDragFinish,
-    onMouseUp: handleDragFinish,
-    onMouseMove: handleDragMove
-  } : {};
   const handleSlideClick = (0, react_1.useCallback)(e => {
     var _a, _b;
     const slideRect = e.currentTarget.getBoundingClientRect();
@@ -165,6 +112,69 @@ function ItemProvider(_ref) {
     const fallbackWidth = Math.floor(100 / showItems);
     return `${fallbackWidth}%`;
   }, [computedValues.itemWidth, showItems]);
+  const canSwipe = (0, react_1.useRef)(true);
+  const [drag, setDrag] = (0, react_1.useState)({
+    drag: 0,
+    pointers: true
+  });
+  const handleSwipeStart = eventData => {
+    if (!swipe) {
+      return;
+    }
+    if (eventData.dir !== 'Right' && eventData.dir !== 'Left') {
+      canSwipe.current = false;
+    } else {
+      eventData.event.preventDefault();
+      eventData.event.stopPropagation();
+    }
+  };
+  const handleSwiping = eventData => {
+    if (!swipe) {
+      return;
+    }
+    if (!canSwipe.current) {
+      return;
+    }
+    eventData.event.preventDefault();
+    eventData.event.stopPropagation();
+    setDrag({
+      drag: eventData.deltaX,
+      pointers: Math.abs(eventData.deltaX) < Number.MIN_SAFE_INTEGER
+    });
+  };
+  const handleSwiped = eventData => {
+    if (!swipe) {
+      return;
+    }
+    if (!canSwipe.current) {
+      canSwipe.current = true;
+      return;
+    }
+    eventData.event.preventDefault();
+    eventData.event.stopPropagation();
+    if (Math.abs(drag.drag) < swipeActivateLength) {
+      return setDrag({
+        drag: 0,
+        pointers: true
+      });
+    }
+    slideCallback(eventData.dir === 'Left' ? -1 : 1);
+    setDrag({
+      drag: 0,
+      pointers: true
+    });
+    return;
+  };
+  const _a = (0, react_swipeable_1.useSwipeable)({
+      onSwipeStart: handleSwipeStart,
+      onSwiping: handleSwiping,
+      onSwiped: handleSwiped,
+      trackMouse: true
+    }),
+    {
+      ref
+    } = _a,
+    swipeProps = __rest(_a, ["ref"]);
   return (0, jsx_runtime_1.jsx)("div", {
     ref: containerRef,
     className: styles_module_scss_1.default.itemProvider,
@@ -178,10 +188,10 @@ function ItemProvider(_ref) {
       className: styles_module_scss_1.default.itemTracker,
       "data-test-id": testIds_1.TEST_IDS.trackLine,
       style: {
-        transform: `translateX(${transform - drag.drag}px)`,
+        transform: `translateX(${transform + drag.drag}px)`,
         transition: `transform ${transition}s ease 0s`
       },
-      ref: itemsTrackerRef,
+      ref: (0, merge_refs_1.default)(ref, itemsTrackerRef),
       children: items.map((item, i) =>
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       (0, jsx_runtime_1.jsx)("div", {

package/dist/esm/components/ItemProvider/ItemProvider.js

@@ -1,8 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import debounce from 'lodash.debounce';
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import mergeRefs from 'merge-refs';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
 import { TEST_IDS } from '../../testIds';
-import { getPageX } from './helpers';
 import styles from './styles.module.css';
 export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }) {
     const containerRef = useRef(null);
@@ -64,57 +76,6 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         hideNonVisibleItems();
         showVisibleItems(scrollBy, page, showItems);
     }, [page, scrollBy, showItems]);
-    const [drag, setDrag] = useState({
-        initial: transform,
-        start: 0,
-        isDown: false,
-        drag: 0,
-        finished: true,
-        pointers: true,
-    });
-    const handleDragStart = (e) => {
-        e.persist();
-        setDrag(Object.assign(Object.assign({}, drag), { isDown: true, start: getPageX(e), initial: transform, finished: false }));
-    };
-    const handleDragFinish = (e) => {
-        e.persist();
-        if (drag.finished) {
-            return;
-        }
-        if (Math.abs(drag.drag) < swipeActivateLength) {
-            return setDrag({
-                initial: transform,
-                start: 0,
-                isDown: false,
-                drag: 0,
-                finished: true,
-                pointers: true,
-            });
-        }
-        slideCallback(drag.drag > 0 ? -1 : 1);
-        setDrag(Object.assign(Object.assign({}, drag), { drag: 0, isDown: false, finished: true, pointers: true }));
-        return;
-    };
-    const handleDragMove = (e) => {
-        e.persist();
-        if (!drag.isDown) {
-            return;
-        }
-        const pos = getPageX(e);
-        setDrag(Object.assign(Object.assign({}, drag), { drag: drag.start - pos, pointers: Math.abs(drag.start - pos) < Number.MIN_SAFE_INTEGER }));
-    };
-    const swipeProps = swipe
-        ? {
-            onTouchCancel: handleDragFinish,
-            onTouchEnd: handleDragFinish,
-            onTouchMove: handleDragMove,
-            onTouchStart: handleDragStart,
-            onMouseDown: handleDragStart,
-            onMouseLeave: handleDragFinish,
-            onMouseUp: handleDragFinish,
-            onMouseMove: handleDragMove,
-        }
-        : {};
     const handleSlideClick = useCallback(e => {
         var _a, _b;
         const slideRect = e.currentTarget.getBoundingClientRect();
@@ -133,10 +94,58 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         const fallbackWidth = Math.floor(100 / showItems);
         return `${fallbackWidth}%`;
     }, [computedValues.itemWidth, showItems]);
+    const canSwipe = useRef(true);
+    const [drag, setDrag] = useState({ drag: 0, pointers: true });
+    const handleSwipeStart = eventData => {
+        if (!swipe) {
+            return;
+        }
+        if (eventData.dir !== 'Right' && eventData.dir !== 'Left') {
+            canSwipe.current = false;
+        }
+        else {
+            eventData.event.preventDefault();
+            eventData.event.stopPropagation();
+        }
+    };
+    const handleSwiping = eventData => {
+        if (!swipe) {
+            return;
+        }
+        if (!canSwipe.current) {
+            return;
+        }
+        eventData.event.preventDefault();
+        eventData.event.stopPropagation();
+        setDrag({ drag: eventData.deltaX, pointers: Math.abs(eventData.deltaX) < Number.MIN_SAFE_INTEGER });
+    };
+    const handleSwiped = eventData => {
+        if (!swipe) {
+            return;
+        }
+        if (!canSwipe.current) {
+            canSwipe.current = true;
+            return;
+        }
+        eventData.event.preventDefault();
+        eventData.event.stopPropagation();
+        if (Math.abs(drag.drag) < swipeActivateLength) {
+            return setDrag({ drag: 0, pointers: true });
+        }
+        slideCallback(eventData.dir === 'Left' ? -1 : 1);
+        setDrag({ drag: 0, pointers: true });
+        return;
+    };
+    const _a = useSwipeable({
+        onSwipeStart: handleSwipeStart,
+        onSwiping: handleSwiping,
+        onSwiped: handleSwiped,
+        trackMouse: true,
+    }), { ref } = _a, swipeProps = __rest(_a, ["ref"]);
     return (_jsx("div", { ref: containerRef, className: styles.itemProvider, "data-pointers": !drag.pointers || undefined, "data-swipe": swipe || undefined, "data-gap": gap, style: Object.assign({}, (Boolean(gap) ? { '--gap': gap } : {})), children: _jsx("div", Object.assign({}, swipeProps, { className: styles.itemTracker, "data-test-id": TEST_IDS.trackLine, style: {
-                transform: `translateX(${transform - drag.drag}px)`,
+                transform: `translateX(${transform + drag.drag}px)`,
                 transition: `transform ${transition}s ease 0s`,
-            }, ref: itemsTrackerRef, children: items.map((item, i) => (
+            }, ref: mergeRefs(ref, itemsTrackerRef), children: items.map((item, i) => (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
             _jsx("div", { style: { width: itemWidth }, className: styles.itemContainer, role: 'group', "data-test-id": TEST_IDS.trackItem, onClick: handleSlideClick, children: item }, i))) })) }));
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.5",
+  "version": "0.4.6-preview-a3b4b368.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,7 +41,9 @@
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.5.1",
     "lodash.debounce": "4.0.8",
+    "merge-refs": "1.3.0",
+    "react-swipeable": "7.0.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "005de80f5ebffd265f443c2ce6cd063efd91866b"
+  "gitHead": "43c28d09e8213ef3f002c8458eee128eb42ee644"
 }

package/src/components/ItemProvider/ItemProvider.tsx

@@ -1,18 +1,9 @@
 import debounce from 'lodash.debounce';
-import {
-  MouseEvent,
-  MouseEventHandler,
-  ReactElement,
-  TouchEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import mergeRefs from 'merge-refs';
+import { MouseEventHandler, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SwipeCallback, useSwipeable } from 'react-swipeable';
 
 import { TEST_IDS } from '../../testIds';
-import { getPageX } from './helpers';
 import styles from './styles.module.scss';
 
 export type ItemProviderProps = {
@@ -116,78 +107,6 @@ export function ItemProvider({
     showVisibleItems(scrollBy, page, showItems);
   }, [page, scrollBy, showItems]);
 
-  const [drag, setDrag] = useState({
-    initial: transform,
-    start: 0,
-    isDown: false,
-    drag: 0,
-    finished: true,
-    pointers: true,
-  });
-
-  const handleDragStart = (e: MouseEvent | TouchEvent) => {
-    e.persist();
-    setDrag({
-      ...drag,
-      isDown: true,
-      start: getPageX(e),
-      initial: transform,
-      finished: false,
-    });
-  };
-
-  const handleDragFinish = (e: MouseEvent | TouchEvent) => {
-    e.persist();
-
-    if (drag.finished) {
-      return;
-    }
-
-    if (Math.abs(drag.drag) < swipeActivateLength) {
-      return setDrag({
-        initial: transform,
-        start: 0,
-        isDown: false,
-        drag: 0,
-        finished: true,
-        pointers: true,
-      });
-    }
-
-    slideCallback(drag.drag > 0 ? -1 : 1);
-    setDrag({ ...drag, drag: 0, isDown: false, finished: true, pointers: true });
-    return;
-  };
-
-  const handleDragMove = (e: MouseEvent | TouchEvent) => {
-    e.persist();
-
-    if (!drag.isDown) {
-      return;
-    }
-
-    const pos = getPageX(e);
-
-    setDrag({
-      ...drag,
-      drag: drag.start - pos,
-      pointers: Math.abs(drag.start - pos) < Number.MIN_SAFE_INTEGER,
-    });
-  };
-
-  const swipeProps = swipe
-    ? {
-        onTouchCancel: handleDragFinish,
-        onTouchEnd: handleDragFinish,
-        onTouchMove: handleDragMove,
-        onTouchStart: handleDragStart,
-        onMouseDown: handleDragStart,
-        onMouseLeave: handleDragFinish,
-        onMouseUp: handleDragFinish,
-        onMouseMove: handleDragMove,
-      }
-    : {};
-
   const handleSlideClick: MouseEventHandler = useCallback(
     e => {
       const slideRect = e.currentTarget.getBoundingClientRect();
@@ -212,6 +131,65 @@ export function ItemProvider({
     return `${fallbackWidth}%`;
   }, [computedValues.itemWidth, showItems]);
 
+  const canSwipe = useRef(true);
+  const [drag, setDrag] = useState({ drag: 0, pointers: true });
+
+  const handleSwipeStart: SwipeCallback = eventData => {
+    if (!swipe) {
+      return;
+    }
+
+    if (eventData.dir !== 'Right' && eventData.dir !== 'Left') {
+      canSwipe.current = false;
+    } else {
+      eventData.event.preventDefault();
+      eventData.event.stopPropagation();
+    }
+  };
+
+  const handleSwiping: SwipeCallback = eventData => {
+    if (!swipe) {
+      return;
+    }
+
+    if (!canSwipe.current) {
+      return;
+    }
+
+    eventData.event.preventDefault();
+    eventData.event.stopPropagation();
+    setDrag({ drag: eventData.deltaX, pointers: Math.abs(eventData.deltaX) < Number.MIN_SAFE_INTEGER });
+  };
+
+  const handleSwiped: SwipeCallback = eventData => {
+    if (!swipe) {
+      return;
+    }
+
+    if (!canSwipe.current) {
+      canSwipe.current = true;
+      return;
+    }
+
+    eventData.event.preventDefault();
+    eventData.event.stopPropagation();
+
+    if (Math.abs(drag.drag) < swipeActivateLength) {
+      return setDrag({ drag: 0, pointers: true });
+    }
+
+    slideCallback(eventData.dir === 'Left' ? -1 : 1);
+    setDrag({ drag: 0, pointers: true });
+    return;
+  };
+
+  const { ref, ...swipeProps } = useSwipeable({
+    onSwipeStart: handleSwipeStart,
+    onSwiping: handleSwiping,
+    onSwiped: handleSwiped,
+    trackMouse: true,
+  });
+
   return (
     <div
       ref={containerRef}
@@ -228,10 +206,10 @@ export function ItemProvider({
         className={styles.itemTracker}
         data-test-id={TEST_IDS.trackLine}
         style={{
-          transform: `translateX(${transform - drag.drag}px)`,
+          transform: `translateX(${transform + drag.drag}px)`,
           transition: `transform ${transition}s ease 0s`,
         }}
-        ref={itemsTrackerRef}
+        ref={mergeRefs(ref as (element: HTMLDivElement) => void, itemsTrackerRef)}
       >
         {items.map((item, i) => (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

package/dist/cjs/components/ItemProvider/helpers.d.ts

@@ -1,2 +0,0 @@
-import { MouseEvent, TouchEvent } from 'react';
-export declare function getPageX(e: TouchEvent | MouseEvent): number;

package/dist/cjs/components/ItemProvider/helpers.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPageX = getPageX;
-function getPageX(e) {
-  if (e.nativeEvent instanceof globalThis.MouseEvent) {
-    return e.nativeEvent.pageX;
-  } else if (e.nativeEvent instanceof globalThis.TouchEvent) {
-    return e.nativeEvent.changedTouches[0].pageX;
-  }
-  return 0;
-}

package/dist/esm/components/ItemProvider/helpers.d.ts

@@ -1,2 +0,0 @@
-import { MouseEvent, TouchEvent } from 'react';
-export declare function getPageX(e: TouchEvent | MouseEvent): number;

package/dist/esm/components/ItemProvider/helpers.js

@@ -1,9 +0,0 @@
-export function getPageX(e) {
-    if (e.nativeEvent instanceof globalThis.MouseEvent) {
-        return e.nativeEvent.pageX;
-    }
-    else if (e.nativeEvent instanceof globalThis.TouchEvent) {
-        return e.nativeEvent.changedTouches[0].pageX;
-    }
-    return 0;
-}

package/src/components/ItemProvider/helpers.ts

@@ -1,11 +0,0 @@
-import { MouseEvent, TouchEvent } from 'react';
-
-export function getPageX(e: TouchEvent | MouseEvent): number {
-  if (e.nativeEvent instanceof globalThis.MouseEvent) {
-    return e.nativeEvent.pageX;
-  } else if (e.nativeEvent instanceof globalThis.TouchEvent) {
-    return e.nativeEvent.changedTouches[0].pageX;
-  }
-
-  return 0;
-}