@cleartrip/ct-design-intersection-observer 4.0.0-SNAPSHOT-rnfinaltest56.0 → 4.0.0-SNAPSHOT-rnfinaltest58.0

package/src/useinView.ts

@@ -1,159 +1,23 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { Dimensions, View } from 'react-native';
-import { useAddObservableChild, useGetScrolling } from '@cleartrip/ct-design-scroll-container';
+import { useAddObservableChild } from '@cleartrip/ct-design-scroll-container';
 import { useListItem } from '@cleartrip/ct-design-list';
 import { promiseHandler } from '@cleartrip/ct-design-common-utils';
 
 import { IntersectionOptions, InViewHookResponse } from './useInViewType';
 
-const { width, height } = Dimensions.get('window');
-/**
- * todo
- * horizontal scroll and root margin
- */
-
-interface VisibilityState {
-  visibleRef: React.MutableRefObject<number>;
-  timeoutVisibleRef: React.MutableRefObject<boolean>;
-  timeoutVisibleStartRef: React.MutableRefObject<{ start: number; end: number }>;
-  triggerOnceValue: React.MutableRefObject<boolean>;
-}
-
-const calculateVisibility = (
-  rectTop: number,
-  rectBottom: number,
-  rectHeight: number,
-  rectLeft: number,
-  rectRight: number,
-  rectWidth: number,
-  observerBox: [number, number, number | undefined, number | undefined],
-): { verticalVisibility: number; horizontalVisibility: number } => {
-  const [top, left, _height = height, _width = width] = observerBox;
-
-  // Calculate vertical visibility
-  let verticalVisibility = 0;
-  if (rectHeight) {
-    if (rectTop >= top && rectBottom <= _height) {
-      verticalVisibility = 100;
-    } else if (rectTop < top) {
-      verticalVisibility = ((rectBottom - top) / rectHeight) * 100;
-    } else {
-      verticalVisibility = ((_height - rectTop) / rectHeight) * 100;
-    }
-  } else {
-    const visibleHeight = rectTop > top && rectTop < _height ? rectTop - top : 0;
-    verticalVisibility = (visibleHeight / _height) * 100;
-  }
-
-  // Calculate horizontal visibility
-  let horizontalVisibility = 0;
-  if (rectWidth) {
-    if (rectLeft >= left && rectRight <= _width) {
-      horizontalVisibility = 100;
-    } else if (rectLeft < left) {
-      horizontalVisibility = ((rectRight - left) / rectWidth) * 100;
-    } else {
-      horizontalVisibility = ((_width - rectLeft) / rectWidth) * 100;
-    }
-  } else {
-    const visibleWidth = rectLeft > left && rectLeft < _width ? rectLeft - left : 0;
-    horizontalVisibility = (visibleWidth / _width) * 100;
-  }
-
-  return { verticalVisibility, horizontalVisibility };
-};
-
-const handleVisibilityChange = (
-  visibility: number,
-  threshold: number[],
-  state: VisibilityState,
-  callbacks: {
-    onChange?: (visible: boolean) => void;
-    onIntersectionComplete?: () => void;
-    onTimedObservationComplete?: () => void;
-    triggerOnce?: boolean;
-    minimumObservationTime: number;
-    observerMethod?: (visibleItems?: Set<number>, isScrolling?: boolean) => void;
-  },
-) => {
-  const { visibleRef, timeoutVisibleRef, timeoutVisibleStartRef, triggerOnceValue } = state;
-  const {
-    onChange,
-    onIntersectionComplete,
-    onTimedObservationComplete,
-    triggerOnce,
-    minimumObservationTime,
-    observerMethod,
-  } = callbacks;
-
-  if (visibility === 0) {
-    if (visibleRef.current > 0) {
-      onIntersectionComplete?.();
-    }
-    visibleRef.current = 0;
-    timeoutVisibleRef.current = false;
-    timeoutVisibleStartRef.current.end = 0;
-    timeoutVisibleStartRef.current.start = 0;
-    return;
-  }
-
-  const thresholdVisibility = threshold[visibleRef.current] * 100;
-
-  if (visibility >= thresholdVisibility) {
-    if (!triggerOnceValue.current) {
-      timeoutVisibleRef.current = true;
-      visibleRef.current = visibleRef.current + 1;
-
-      if (timeoutVisibleStartRef.current.start === 0) {
-        timeoutVisibleStartRef.current.start = Date.now();
-      } else {
-        timeoutVisibleStartRef.current.end = Date.now();
-      }
-
-      if (triggerOnce) {
-        triggerOnceValue.current = true;
-      }
-      onChange?.(true);
-      setTimeout(() => {
-        observerMethod?.();
-      }, minimumObservationTime);
-    }
-  }
-
-  if (
-    timeoutVisibleRef.current &&
-    timeoutVisibleStartRef.current.start > 0 &&
-    Date.now() - timeoutVisibleStartRef.current.start >= minimumObservationTime
-  ) {
-    timeoutVisibleRef.current = false;
-    onTimedObservationComplete?.();
-    timeoutVisibleStartRef.current.end = -1;
-    timeoutVisibleStartRef.current.start = -1;
-  }
-};
-
 const useInView = <T>({
-  threshold = [0.01, 0.5],
-  timedThreshold = 1000,
   onChange,
   onIntersectionComplete,
   onTimedObservationComplete,
-  minimumObservationTime = timedThreshold,
-  observerBox = [0, 0, height, width],
-  gestureHorizontallyScrollable = false,
-  triggerOnce = false,
   observeOnScroll = false,
   onUnmount,
-  checkFullVisibility = false,
 }: IntersectionOptions): InViewHookResponse<T> => {
-  const ref = useRef<View>(null);
+  const ref = useRef<HTMLDivElement>(null);
   const visibleRef = useRef(0);
   const timeoutVisibleRef = useRef(false);
   const timeoutVisibleStartRef = useRef({ start: 0, end: 0 });
   const triggerOnceValue = useRef(false);
-
-  const { horizontal } = useGetScrolling();
   const { listId } = useListItem();
 
   const observerMethod = useCallback(
@@ -186,68 +50,10 @@ const useInView = <T>({
             resolve();
             return;
           }
-          ref.current?.measure((_x, _y, width, height, pageX, pageY) => {
-            const { verticalVisibility, horizontalVisibility } = calculateVisibility(
-              pageY,
-              pageY + height,
-              height,
-              pageX,
-              pageX + width,
-              width,
-              observerBox,
-            );
-
-            const visiblePercentage = threshold[0] * 100;
-            const isVisible =
-              horizontal || gestureHorizontallyScrollable
-                ? horizontalVisibility >= visiblePercentage
-                : verticalVisibility >= visiblePercentage;
-            const visibility = horizontal ? horizontalVisibility : verticalVisibility;
-
-            const totalVisibility = (horizontalVisibility * verticalVisibility) / 100;
-            const isTotalVisible = totalVisibility >= visiblePercentage;
-
-            const state = {
-              visibleRef,
-              timeoutVisibleRef,
-              timeoutVisibleStartRef,
-              triggerOnceValue,
-            };
-
-            const callbacks = {
-              onChange,
-              onIntersectionComplete,
-              onTimedObservationComplete,
-              triggerOnce,
-              minimumObservationTime,
-              observerMethod,
-            };
-            if (isTotalVisible) {
-              handleVisibilityChange(totalVisibility, threshold, state, callbacks);
-            } else if (!checkFullVisibility && isVisible) {
-              handleVisibilityChange(visibility, threshold, state, callbacks);
-            } else {
-              handleVisibilityChange(0, threshold, state, callbacks);
-            }
-            resolve();
-          });
         });
       }, ref.current);
     },
-    [
-      checkFullVisibility,
-      gestureHorizontallyScrollable,
-      horizontal,
-      listId,
-      minimumObservationTime,
-      observeOnScroll,
-      observerBox,
-      onChange,
-      onIntersectionComplete,
-      onTimedObservationComplete,
-      threshold,
-      triggerOnce,
-    ],
+    [listId, observeOnScroll, onChange, onIntersectionComplete, onTimedObservationComplete],
   );
 
   const addObservable = useCallback(() => {