@xhsreds/reds-rn-next 0.9.1-feat-image-2202510231126 → 0.9.1-test.0

package/lib/esm/pvCount/pvData.js

@@ -1,7 +1,7 @@
 import { push, pushByrequestIdleCallback } from '@xhs/reds-apm/src/index.native';
 
 var name = "@xhs/reds-rn-next";
-var version = "0.9.0";
+var version = "0.9.1-test.0";
 var author = "贾斌(呀哈) <jiabin@xiaohongshu.com>";
 var license = "ISC";
 var dependencies = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.9.1-feat-image-2202510231126",
+  "version": "0.9.1-test.0",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {

package/src/components/Image/VisibilitySensor.tsx

@@ -1,44 +1,98 @@
-import React, { useCallback, useEffect, useRef, forwardRef, useImperativeHandle } from "react";
-import { Dimensions, View } from "react-native";
-import type { VisibilitySensorRef, VisibilitySensorProps } from "./interface/visibilitySensor";
-
-// Measure visibility once on first layout to avoid state-driven re-render loops
+import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react";
+import { Dimensions, type ScaledSize, View } from "react-native";
+import type { VisibilitySensorRef, VisibilitySensorProps, RectDimensionsState } from "./interface/visibilitySensor";
+// function useInterval(callback: () => void, delay: number | null) {
+//   const savedCallback = useRef(callback);
+//   useEffect(() => {
+//     savedCallback.current = callback;
+//   }, [callback]);
+//   useEffect(() => {
+//     if (delay === null || delay === undefined) {
+//       return;
+//     }
+//     const id = setInterval(() => savedCallback.current(), delay);
+//     return () => clearInterval(id);
+//   }, [delay]);
+// }
 const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {
-  const { onChange, disabled = false, threshold = {}, children, ...rest } = props;
+  const { onChange, disabled = false, triggerOnce = false, delay, threshold = {}, children, ...rest } = props;
   const localRef = useRef<View>(null);
-  const measuredOnceRef = useRef(false);
-
+  const hasMountedRef = useRef(false);
   useImperativeHandle(ref, () => ({
     getInnerRef: () => localRef.current,
   }));
-
-  const measureOnce = useCallback(() => {
-    if (disabled || measuredOnceRef.current) return;
-    const win = Dimensions.get("window");
-    localRef.current?.measure((_, __, width: number, height: number, pageX: number, pageY: number) => {
-      if (measuredOnceRef.current) return; // guard against double-calls in same frame
-      const isVisible =
-        pageY + (threshold.top || 0) <= win.height &&
-        pageY + height - (threshold.bottom || 0) >= 0 &&
-        pageX + (threshold.left || 0) <= win.width &&
-        pageX + width - (threshold.right || 0) >= 0;
-      measuredOnceRef.current = true;
-      onChange(isVisible);
+  const [rectDimensions, setRectDimensions] = useState<RectDimensionsState>({
+    rectTop: 0,
+    rectBottom: 0,
+    rectLeft: 0,
+    rectRight: 0,
+    rectWidth: 0,
+    rectHeight: 0,
+  });
+  const [lastValue, setLastValue] = useState<boolean | undefined>(undefined);
+  const [active, setActive] = useState<boolean>(false);
+  const measureInnerView = () => {
+    if (!active) return;
+    localRef.current?.measure((_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {
+      const dimensions = {
+        rectTop: pageY,
+        rectBottom: pageY + height,
+        rectLeft: pageX,
+        rectRight: pageX + width,
+        rectWidth: width,
+        rectHeight: height,
+      };
+      if (
+        rectDimensions.rectTop !== dimensions.rectTop ||
+        rectDimensions.rectBottom !== dimensions.rectBottom ||
+        rectDimensions.rectLeft !== dimensions.rectLeft ||
+        rectDimensions.rectRight !== dimensions.rectRight ||
+        rectDimensions.rectWidth !== dimensions.rectWidth ||
+        rectDimensions.rectHeight !== dimensions.rectHeight
+      ) {
+        setRectDimensions(dimensions);
+      }
     });
-  }, [disabled, onChange, threshold]);
-
-  // If initially disabled, measure once when enabled later
+  };
+  // useInterval(measureInnerView, delay || 100);
+  const startWatching = useCallback(() => {
+    if (!active) setActive(true);
+  }, [active]);
+  const stopWatching = useCallback(() => {
+    if (active) setActive(false);
+  }, [active]);
+  useEffect(() => {
+    if (!disabled) {
+      startWatching();
+    }
+    return () => {
+      stopWatching();
+    };
+  }, [disabled, startWatching, stopWatching]);
   useEffect(() => {
-    if (!disabled && !measuredOnceRef.current) {
-      requestAnimationFrame(() => measureOnce());
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+    const window: ScaledSize = Dimensions.get("window");
+    const isVisible: boolean =
+      rectDimensions.rectTop + (threshold.top || 0) <= window.height && // Top edge is within the bottom of the window
+      rectDimensions.rectBottom - (threshold.bottom || 0) >= 0 && // Bottom edge is within the top of the window
+      rectDimensions.rectLeft + (threshold.left || 0) <= window.width && // Left edge is within the right of the window
+      rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window
+    if (lastValue !== isVisible) {
+      setLastValue(isVisible);
+      onChange(isVisible);
+      if (isVisible && triggerOnce) {
+        stopWatching();
+      }
     }
-  }, [disabled, measureOnce]);
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rectDimensions, lastValue]);
   return (
-    <View ref={localRef} {...rest} onLayout={measureOnce}>
+    <View ref={localRef} {...rest} onLayout={() => measureInnerView()}>
       {children}
     </View>
   );
 });
-
 export default VisibilitySensor;

package/src/index.ts

@@ -1,3 +1,4 @@
+// "test"
 export * from "./components/SegmentedControl";
 export * from "./components/LanguageProvider";
 export * from "./components/NoticeBar";