SwipeRecognizer() — react Function Reference

Architecture documentation for the SwipeRecognizer() function in SwipeRecognizer.js from the react codebase.

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ SwipeRecognizer() — react Function Reference

Dependency Diagram

graph TD
  51ca97f2_30b8_8bb8_5a8e_c9f0d7f90432["SwipeRecognizer()"]
  4b747fe5_c4c8_5191_f40d_84115cfe4dbd["SwipeRecognizer.js"]
  51ca97f2_30b8_8bb8_5a8e_c9f0d7f90432 -->|defined in| 4b747fe5_c4c8_5191_f40d_84115cfe4dbd
  style 51ca97f2_30b8_8bb8_5a8e_c9f0d7f90432 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/view-transition/src/components/SwipeRecognizer.js lines 21–256

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;
      }
      touchTimeline.current = null;
      const changed =
        direction === 'left' || direction === 'up'
          ? timeline.currentTime < 50
          : timeline.currentTime > 50;
      onGestureEnd(changed);
    });
  }

  function onTouchEnd() {
    if (activeGesture.current === null) {
      // If we didn't start a gesture before we release, we can release our
      // timeline.
      touchTimeline.current = null;
    }
  }

  function onScroll() {
    if (activeGesture.current !== null) {
      return;
    }

    let scrollTimeline;
    if (touchTimeline.current) {
      // We're in a polyfilled touch gesture. Let's use that timeline instead.
      scrollTimeline = touchTimeline.current;
    } else if (typeof ScrollTimeline === 'function') {
      // eslint-disable-next-line no-undef
      scrollTimeline = new ScrollTimeline({
        source: scrollRef.current,
        axis: axis,
      });
    } else {
      scrollTimeline = new ScrollTimelinePolyfill({
        source: scrollRef.current,
        axis: axis,
      });
    }
    activeGesture.current = startGestureTransition(
      scrollTimeline,