@repliqo/sdk-react-native 0.3.8 → 0.4.0

package/src/components/RepliqoScrollView.tsx

@@ -1,302 +1,53 @@
-import React, { useCallback, useRef, useEffect } from 'react';
-import {
-  ScrollView,
-  Keyboard,
-  Dimensions,
-  type ScrollViewProps,
-  type NativeSyntheticEvent,
-  type NativeScrollEvent,
-  type LayoutChangeEvent,
-} from 'react-native';
-import { AppAnalytics } from '../core/client';
-
-/** Minimum scroll delta (px) to trigger a new tile capture. */
-const MIN_DELTA_PX = 20;
-/** Debounce: wait this long after scroll stops before capturing. */
-const DEBOUNCE_MS = 250;
-/** Throttle: minimum time between tile captures. */
-const THROTTLE_MS = 400;
-/**
- * During continuous scroll, force a capture every this many ms.
- * Ensures tiles are captured even during fast, uninterrupted scrolls
- * where the user never pauses long enough for the debounce to fire.
- */
-const SCROLL_INTERVAL_MS = 1200;
-/**
- * During scroll, throttle window-bounds re-measurement to at most once per
- * this many ms. Bounds rarely change while scrolling, but we still want to
- * catch orientation changes / keyboard / overlay animations.
- */
-const REMEASURE_THROTTLE_MS = 500;
-
-let scrollViewIdCounter = 0;
-const nextScrollViewId = () => `repliqo-scroll-${++scrollViewIdCounter}`;
-
-/**
- * Drop-in replacement for React Native's ScrollView that:
- *
- *  1. Reports scroll offset for accurate heatmap touch coords
- *  2. Captures viewport tiles on scroll stops AND during continuous
- *     scroll for collaborative screen building
- *  3. Registers its window-relative bounds with the SDK so touches can
- *     be auto-classified as "content" (inside ScrollView) or "fixed"
- *     (outside, e.g. nav bars/headers)
- */
-export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
-  ({ onScroll, onMomentumScrollEnd, onScrollEndDrag, onLayout, onContentSizeChange, ...props }, ref) => {
-    const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const scrollIntervalTimer = useRef<ReturnType<typeof setInterval> | null>(null);
-    const initialLayoutTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const lastCaptureTime = useRef(0);
-    const lastCaptureY = useRef(-999);
-    const lastMeasureTime = useRef(0);
-    const initialCaptured = useRef(false);
-    const realContentHeight = useRef(0);
-    const scrollViewId = useRef<string>(nextScrollViewId());
-    const innerRef = useRef<ScrollView | null>(null);
-    const isMounted = useRef(true);
-    // Last measured window-relative top Y of the ScrollView — passed to
-    // captureScrollTile so the backend can crop each tile to just the
-    // scroll viewport area (no fixed header/footer duplication).
-    const lastViewportTop = useRef<number | null>(null);
-    const scrollState = useRef<{
-      offsetY: number;
-      viewportHeight: number;
-      contentHeight: number;
-    } | null>(null);
-
-    // Forward the inner ref to the parent's ref (if provided).
-    // IMPORTANT: do NOT clear innerRef on cleanup — RN sometimes calls the
-    // ref callback with null mid-update, and clearing would break async
-    // measurement callbacks that fire after the ref reattaches.
-    const setRef = useCallback((node: ScrollView | null) => {
-      if (node !== null) {
-        innerRef.current = node;
-      }
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        (ref as React.MutableRefObject<ScrollView | null>).current = node;
-      }
-    }, [ref]);
-
-    /**
-     * Measure window-relative bounds and register with SDK.
-     * Idempotent + safe to call after unmount (guards via isMounted).
-     */
-    const measureAndRegister = useCallback(() => {
-      if (!isMounted.current) return;
-      const node = innerRef.current as any;
-      if (!node || typeof node.measureInWindow !== 'function') return;
-      node.measureInWindow((x: number, y: number, width: number, height: number) => {
-        if (!isMounted.current) return;
-        // RN sometimes returns 0/0 dims before the view is positioned —
-        // ignore those, the next onLayout/onScroll will re-measure.
-        if (width <= 0 || height <= 0) return;
-        lastViewportTop.current = y;
-        try {
-          AppAnalytics.getInstance().registerScrollView(scrollViewId.current, {
-            x, y, width, height,
-          });
-        } catch {}
-      });
-    }, []);
-
-    // Cleanup all timers + unregister + listeners on unmount
-    useEffect(() => {
-      const id = scrollViewId.current;
-      isMounted.current = true;
-
-      // Re-measure when keyboard appears/disappears (causes layout shift)
-      const showSub = Keyboard.addListener('keyboardDidShow', measureAndRegister);
-      const hideSub = Keyboard.addListener('keyboardDidHide', measureAndRegister);
-
-      return () => {
-        isMounted.current = false;
-        if (debounceTimer.current) clearTimeout(debounceTimer.current);
-        if (scrollIntervalTimer.current) clearInterval(scrollIntervalTimer.current);
-        if (initialLayoutTimer.current) clearTimeout(initialLayoutTimer.current);
-        showSub.remove();
-        hideSub.remove();
-        try {
-          AppAnalytics.getInstance().unregisterScrollView(id);
-        } catch {}
-      };
-    }, [measureAndRegister]);
-
-    /**
-     * Core tile capture logic. Reads from refs (stable across renders).
-     * Checks throttle + delta before capturing.
-     *
-     * @param force Skip throttle check (used for interval captures)
-     */
-    const doCapture = (force = false) => {
-      if (!isMounted.current) return;
-      const state = scrollState.current;
-      if (!state || state.viewportHeight <= 0) return;
-
-      const now = Date.now();
-      if (!force && now - lastCaptureTime.current < THROTTLE_MS) return;
-
-      // Always check delta — no point re-capturing the same position
-      if (Math.abs(state.offsetY - lastCaptureY.current) < MIN_DELTA_PX &&
-          initialCaptured.current) return;
-
-      lastCaptureTime.current = now;
-      lastCaptureY.current = state.offsetY;
-      initialCaptured.current = true;
-
-      try {
-        const windowHeight = Dimensions.get('window').height;
-        AppAnalytics.getInstance().captureScrollTile(
-          state.offsetY,
-          state.viewportHeight,
-          state.contentHeight,
-          lastViewportTop.current ?? undefined,
-          windowHeight,
-        );
-      } catch {}
-    };
-
-    /** Start the interval timer for continuous scroll captures. */
-    const startScrollInterval = () => {
-      if (scrollIntervalTimer.current !== null) return;
-      scrollIntervalTimer.current = setInterval(() => {
-        doCapture(true); // force=true skips throttle
-      }, SCROLL_INTERVAL_MS);
-    };
-
-    /** Stop the interval timer. */
-    const stopScrollInterval = () => {
-      if (scrollIntervalTimer.current !== null) {
-        clearInterval(scrollIntervalTimer.current);
-        scrollIntervalTimer.current = null;
-      }
-    };
-
-    const handleScroll = useCallback(
-      (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        const { contentOffset, layoutMeasurement, contentSize } =
-          event.nativeEvent;
-
-        // Update SDK with current scroll offset (both legacy + new registry)
-        try {
-          const sdk = AppAnalytics.getInstance();
-          sdk.setScrollOffset(contentOffset.y);
-          sdk.updateScrollViewOffset(scrollViewId.current, contentOffset.y);
-        } catch {}
-
-        // Re-measure bounds occasionally during scroll — catches layout
-        // shifts from animations, keyboard, orientation changes, etc.
-        const now = Date.now();
-        if (now - lastMeasureTime.current > REMEASURE_THROTTLE_MS) {
-          lastMeasureTime.current = now;
-          measureAndRegister();
-        }
-
-        // Update scroll state — use realContentHeight if available
-        const bestContentHeight = realContentHeight.current > 0
-          ? realContentHeight.current
-          : contentSize.height;
-        scrollState.current = {
-          offsetY: contentOffset.y,
-          viewportHeight: layoutMeasurement.height,
-          contentHeight: bestContentHeight,
-        };
-
-        // Debounce: capture after scroll stops
-        if (debounceTimer.current) clearTimeout(debounceTimer.current);
-        debounceTimer.current = setTimeout(() => doCapture(), DEBOUNCE_MS);
-
-        // Start interval for continuous scroll captures
-        startScrollInterval();
-
-        // Capture initial tile (Y~0) on first scroll event with real dims
-        if (!initialCaptured.current && contentOffset.y < 10) {
-          if (initialLayoutTimer.current) clearTimeout(initialLayoutTimer.current);
-          initialLayoutTimer.current = setTimeout(() => doCapture(), 200);
-        }
-
-        onScroll?.(event);
-      },
-      [onScroll, measureAndRegister],
-    );
-
-    const handleScrollEndDrag = useCallback(
-      (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        // User lifted finger — capture immediately
-        stopScrollInterval();
-        doCapture(true);
-        onScrollEndDrag?.(event);
-      },
-      [onScrollEndDrag],
-    );
-
-    const handleMomentumEnd = useCallback(
-      (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        if (debounceTimer.current) {
-          clearTimeout(debounceTimer.current);
-          debounceTimer.current = null;
-        }
-        stopScrollInterval();
-        doCapture(true);
-        onMomentumScrollEnd?.(event);
-      },
-      [onMomentumScrollEnd],
-    );
-
-    const handleLayout = useCallback(
-      (event: LayoutChangeEvent) => {
-        const { height } = event.nativeEvent.layout;
-        if (!initialCaptured.current && height > 0) {
-          scrollState.current = {
-            offsetY: 0,
-            viewportHeight: height,
-            contentHeight: realContentHeight.current || height,
-          };
-          // Clear any prior pending initial-capture timer before scheduling
-          if (initialLayoutTimer.current) clearTimeout(initialLayoutTimer.current);
-          initialLayoutTimer.current = setTimeout(() => doCapture(), 1000);
-        }
-        // Register window-relative bounds immediately (no setTimeout).
-        // measureInWindow itself is async; if it returns 0/0 dims, the
-        // next onLayout / onScroll will retry — no race window.
-        measureAndRegister();
-        onLayout?.(event);
-      },
-      [onLayout, measureAndRegister],
-    );
-
-    /**
-     * Track the real content height from onContentSizeChange.
-     * This is more reliable than the first scroll event and ensures
-     * the initial tile at Y=0 has correct contentHeight metadata.
-     */
-    const handleContentSizeChange = useCallback(
-      (w: number, h: number) => {
-        realContentHeight.current = h;
-        // Update scroll state if it exists
-        if (scrollState.current) {
-          scrollState.current.contentHeight = h;
-        }
-        onContentSizeChange?.(w, h);
-      },
-      [onContentSizeChange],
-    );
-
-    return (
-      <ScrollView
-        ref={setRef}
-        {...props}
-        onScroll={handleScroll}
-        onScrollEndDrag={handleScrollEndDrag}
-        onMomentumScrollEnd={handleMomentumEnd}
-        onLayout={handleLayout}
-        onContentSizeChange={handleContentSizeChange}
-        scrollEventThrottle={props.scrollEventThrottle ?? 16}
-      />
-    );
-  },
-);
-
-RepliqoScrollView.displayName = 'RepliqoScrollView';
+import React from 'react';
+import { ScrollView, type ScrollViewProps } from 'react-native';
+import { useRepliqoScrollTracking } from './useRepliqoScrollTracking';
+
+/**
+ * Drop-in replacement for React Native's ScrollView that:
+ *
+ *  1. Reports scroll offset for accurate heatmap touch coords
+ *  2. Captures viewport tiles on scroll stops AND during continuous
+ *     scroll for collaborative screen building
+ *  3. Registers its window-relative bounds with the SDK so touches can
+ *     be auto-classified as "content" (inside ScrollView) or "fixed"
+ *     (outside, e.g. nav bars/headers)
+ *
+ * All analytics behavior lives in useRepliqoScrollTracking (shared with
+ * RepliqoFlatList).
+ */
+export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
+  (
+    {
+      onScroll,
+      onMomentumScrollEnd,
+      onScrollEndDrag,
+      onLayout,
+      onContentSizeChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const tracking = useRepliqoScrollTracking(ref, {
+      onScroll,
+      onMomentumScrollEnd,
+      onScrollEndDrag,
+      onLayout,
+      onContentSizeChange,
+    });
+
+    return (
+      <ScrollView
+        ref={tracking.setRef}
+        {...props}
+        onScroll={tracking.onScroll}
+        onScrollEndDrag={tracking.onScrollEndDrag}
+        onMomentumScrollEnd={tracking.onMomentumScrollEnd}
+        onLayout={tracking.onLayout}
+        onContentSizeChange={tracking.onContentSizeChange}
+        scrollEventThrottle={props.scrollEventThrottle ?? 16}
+      />
+    );
+  },
+);
+
+RepliqoScrollView.displayName = 'RepliqoScrollView';