SwipeRecognizer.js — react Source File

Source Code

import React, {
  useRef,
  useEffect,
  startTransition,
  unstable_startGestureTransition as startGestureTransition,
} from 'react';

import ScrollTimelinePolyfill from 'animation-timelines/scroll-timeline';
import TouchPanTimeline from 'animation-timelines/touch-pan-timeline';

const ua = typeof navigator === 'undefined' ? '' : navigator.userAgent;
const isSafariMobile =
  ua.indexOf('Safari') !== -1 &&
  (ua.indexOf('iPhone') !== -1 ||
    ua.indexOf('iPad') !== -1 ||
    ua.indexOf('iPod') !== -1);

// Example of a Component that can recognize swipe gestures using a ScrollTimeline
// without scrolling its own content. Allowing it to be used as an inert gesture
// recognizer to drive a View Transition.
export default function SwipeRecognizer({
  action,
  children,
  direction,
  gesture,
}) {
  if (direction == null) {
    direction = 'left';
  }
  const axis = direction === 'left' || direction === 'right' ? 'x' : 'y';

  const scrollRef = useRef(null);
  const activeGesture = useRef(null);
  const touchTimeline = useRef(null);

  function onTouchStart(event) {
    if (!isSafariMobile && typeof ScrollTimeline === 'function') {
      // If not Safari and native ScrollTimeline is supported, then we use that.
      return;
    }
    if (touchTimeline.current) {
      // We can catch the gesture before it settles.
      return;
    }
    const scrollElement = scrollRef.current;
    const bounds =
      axis === 'x' ? scrollElement.clientWidth : scrollElement.clientHeight;
    const range =
      direction === 'left' || direction === 'up' ? [bounds, 0] : [0, -bounds];
    const timeline = new TouchPanTimeline({
      touch: event,
      source: scrollElement,
      axis: axis,
      range: range,
      snap: range,
    });
    touchTimeline.current = timeline;
    timeline.settled.then(() => {
      if (touchTimeline.current !== timeline) {
        return;
// ... (197 more lines)