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

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.1";
 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.1",
   "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/i18n/@types/resources.d.ts

@@ -1,32 +1,32 @@
 interface Resources {
   componentKey: {
-    sureKey: "Confirm";
-    satisfyKey: "Satisfy";
-    confirmKey: "Confirm";
-    uploadingKey: "Uploading";
-    resetKey: "Reset";
-    NoDataKey: "No data available at the moment";
-    liveStreamingKey: "live";
-    generallyKey: "Generally";
-    uploadFailedKey: "Upload failed";
-    submitKey: "Submit";
-    requestSuccessfulKey: "Request successful";
-    cancelKey: "Cancel";
-    PullDownToRefreshKey: "Pull down to refresh";
-    selectAllKey: "SelectAll";
-    requestDataKey: "Request data";
-    closeKey: "Close";
-    veryBadKey: "Very bad";
-    searchKey: "Search";
-    expandKey: "Expand";
-    IDCardPhotoKey: "ID card photo";
-    finishKey: "Finish";
-    surpriseKey: "Surprise";
-    releaseRefreshKey: "Release refresh";
-    nationalEmblemSideOfIDCardKey: "National emblem side of ID card";
-    buttonKey: "Button";
-    jumpKey: "Jump";
-    disappointmentKey: "Disappointment";
+    sureKey: "确定";
+    satisfyKey: "满意";
+    confirmKey: "确认";
+    uploadingKey: "上传中";
+    resetKey: "重置";
+    NoDataKey: "暂无数据";
+    liveStreamingKey: "直播";
+    generallyKey: "一般";
+    uploadFailedKey: "上传失败";
+    submitKey: "提交";
+    requestSuccessfulKey: "请求成功";
+    cancelKey: "取消";
+    PullDownToRefreshKey: "下拉刷新";
+    selectAllKey: "全选";
+    requestDataKey: "请求数据中";
+    closeKey: "收起";
+    veryBadKey: "极差";
+    searchKey: "搜索";
+    expandKey: "展开";
+    IDCardPhotoKey: "身份证人像面";
+    finishKey: "完成";
+    surpriseKey: "惊喜";
+    releaseRefreshKey: "松开刷新";
+    nationalEmblemSideOfIDCardKey: "身份证国徽面";
+    buttonKey: "按钮";
+    jumpKey: "跳转";
+    disappointmentKey: "失望";
   };
 }
 export default Resources;

package/src/i18n/index.json

@@ -1,35 +1,4 @@
 {
-  "en_us": {
-    "componentKey": {
-      "sureKey": "Confirm",
-      "satisfyKey": "Satisfy",
-      "confirmKey": "Confirm",
-      "uploadingKey": "Uploading",
-      "resetKey": "Reset",
-      "NoDataKey": "No data available at the moment",
-      "liveStreamingKey": "live",
-      "generallyKey": "Generally",
-      "uploadFailedKey": "Upload failed",
-      "submitKey": "Submit",
-      "requestSuccessfulKey": "Request successful",
-      "cancelKey": "Cancel",
-      "PullDownToRefreshKey": "Pull down to refresh",
-      "selectAllKey": "SelectAll",
-      "requestDataKey": "Request data",
-      "closeKey": "Close",
-      "veryBadKey": "Very bad",
-      "searchKey": "Search",
-      "expandKey": "Expand",
-      "IDCardPhotoKey": "ID card photo",
-      "finishKey": "Finish",
-      "surpriseKey": "Surprise",
-      "releaseRefreshKey": "Release refresh",
-      "nationalEmblemSideOfIDCardKey": "National emblem side of ID card",
-      "buttonKey": "Button",
-      "jumpKey": "Jump",
-      "disappointmentKey": "Disappointment"
-    }
-  },
   "zh_cn": {
     "componentKey": {
       "sureKey": "确定",
@@ -91,5 +60,36 @@
       "jumpKey": "跳轉",
       "disappointmentKey": "失望"
     }
+  },
+  "en_us": {
+    "componentKey": {
+      "sureKey": "Confirm",
+      "satisfyKey": "Satisfy",
+      "confirmKey": "Confirm",
+      "uploadingKey": "Uploading",
+      "resetKey": "Reset",
+      "NoDataKey": "No data available at the moment",
+      "liveStreamingKey": "live",
+      "generallyKey": "Generally",
+      "uploadFailedKey": "Upload failed",
+      "submitKey": "Submit",
+      "requestSuccessfulKey": "Request successful",
+      "cancelKey": "Cancel",
+      "PullDownToRefreshKey": "Pull down to refresh",
+      "selectAllKey": "SelectAll",
+      "requestDataKey": "Request data",
+      "closeKey": "Close",
+      "veryBadKey": "Very bad",
+      "searchKey": "Search",
+      "expandKey": "Expand",
+      "IDCardPhotoKey": "ID card photo",
+      "finishKey": "Finish",
+      "surpriseKey": "Surprise",
+      "releaseRefreshKey": "Release refresh",
+      "nationalEmblemSideOfIDCardKey": "National emblem side of ID card",
+      "buttonKey": "Button",
+      "jumpKey": "Jump",
+      "disappointmentKey": "Disappointment"
+    }
   }
 }

package/src/index.ts

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