react-native-gesture-image-viewer 2.4.0 → 3.0.0-beta.1

package/src/useGestureViewerPaging.web.ts

@@ -1,453 +0,0 @@
-import { useCallback, useEffect, useRef, useState, type MouseEvent } from 'react';
-import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
-
-import type {
-  UseGestureViewerPagingArgs,
-  UseGestureViewerPagingResult,
-  WebClickTarget,
-} from './useGestureViewerPaging.types';
-import { applyTapZoomAtPoint } from './utils/tapZoom';
-import {
-  getWebAutoPlayTargetPhysicalIndex,
-  getWebScrollPhysicalIndex,
-  resolveWebScrollFinalState,
-} from './utils/webScroll';
-
-type WebScrollActor = 'idle' | 'user' | 'autoplay';
-
-type WebScrollRuntime = {
-  actor: WebScrollActor;
-  isAutoplayPausedByUser: boolean;
-  lastSettledPhysicalIndex: number;
-  latestOffsetX: number;
-  latestRawPhysicalIndex: number;
-  lastProgrammaticScrollVersion: number;
-  settleTimer: ReturnType<typeof setTimeout> | null;
-  resumeAutoplayTimer: ReturnType<typeof setTimeout> | null;
-};
-
-export function useGestureViewerPaging({
-  adjustedInitialIndex,
-  autoPlay,
-  autoPlayInterval,
-  currentIndex,
-  dataLength,
-  enableDoubleTapZoom,
-  enableHorizontalSwipe,
-  enableLoop,
-  height,
-  onSingleTap,
-  isRotated,
-  isZoomed,
-  itemSpacing,
-  manager,
-  maxZoomScale,
-  scale,
-  scrollTo,
-  syncCurrentIndex,
-  syncPendingIndex,
-  translateX,
-  translateY,
-  width,
-}: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
-  const [activeListIndex, setActiveListIndex] = useState(adjustedInitialIndex);
-  const activeResetItemSpacing = adjustedInitialIndex > 0 ? itemSpacing : 0;
-  const activeResetWidth = adjustedInitialIndex > 0 ? width : 0;
-  const webSingleTapTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const webScrollRuntimeRef = useRef<WebScrollRuntime>({
-    actor: 'idle',
-    isAutoplayPausedByUser: false,
-    lastSettledPhysicalIndex: adjustedInitialIndex,
-    latestOffsetX: adjustedInitialIndex * (width + itemSpacing),
-    latestRawPhysicalIndex: adjustedInitialIndex,
-    lastProgrammaticScrollVersion: 0,
-    settleTimer: null,
-    resumeAutoplayTimer: null,
-  });
-
-  const clearWebSingleTapTimer = useCallback(() => {
-    if (webSingleTapTimerRef.current) {
-      clearTimeout(webSingleTapTimerRef.current);
-      webSingleTapTimerRef.current = null;
-    }
-  }, []);
-
-  const clearWebSettleTimer = useCallback(() => {
-    const runtime = webScrollRuntimeRef.current;
-
-    if (runtime.settleTimer) {
-      clearTimeout(runtime.settleTimer);
-      runtime.settleTimer = null;
-    }
-  }, []);
-
-  const clearWebAutoplayResumeTimer = useCallback(() => {
-    const runtime = webScrollRuntimeRef.current;
-
-    if (runtime.resumeAutoplayTimer) {
-      clearTimeout(runtime.resumeAutoplayTimer);
-      runtime.resumeAutoplayTimer = null;
-    }
-  }, []);
-
-  const scheduleWebAutoplayResume = useCallback(() => {
-    const runtime = webScrollRuntimeRef.current;
-
-    clearWebAutoplayResumeTimer();
-    runtime.resumeAutoplayTimer = setTimeout(() => {
-      runtime.isAutoplayPausedByUser = false;
-      runtime.resumeAutoplayTimer = null;
-    }, 800);
-  }, [clearWebAutoplayResumeTimer]);
-
-  const pauseWebAutoplayWithoutPagingInteraction = useCallback(() => {
-    const runtime = webScrollRuntimeRef.current;
-
-    runtime.isAutoplayPausedByUser = true;
-    runtime.actor = 'idle';
-    clearWebAutoplayResumeTimer();
-  }, [clearWebAutoplayResumeTimer]);
-
-  const beginWebUserInteraction = useCallback(
-    (force = false) => {
-      const runtime = webScrollRuntimeRef.current;
-
-      if (!force && runtime.actor === 'autoplay') {
-        return;
-      }
-
-      runtime.actor = 'user';
-      runtime.isAutoplayPausedByUser = true;
-      clearWebAutoplayResumeTimer();
-    },
-    [clearWebAutoplayResumeTimer],
-  );
-
-  const beginWebAutoplayScroll = useCallback(() => {
-    const runtime = webScrollRuntimeRef.current;
-
-    runtime.actor = 'autoplay';
-    runtime.isAutoplayPausedByUser = false;
-    runtime.lastProgrammaticScrollVersion = manager?.getProgrammaticScrollVersion() ?? 0;
-    clearWebAutoplayResumeTimer();
-  }, [clearWebAutoplayResumeTimer, manager]);
-
-  const syncProgrammaticActorFromManager = useCallback(() => {
-    const runtime = webScrollRuntimeRef.current;
-    const nextVersion = manager?.getProgrammaticScrollVersion() ?? 0;
-
-    if (nextVersion === runtime.lastProgrammaticScrollVersion) {
-      return;
-    }
-
-    runtime.actor = 'autoplay';
-    runtime.isAutoplayPausedByUser = false;
-    runtime.lastProgrammaticScrollVersion = nextVersion;
-    clearWebAutoplayResumeTimer();
-  }, [clearWebAutoplayResumeTimer, manager]);
-
-  const finalizeWebScroll = useCallback(
-    (offsetX: number, source: 'scroll' | 'momentum' = 'scroll') => {
-      if (!enableHorizontalSwipe || dataLength <= 0) {
-        return;
-      }
-
-      const runtime = webScrollRuntimeRef.current;
-      const settledByActor = runtime.actor;
-
-      clearWebSettleTimer();
-      runtime.latestOffsetX = offsetX;
-
-      const settledState = resolveWebScrollFinalState({
-        dataLength,
-        enableLoop,
-        lastSettledPhysicalIndex: runtime.lastSettledPhysicalIndex,
-        offsetX,
-        pageWidth: width + itemSpacing,
-      });
-
-      if (!settledState) {
-        return;
-      }
-
-      const { logicalIndex, rawPhysicalIndex, settledPhysicalIndex } = settledState;
-
-      if (source === 'scroll' && runtime.latestRawPhysicalIndex !== rawPhysicalIndex) {
-        return;
-      }
-
-      if (rawPhysicalIndex !== settledPhysicalIndex) {
-        const crossedLoopBoundary =
-          enableLoop &&
-          dataLength > 1 &&
-          (rawPhysicalIndex === 0 || rawPhysicalIndex === dataLength + 1);
-
-        scrollTo(settledPhysicalIndex, !crossedLoopBoundary);
-      }
-
-      runtime.lastSettledPhysicalIndex = settledPhysicalIndex;
-      runtime.latestOffsetX = settledPhysicalIndex * (width + itemSpacing);
-      runtime.actor = 'idle';
-      manager?.cancelPendingLoopTransition();
-      setActiveListIndex(settledPhysicalIndex);
-      syncCurrentIndex(logicalIndex);
-
-      if (settledByActor === 'user') {
-        scheduleWebAutoplayResume();
-      }
-    },
-    [
-      clearWebSettleTimer,
-      dataLength,
-      enableHorizontalSwipe,
-      enableLoop,
-      itemSpacing,
-      manager,
-      scheduleWebAutoplayResume,
-      scrollTo,
-      syncCurrentIndex,
-      width,
-    ],
-  );
-
-  const scheduleWebScrollSettle = useCallback(
-    (offsetX: number) => {
-      const runtime = webScrollRuntimeRef.current;
-
-      runtime.latestOffsetX = offsetX;
-      runtime.latestRawPhysicalIndex = getWebScrollPhysicalIndex(offsetX, width + itemSpacing);
-      clearWebSettleTimer();
-      runtime.settleTimer = setTimeout(() => {
-        finalizeWebScroll(runtime.latestOffsetX, 'scroll');
-      }, 180);
-    },
-    [clearWebSettleTimer, finalizeWebScroll, itemSpacing, width],
-  );
-
-  useEffect(() => {
-    const runtime = webScrollRuntimeRef.current;
-
-    runtime.actor = 'idle';
-    runtime.isAutoplayPausedByUser = false;
-    runtime.lastSettledPhysicalIndex = adjustedInitialIndex;
-    runtime.latestOffsetX = adjustedInitialIndex * (activeResetWidth + activeResetItemSpacing);
-    runtime.latestRawPhysicalIndex = adjustedInitialIndex;
-    runtime.lastProgrammaticScrollVersion = manager?.getProgrammaticScrollVersion() ?? 0;
-    setActiveListIndex(adjustedInitialIndex);
-    clearWebSettleTimer();
-    clearWebAutoplayResumeTimer();
-  }, [
-    activeResetItemSpacing,
-    activeResetWidth,
-    adjustedInitialIndex,
-    clearWebAutoplayResumeTimer,
-    clearWebSettleTimer,
-    dataLength,
-    manager,
-  ]);
-
-  useEffect(() => {
-    const runtime = webScrollRuntimeRef.current;
-
-    runtime.actor = 'idle';
-    runtime.isAutoplayPausedByUser = false;
-    runtime.latestOffsetX = runtime.lastSettledPhysicalIndex * (width + itemSpacing);
-    runtime.latestRawPhysicalIndex = runtime.lastSettledPhysicalIndex;
-    runtime.lastProgrammaticScrollVersion = manager?.getProgrammaticScrollVersion() ?? 0;
-    clearWebSettleTimer();
-    clearWebAutoplayResumeTimer();
-  }, [clearWebAutoplayResumeTimer, clearWebSettleTimer, itemSpacing, manager, width]);
-
-  useEffect(() => {
-    return () => {
-      clearWebSingleTapTimer();
-      clearWebSettleTimer();
-      clearWebAutoplayResumeTimer();
-    };
-  }, [clearWebAutoplayResumeTimer, clearWebSettleTimer, clearWebSingleTapTimer]);
-
-  useEffect(() => {
-    if (
-      !autoPlay ||
-      dataLength <= 1 ||
-      isZoomed ||
-      isRotated ||
-      (!enableLoop && currentIndex === dataLength - 1)
-    ) {
-      return;
-    }
-
-    const intervalMs = Math.max(250, Math.floor(autoPlayInterval || 0));
-
-    if (!Number.isFinite(intervalMs)) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      if (isZoomed || isRotated) {
-        return;
-      }
-
-      const runtime = webScrollRuntimeRef.current;
-
-      if (runtime.actor !== 'idle' || runtime.isAutoplayPausedByUser || runtime.settleTimer) {
-        return;
-      }
-
-      const targetPhysicalIndex = getWebAutoPlayTargetPhysicalIndex({
-        currentIndex,
-        dataLength,
-        enableLoop,
-      });
-
-      if (targetPhysicalIndex === null) {
-        return;
-      }
-
-      beginWebAutoplayScroll();
-      runtime.latestOffsetX = targetPhysicalIndex * (width + itemSpacing);
-      scrollTo(targetPhysicalIndex, true);
-      scheduleWebScrollSettle(runtime.latestOffsetX);
-    }, intervalMs);
-
-    return () => clearInterval(interval);
-  }, [
-    autoPlay,
-    autoPlayInterval,
-    beginWebAutoplayScroll,
-    currentIndex,
-    dataLength,
-    enableLoop,
-    isRotated,
-    isZoomed,
-    itemSpacing,
-    scheduleWebScrollSettle,
-    scrollTo,
-    width,
-  ]);
-
-  const onScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableHorizontalSwipe) {
-        return;
-      }
-
-      const offsetX = event.nativeEvent.contentOffset.x;
-      const runtime = webScrollRuntimeRef.current;
-      const pendingState = resolveWebScrollFinalState({
-        dataLength,
-        enableLoop,
-        lastSettledPhysicalIndex: runtime.lastSettledPhysicalIndex,
-        offsetX,
-        pageWidth: width + itemSpacing,
-      });
-
-      if (pendingState) {
-        syncPendingIndex(pendingState.logicalIndex);
-      }
-
-      syncProgrammaticActorFromManager();
-      beginWebUserInteraction();
-      scheduleWebScrollSettle(offsetX);
-    },
-    [
-      beginWebUserInteraction,
-      dataLength,
-      enableHorizontalSwipe,
-      enableLoop,
-      itemSpacing,
-      scheduleWebScrollSettle,
-      syncPendingIndex,
-      syncProgrammaticActorFromManager,
-      width,
-    ],
-  );
-
-  const onMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableHorizontalSwipe) {
-        return;
-      }
-
-      finalizeWebScroll(event.nativeEvent.contentOffset.x, 'momentum');
-    },
-    [enableHorizontalSwipe, finalizeWebScroll],
-  );
-
-  const onScrollBeginDrag = useCallback(() => {
-    beginWebUserInteraction(true);
-    clearWebSettleTimer();
-    manager?.handleScrollBeginDrag();
-  }, [beginWebUserInteraction, clearWebSettleTimer, manager]);
-
-  const onWebClick = useCallback(
-    (event: MouseEvent<WebClickTarget>) => {
-      const detail = event.detail;
-      const rect = event.currentTarget.getBoundingClientRect();
-      const resolvedX = event.clientX - rect.left;
-      const resolvedY = event.clientY - rect.top;
-
-      if (!enableDoubleTapZoom) {
-        if (!onSingleTap) {
-          return;
-        }
-
-        clearWebSingleTapTimer();
-        onSingleTap(resolvedX, resolvedY);
-        return;
-      }
-
-      if (detail === 2) {
-        clearWebSingleTapTimer();
-
-        pauseWebAutoplayWithoutPagingInteraction();
-        scheduleWebAutoplayResume();
-
-        applyTapZoomAtPoint({
-          x: resolvedX,
-          y: resolvedY,
-          width,
-          height,
-          maxZoomScale,
-          scale,
-          translateX,
-          translateY,
-        });
-        return;
-      }
-
-      if (detail !== 1 || !onSingleTap) {
-        return;
-      }
-
-      clearWebSingleTapTimer();
-
-      webSingleTapTimerRef.current = setTimeout(() => {
-        onSingleTap(resolvedX, resolvedY);
-        webSingleTapTimerRef.current = null;
-      }, 250);
-    },
-    [
-      clearWebSingleTapTimer,
-      enableDoubleTapZoom,
-      height,
-      maxZoomScale,
-      onSingleTap,
-      pauseWebAutoplayWithoutPagingInteraction,
-      scale,
-      scheduleWebAutoplayResume,
-      translateX,
-      translateY,
-      width,
-    ],
-  );
-
-  return {
-    activeListIndex,
-    onMomentumScrollEnd,
-    onScroll,
-    onScrollBeginDrag,
-    onWebClick,
-  };
-}

package/src/utils/FlashList.ts

@@ -1,7 +0,0 @@
-export let FlashList: any = null;
-
-try {
-  FlashList = require('@shopify/flash-list').FlashList;
-} catch {
-  FlashList = null;
-}

package/src/utils/webScroll.ts

@@ -1,96 +0,0 @@
-export const getWebScrollPhysicalIndex = (offsetX: number, pageWidth: number): number => {
-  if (!Number.isFinite(offsetX) || !Number.isFinite(pageWidth) || pageWidth <= 0) {
-    return 0;
-  }
-
-  return Math.max(0, Math.round(offsetX / pageWidth));
-};
-
-export const resolveWebScrollFinalState = ({
-  dataLength,
-  enableLoop,
-  lastSettledPhysicalIndex,
-  offsetX,
-  pageWidth,
-}: {
-  offsetX: number;
-  pageWidth: number;
-  lastSettledPhysicalIndex: number;
-  dataLength: number;
-  enableLoop: boolean;
-}): { logicalIndex: number; rawPhysicalIndex: number; settledPhysicalIndex: number } | null => {
-  if (
-    dataLength <= 0 ||
-    !Number.isFinite(offsetX) ||
-    !Number.isFinite(pageWidth) ||
-    pageWidth <= 0
-  ) {
-    return null;
-  }
-
-  const maxPhysicalIndex = enableLoop && dataLength > 1 ? dataLength + 1 : dataLength - 1;
-  const rawPhysicalIndex = getWebScrollPhysicalIndex(offsetX, pageWidth);
-
-  if (enableLoop && dataLength > 1) {
-    const isWrappingBackward = lastSettledPhysicalIndex === 1 && rawPhysicalIndex >= dataLength;
-    const isWrappingForward = lastSettledPhysicalIndex === dataLength && rawPhysicalIndex <= 1;
-
-    if (isWrappingBackward || rawPhysicalIndex === 0) {
-      return {
-        logicalIndex: dataLength - 1,
-        rawPhysicalIndex,
-        settledPhysicalIndex: dataLength,
-      };
-    }
-
-    if (isWrappingForward || rawPhysicalIndex >= dataLength + 1) {
-      return {
-        logicalIndex: 0,
-        rawPhysicalIndex,
-        settledPhysicalIndex: 1,
-      };
-    }
-  }
-
-  const targetPhysicalIndex = Math.max(0, Math.min(maxPhysicalIndex, rawPhysicalIndex));
-
-  if (enableLoop && dataLength > 1) {
-    return {
-      logicalIndex: targetPhysicalIndex - 1,
-      rawPhysicalIndex,
-      settledPhysicalIndex: targetPhysicalIndex,
-    };
-  }
-
-  return {
-    logicalIndex: targetPhysicalIndex,
-    rawPhysicalIndex,
-    settledPhysicalIndex: targetPhysicalIndex,
-  };
-};
-
-export const getWebAutoPlayTargetPhysicalIndex = ({
-  currentIndex,
-  dataLength,
-  enableLoop,
-}: {
-  currentIndex: number;
-  dataLength: number;
-  enableLoop: boolean;
-}): number | null => {
-  if (dataLength <= 1) {
-    return null;
-  }
-
-  if (enableLoop && currentIndex === dataLength - 1) {
-    return dataLength + 1;
-  }
-
-  const nextIndex = currentIndex + 1;
-
-  if (nextIndex >= dataLength) {
-    return null;
-  }
-
-  return enableLoop ? nextIndex + 1 : nextIndex;
-};