@fremtind/jkl-react-hooks/build/cjs/useSwipeGesture.js

Jøkul react button components

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var useSwipeGesture_exports = {};
__export(useSwipeGesture_exports, {
  useSwipeGesture: () => useSwipeGesture
});
module.exports = __toCommonJS(useSwipeGesture_exports);
var import_react = require("react");
function getGesturePointFromEvent(event) {
  return {
    x: event.clientX,
    y: event.clientY
  };
}
function useSwipeGesture(options) {
  const swipeHandled = (0, import_react.useRef)(false);
  const gestureStartPosition = (0, import_react.useRef)();
  const {
    onClick,
    onChange,
    onPointerCancel,
    onPointerDown,
    onPointerMove,
    onPointerUp
  } = options;
  const handleClick = (0, import_react.useCallback)(
    (event) => {
      if (!swipeHandled.current) {
        onClick == null ? void 0 : onClick(event);
      }
      swipeHandled.current = false;
    },
    [onClick]
  );
  const handleGestureStart = (0, import_react.useCallback)(
    (event) => {
      var _a, _b;
      event.preventDefault();
      (_b = (_a = event.target).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
      gestureStartPosition.current = getGesturePointFromEvent(event);
      swipeHandled.current = false;
      onPointerDown == null ? void 0 : onPointerDown(event);
    },
    [onPointerDown]
  );
  const handleGestureMove = (0, import_react.useCallback)(
    (event) => {
      event.preventDefault();
      if (!gestureStartPosition.current) {
        return;
      }
      const { x: currentX } = getGesturePointFromEvent(event);
      const { x: startX } = gestureStartPosition.current;
      if (currentX - startX > 10 && onChange && swipeHandled.current !== "on") {
        onChange(event, true);
        swipeHandled.current = "on";
        gestureStartPosition.current = getGesturePointFromEvent(event);
      } else if (startX - currentX > 10 && onChange && swipeHandled.current !== "off") {
        onChange(event, false);
        swipeHandled.current = "off";
        gestureStartPosition.current = getGesturePointFromEvent(event);
      }
      onPointerMove == null ? void 0 : onPointerMove(event);
    },
    [onPointerMove, onChange]
  );
  const handleGestureEnd = (0, import_react.useCallback)(
    (event) => {
      var _a, _b;
      event.preventDefault();
      (_b = (_a = event.target).releasePointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
      gestureStartPosition.current = void 0;
      event.type === "pointerup" ? onPointerUp == null ? void 0 : onPointerUp(event) : onPointerCancel == null ? void 0 : onPointerCancel(event);
    },
    [onPointerUp, onPointerCancel]
  );
  return {
    swipeHandled,
    gestureHandlers: {
      onClick: handleClick,
      onPointerDown: handleGestureStart,
      onPointerMove: handleGestureMove,
      onPointerUp: handleGestureEnd,
      onPointerCancel: handleGestureEnd
    }
  };
}
//# sourceMappingURL=useSwipeGesture.js.map