@amaui/ui-react/esm/useSwipe/useSwipe.js

UI for React

import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { clamp, merge, percentageFromValueWithinRange } from '@amaui/utils';
const optionsDefault = {
  flick: true,
  flickTreshold: 140
};
const useSwipe = function (element) {
  let options_ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const [response, setResponse] = React.useState();
  const [touch, setTouch] = React.useState(false);
  const options = merge(options_, optionsDefault);
  const refs = {
    rect: React.useRef(undefined),
    element: React.useRef(undefined),
    options: React.useRef(options),
    response: React.useRef(undefined),
    touch: React.useRef(undefined),
    previous: React.useRef(undefined),
    previousMouseMove: React.useRef(undefined)
  };
  refs.options.current = options;
  refs.response.current = response;
  refs.touch.current = touch;
  const onTouchStart = React.useCallback(event => setTouch(event), []);
  const getMinMax = React.useCallback(() => {
    let min;
    let max;
    const optionsMin = refs.options.current.min || 0;
    if (refs.options.current.direction === 'top') {
      min = refs.rect.current.top;
      max = refs.rect.current.bottom - optionsMin;
    }
    if (refs.options.current.direction === 'left') {
      min = refs.rect.current.left;
      max = refs.rect.current.right - optionsMin;
    }
    if (refs.options.current.direction === 'right') {
      min = window.innerWidth - refs.rect.current.left - optionsMin;
      max = min + refs.rect.current.width - optionsMin;
    }
    if (refs.options.current.direction === 'bottom') {
      min = window.innerHeight - refs.rect.current.top - optionsMin;
      max = min + refs.rect.current.height - optionsMin;
    }
    return {
      min,
      max
    };
  }, []);
  const onTouchEnd = React.useCallback(() => {
    const newResponse = _objectSpread({}, refs.response.current);
    const {
      min,
      max
    } = getMinMax();
    let isFlick = false;
    if (refs.options.current.flick) {
      const now = new Date().getTime();
      const flick = now - refs.previousMouseMove.current <= refs.options.current.flickTreshold && newResponse.valuePercentage < 100;
      if (flick) isFlick = true;
    }
    newResponse.value = ['left', 'top'].includes(refs.options.current.direction) && (newResponse.valuePercentage < 50 || isFlick) || ['right', 'bottom'].includes(refs.options.current.direction) && newResponse.valuePercentage > 50 && !isFlick ? min : max;
    newResponse.position = newResponse.valuePercentage < 50 || isFlick ? 'min' : 'max';
    newResponse.min = min;
    newResponse.max = max;
    newResponse.flick = isFlick;
    refs.previous.current = undefined;
    setTouch(false);
    setResponse(newResponse);
  }, [response]);
  const onTouchMove = React.useCallback(event => {
    const newResponse = _objectSpread({}, refs.response.current);
    const {
      clientX: x_,
      clientY: y_
    } = event.touches[0];
    const {
      clientX: pX,
      clientY: pY
    } = refs.previous.current.touches[0];
    const x = pX - x_;
    const y = pY - y_;
    const {
      top = 0,
      left = 0,
      width = 0,
      height = 0
    } = element?.getBoundingClientRect() || {};

    // value
    let value_;
    const {
      min,
      max
    } = getMinMax();
    if (refs.options.current.direction === 'top') {
      value_ = top - y;
    }
    if (refs.options.current.direction === 'left') {
      value_ = left - x;
    }
    if (refs.options.current.direction === 'right') {
      value_ = width - (window.innerWidth - left) - x;
    }
    if (refs.options.current.direction === 'bottom') {
      value_ = height - (window.innerHeight - top) - y;
    }
    newResponse.min = min;
    newResponse.max = max;
    newResponse.value = clamp(value_, min, max);
    newResponse.valuePercentage = percentageFromValueWithinRange(newResponse.value, min, max);
    if (['bottom', 'right'].includes(refs.options.current.direction)) newResponse.valuePercentage = 100 - newResponse.valuePercentage;

    // Only value move at touchmove
    newResponse.position = undefined;

    // previous mouse move
    refs.previousMouseMove.current = new Date().getTime();
    setResponse(newResponse);
  }, [element, response]);
  React.useEffect(() => {
    const onTouchMoveMethod = event => {
      // Workaround for proper element for touchmove
      if (refs.options.current.open && refs.previous.current && (refs.options.current.touchAnywhere || refs.touch.current || element.contains(document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY)))) {
        if (!refs.touch.current) setTouch(true);
        onTouchMove(event);
      }
      refs.previous.current = event;
    };
    if (element) {
      refs.element.current = element;
      refs.rect.current = element.getBoundingClientRect();
      element.addEventListener('touchstart', onTouchStart, {
        passive: true
      });
      const rootDocument = element?.ownerDocument || window.document;
      rootDocument.addEventListener('touchend', onTouchEnd, {
        passive: true
      });
      rootDocument.addEventListener('touchmove', onTouchMoveMethod, {
        passive: true
      });
    }
    return () => {
      // Remove previous event listeners
      if (element) element.removeEventListener('touchstart', onTouchStart);
      const rootDocument = element?.ownerDocument || window.document;
      rootDocument.removeEventListener('touchend', onTouchEnd);
      rootDocument.removeEventListener('touchmove', onTouchMoveMethod);
    };
  }, [element]);
  return response;
};
useSwipe.displayName = 'amaui-UseSwipe';
export default useSwipe;