tdesign-mobile-vue/lib/swipe-cell/useSwipe.js

tdesign-mobile-vue

/**
 * tdesign v1.7.0
 * (c) 2024 TDesign Group
 * @license MIT
 */

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { reactive, computed, ref } from 'vue';
import { useEventListener } from '@vueuse/core';
import isObject from 'lodash/isObject';
import { preventDefault } from '../shared/dom.js';
import { isBrowser } from '../shared/util.js';
import 'lodash/isFunction';
import 'lodash/isString';
import 'lodash/isNumber';
import '../config.js';

var noop = function noop() {};
function useSwipe(target) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var _options$threshold = options.threshold,
    threshold = _options$threshold === void 0 ? 50 : _options$threshold,
    onSwipe = options.onSwipe,
    onSwipeEnd = options.onSwipeEnd,
    onSwipeStart = options.onSwipeStart,
    _options$listenerOpti = options.listenerOptions,
    listenerOptions = _options$listenerOpti === void 0 ? false : _options$listenerOpti;
  var coordsStart = reactive({
    x: 0,
    y: 0
  });
  var coordsEnd = reactive({
    x: 0,
    y: 0
  });
  var diffX = computed(function () {
    return coordsStart.x - coordsEnd.x;
  });
  var diffY = computed(function () {
    return coordsStart.y - coordsEnd.y;
  });
  var max = Math.max,
    abs = Math.abs;
  var isThresholdExceeded = computed(function () {
    return max(abs(diffX.value), abs(diffY.value)) >= threshold;
  });
  var isSwiping = ref(false);
  var direction = computed(function () {
    if (!isThresholdExceeded.value) return "none";
    if (abs(diffX.value) > abs(diffY.value)) {
      return diffX.value > 0 ? "left" : "right";
    }
    return diffY.value > 0 ? "up" : "down";
  });
  var getTouchEventCoords = function getTouchEventCoords(e) {
    return [e.touches[0].clientX, e.touches[0].clientY];
  };
  var updateCoordsStart = function updateCoordsStart(x, y) {
    coordsStart.x = x;
    coordsStart.y = y;
  };
  var updateCoordsEnd = function updateCoordsEnd(x, y) {
    coordsEnd.x = x;
    coordsEnd.y = y;
  };
  var isPassiveEventSupported = checkPassiveEventSupport();
  var onTouchEnd = function onTouchEnd(e) {
    if (isSwiping.value) onSwipeEnd === null || onSwipeEnd === void 0 || onSwipeEnd(e, direction.value);
    isSwiping.value = false;
  };
  var stops = [useEventListener(target, "touchstart", function (e) {
    if (e.touches.length !== 1) return;
    if (listenerOptions === true || isObject(listenerOptions) && listenerOptions.capture && !listenerOptions.passive) preventDefault(e, false);
    var _getTouchEventCoords = getTouchEventCoords(e),
      _getTouchEventCoords2 = _slicedToArray(_getTouchEventCoords, 2),
      x = _getTouchEventCoords2[0],
      y = _getTouchEventCoords2[1];
    updateCoordsStart(x, y);
    updateCoordsEnd(x, y);
    onSwipeStart === null || onSwipeStart === void 0 || onSwipeStart(e);
  }, listenerOptions), useEventListener(target, "touchmove", function (e) {
    if (e.touches.length !== 1) return;
    var _getTouchEventCoords3 = getTouchEventCoords(e),
      _getTouchEventCoords4 = _slicedToArray(_getTouchEventCoords3, 2),
      x = _getTouchEventCoords4[0],
      y = _getTouchEventCoords4[1];
    updateCoordsEnd(x, y);
    if (!isSwiping.value && isThresholdExceeded.value) isSwiping.value = true;
    if (isSwiping.value) onSwipe === null || onSwipe === void 0 || onSwipe(e);
  }, listenerOptions), useEventListener(target, "touchend", onTouchEnd, listenerOptions), useEventListener(target, "touchcancel", onTouchEnd, listenerOptions)];
  var stop = function stop() {
    return stops.forEach(function (s) {
      return s();
    });
  };
  return {
    isPassiveEventSupported: isPassiveEventSupported,
    isSwiping: isSwiping,
    direction: direction,
    coordsStart: coordsStart,
    coordsEnd: coordsEnd,
    lengthX: diffX,
    lengthY: diffY,
    stop: stop
  };
}
function checkPassiveEventSupport() {
  var document = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isBrowser ? window.document : void 0;
  if (!document) return false;
  var supportsPassive = false;
  var optionsBlock = {
    get passive() {
      supportsPassive = true;
      return false;
    }
  };
  document.addEventListener("x", noop, optionsBlock);
  document.removeEventListener("x", noop);
  return supportsPassive;
}

export { useSwipe };
//# sourceMappingURL=useSwipe.js.map