@xhsreds/reds-rn-next 0.9.0 → 0.9.1-feat-image-2202510231126

package/lib/cjs/components/Image/VisibilitySensor.js

@@ -6,20 +6,17 @@ var _rollupPluginBabelHelpers = require('../../_chunks/C9tZEm0t.js');
 var React = require('react');
 var reactNative = require('react-native');
 
-var _excluded = ["onChange", "disabled", "triggerOnce", "delay", "threshold", "children"];
+var _excluded = ["onChange", "disabled", "threshold", "children"];
 var VisibilitySensor = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onChange = props.onChange,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$triggerOnce = props.triggerOnce,
-    triggerOnce = _props$triggerOnce === void 0 ? false : _props$triggerOnce;
-    props.delay;
-    var _props$threshold = props.threshold,
+    _props$threshold = props.threshold,
     threshold = _props$threshold === void 0 ? {} : _props$threshold,
     children = props.children,
     rest = _rollupPluginBabelHelpers._objectWithoutProperties(props, _excluded);
   var localRef = React.useRef(null);
-  var hasMountedRef = React.useRef(false);
+  var measuredOnceRef = React.useRef(false);
   React.useImperativeHandle(ref, function () {
     return {
       getInnerRef: function getInnerRef() {
@@ -27,83 +24,28 @@ var VisibilitySensor = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   });
-  var _useState = React.useState({
-      rectTop: 0,
-      rectBottom: 0,
-      rectLeft: 0,
-      rectRight: 0,
-      rectWidth: 0,
-      rectHeight: 0
-    }),
-    _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
-    rectDimensions = _useState2[0],
-    setRectDimensions = _useState2[1];
-  var _useState3 = React.useState(void 0),
-    _useState4 = _rollupPluginBabelHelpers._slicedToArray(_useState3, 2),
-    lastValue = _useState4[0],
-    setLastValue = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _rollupPluginBabelHelpers._slicedToArray(_useState5, 2),
-    active = _useState6[0],
-    setActive = _useState6[1];
-  var measureInnerView = function measureInnerView() {
+  var measureOnce = React.useCallback(function () {
     var _localRef$current;
-    if (!active) return;
-    (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _localRef$current.measure(function (_x, _y, width, height, pageX, pageY) {
-      var 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);
-      }
+    if (disabled || measuredOnceRef.current) return;
+    var win = reactNative.Dimensions.get("window");
+    (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _localRef$current.measure(function (_, __, width, height, pageX, pageY) {
+      if (measuredOnceRef.current) return;
+      var 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);
     });
-  };
-  var startWatching = React.useCallback(function () {
-    if (!active) setActive(true);
-  }, [active]);
-  var stopWatching = React.useCallback(function () {
-    if (active) setActive(false);
-  }, [active]);
-  React.useEffect(function () {
-    if (!disabled) {
-      startWatching();
-    }
-    return function () {
-      stopWatching();
-    };
-  }, [disabled, startWatching, stopWatching]);
+  }, [disabled, onChange, threshold]);
   React.useEffect(function () {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      return;
+    if (!disabled && !measuredOnceRef.current) {
+      requestAnimationFrame(function () {
+        return measureOnce();
+      });
     }
-    var window = reactNative.Dimensions.get("window");
-    var isVisible = 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;
-    if (lastValue !== isVisible) {
-      setLastValue(isVisible);
-      onChange(isVisible);
-      if (isVisible && triggerOnce) {
-        stopWatching();
-      }
-    }
-  }, [rectDimensions, lastValue]);
+  }, [disabled, measureOnce]);
   return /* @__PURE__ */React.createElement(reactNative.View, _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({
     ref: localRef
   }, rest), {}, {
-    onLayout: function onLayout() {
-      return measureInnerView();
-    }
+    onLayout: measureOnce
   }), children);
 });
 

package/lib/cjs/components/Image/VisibilitySensor.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilitySensor.js","sources":["../../../../src/components/Image/VisibilitySensor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from \"react\";\nimport { Dimensions, type ScaledSize, View } from \"react-native\";\nimport type { VisibilitySensorRef, VisibilitySensorProps, RectDimensionsState } from \"./interface/visibilitySensor\";\n// function useInterval(callback: () => void, delay: number | null) {\n//   const savedCallback = useRef(callback);\n//   useEffect(() => {\n//     savedCallback.current = callback;\n//   }, [callback]);\n//   useEffect(() => {\n//     if (delay === null || delay === undefined) {\n//       return;\n//     }\n//     const id = setInterval(() => savedCallback.current(), delay);\n//     return () => clearInterval(id);\n//   }, [delay]);\n// }\nconst VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {\n  const { onChange, disabled = false, triggerOnce = false, delay, threshold = {}, children, ...rest } = props;\n  const localRef = useRef<View>(null);\n  const hasMountedRef = useRef(false);\n  useImperativeHandle(ref, () => ({\n    getInnerRef: () => localRef.current,\n  }));\n  const [rectDimensions, setRectDimensions] = useState<RectDimensionsState>({\n    rectTop: 0,\n    rectBottom: 0,\n    rectLeft: 0,\n    rectRight: 0,\n    rectWidth: 0,\n    rectHeight: 0,\n  });\n  const [lastValue, setLastValue] = useState<boolean | undefined>(undefined);\n  const [active, setActive] = useState<boolean>(false);\n  const measureInnerView = () => {\n    if (!active) return;\n    localRef.current?.measure((_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {\n      const dimensions = {\n        rectTop: pageY,\n        rectBottom: pageY + height,\n        rectLeft: pageX,\n        rectRight: pageX + width,\n        rectWidth: width,\n        rectHeight: height,\n      };\n      if (\n        rectDimensions.rectTop !== dimensions.rectTop ||\n        rectDimensions.rectBottom !== dimensions.rectBottom ||\n        rectDimensions.rectLeft !== dimensions.rectLeft ||\n        rectDimensions.rectRight !== dimensions.rectRight ||\n        rectDimensions.rectWidth !== dimensions.rectWidth ||\n        rectDimensions.rectHeight !== dimensions.rectHeight\n      ) {\n        setRectDimensions(dimensions);\n      }\n    });\n  };\n  // useInterval(measureInnerView, delay || 100);\n  const startWatching = useCallback(() => {\n    if (!active) setActive(true);\n  }, [active]);\n  const stopWatching = useCallback(() => {\n    if (active) setActive(false);\n  }, [active]);\n  useEffect(() => {\n    if (!disabled) {\n      startWatching();\n    }\n    return () => {\n      stopWatching();\n    };\n  }, [disabled, startWatching, stopWatching]);\n  useEffect(() => {\n    if (!hasMountedRef.current) {\n      hasMountedRef.current = true;\n      return;\n    }\n    const window: ScaledSize = Dimensions.get(\"window\");\n    const isVisible: boolean =\n      rectDimensions.rectTop + (threshold.top || 0) <= window.height && // Top edge is within the bottom of the window\n      rectDimensions.rectBottom - (threshold.bottom || 0) >= 0 && // Bottom edge is within the top of the window\n      rectDimensions.rectLeft + (threshold.left || 0) <= window.width && // Left edge is within the right of the window\n      rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window\n    if (lastValue !== isVisible) {\n      setLastValue(isVisible);\n      onChange(isVisible);\n      if (isVisible && triggerOnce) {\n        stopWatching();\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rectDimensions, lastValue]);\n  return (\n    <View ref={localRef} {...rest} onLayout={() => measureInnerView()}>\n      {children}\n    </View>\n  );\n});\nexport default VisibilitySensor;\n"],"names":["VisibilitySensor","forwardRef","props","ref","onChange","_props$disabled","disabled","_props$triggerOnce","triggerOnce","delay","_props$threshold","threshold","children","rest","_excluded","localRef","useRef","hasMountedRef","useImperativeHandle","getInnerRef","current","_useState","useState","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","_useState2","_slicedToArray","rectDimensions","setRectDimensions","_useState3","_useState4","lastValue","setLastValue","_useState5","_useState6","active","setActive","measureInnerView","_localRef$current","measure","_x","_y","width","height","pageX","pageY","dimensions","startWatching","useCallback","stopWatching","useEffect","window","Dimensions","get","isVisible","top","bottom","left","right","React","createElement","View","_objectSpread","onLayout"],"mappings":"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"}
+{"version":3,"file":"VisibilitySensor.js","sources":["../../../../src/components/Image/VisibilitySensor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, forwardRef, useImperativeHandle } from \"react\";\nimport { Dimensions, View } from \"react-native\";\nimport type { VisibilitySensorRef, VisibilitySensorProps } from \"./interface/visibilitySensor\";\n\n// Measure visibility once on first layout to avoid state-driven re-render loops\nconst VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {\n  const { onChange, disabled = false, threshold = {}, children, ...rest } = props;\n  const localRef = useRef<View>(null);\n  const measuredOnceRef = useRef(false);\n\n  useImperativeHandle(ref, () => ({\n    getInnerRef: () => localRef.current,\n  }));\n\n  const measureOnce = useCallback(() => {\n    if (disabled || measuredOnceRef.current) return;\n    const win = Dimensions.get(\"window\");\n    localRef.current?.measure((_, __, width: number, height: number, pageX: number, pageY: number) => {\n      if (measuredOnceRef.current) return; // guard against double-calls in same frame\n      const isVisible =\n        pageY + (threshold.top || 0) <= win.height &&\n        pageY + height - (threshold.bottom || 0) >= 0 &&\n        pageX + (threshold.left || 0) <= win.width &&\n        pageX + width - (threshold.right || 0) >= 0;\n      measuredOnceRef.current = true;\n      onChange(isVisible);\n    });\n  }, [disabled, onChange, threshold]);\n\n  // If initially disabled, measure once when enabled later\n  useEffect(() => {\n    if (!disabled && !measuredOnceRef.current) {\n      requestAnimationFrame(() => measureOnce());\n    }\n  }, [disabled, measureOnce]);\n\n  return (\n    <View ref={localRef} {...rest} onLayout={measureOnce}>\n      {children}\n    </View>\n  );\n});\n\nexport default VisibilitySensor;\n"],"names":["VisibilitySensor","forwardRef","props","ref","onChange","_props$disabled","disabled","_props$threshold","threshold","children","rest","_objectWithoutProperties","_excluded","localRef","useRef","measuredOnceRef","useImperativeHandle","getInnerRef","current","measureOnce","useCallback","_localRef$current","win","Dimensions","get","measure","_","__","width","height","pageX","pageY","isVisible","top","bottom","left","right","useEffect","requestAnimationFrame","React","createElement","View","onLayout"],"mappings":";;;;;;;;;AAKMA,IAAAA,gBAAmB,gBAAAC,gBAAA,CAAuD,UAACC,KAAA,EAAOC,GAAQ,EAAA;AACxF,EAAA,IAAEC,QAAU,GAAwDF,KAAA,CAAlEE,QAAU;IAAAC,eAAA,GAAwDH,KAAA,CAAxDI,QAAA;AAAAA,IAAAA,QAAA,GAAAD,eAAA,KAAW,KAAA,CAAA,GAAA,KAAO,GAAAA,eAAA;IAAAE,gBAAA,GAAsCL,KAAA,CAAtCM,SAAA;AAAAA,IAAAA,SAAA,GAAAD,gBAAA,KAAA,KAAA,CAAA,GAAY,EAAI,GAAAA,gBAAA;IAAAE,QAAA,GAAsBP,KAAA,CAAtBO,QAAA;AAAaC,IAAAA,IAAA,GAAAC,kDAAA,CAAST,KAAA,EAAAU,SAAA,CAAA,CAAA;AACpE,EAAA,IAAAC,QAAA,GAAWC,aAAa,IAAI,CAAA,CAAA;AAC5B,EAAA,IAAAC,eAAA,GAAkBD,aAAO,KAAK,CAAA,CAAA;EAEpCE,yBAAA,CAAoBb,KAAK,YAAA;IAAA,OAAO;MAC9Bc,WAAA,EAAa,SAAbA,WAAAA,GAAA;QAAA,OAAmBJ,QAAS,CAAAK,OAAA,CAAA;AAAA,OAAA;KAC5B,CAAA;AAAA,GAAA,CAAA,CAAA;AAEI,EAAA,IAAAC,WAAA,GAAcC,kBAAY,YAAM;AAAA,IAAA,IAAAC,iBAAA,CAAA;AAChC,IAAA,IAAAf,QAAA,IAAYS,gBAAgBG,OAAS,EAAA,OAAA;AACnC,IAAA,IAAAI,GAAA,GAAMC,sBAAW,CAAAC,GAAA,CAAI,QAAQ,CAAA,CAAA;IAC1B,CAAAH,iBAAA,GAAAR,QAAA,CAAAK,OAAA,cAAAG,iBAAA,KAAA,KAAA,CAAA,IAAAA,iBAAA,CAASI,QAAQ,UAACC,CAAA,EAAGC,IAAIC,KAAe,EAAAC,MAAA,EAAgBC,OAAeC,KAAkB,EAAA;MAChG,IAAIhB,gBAAgBG,OAAS,EAAA,OAAA;MACvB,IAAAc,SAAA,GACJD,SAASvB,SAAU,CAAAyB,GAAA,IAAO,MAAMX,GAAI,CAAAO,MAAA,IACpCE,KAAQ,GAAAF,MAAA,IAAUrB,SAAU,CAAA0B,MAAA,IAAU,MAAM,CAC5C,IAAAJ,KAAA,IAAStB,SAAU,CAAA2B,IAAA,IAAQ,CAAM,CAAA,IAAAb,GAAA,CAAIM,SACrCE,KAAQ,GAAAF,KAAA,IAASpB,SAAU,CAAA4B,KAAA,IAAS,CAAM,CAAA,IAAA,CAAA,CAAA;MAC5CrB,eAAA,CAAgBG,OAAU,GAAA,IAAA,CAAA;MAC1Bd,QAAA,CAAS4B,SAAS,CAAA,CAAA;AACpB,KAAC,CAAA,CAAA;GACA,EAAA,CAAC1B,QAAU,EAAAF,QAAA,EAAUI,SAAS,CAAC,CAAA,CAAA;AAGlC6B,EAAAA,eAAA,CAAU,YAAM;AACd,IAAA,IAAI,CAAC/B,QAAA,IAAY,CAACS,eAAA,CAAgBG,OAAS,EAAA;AACnBoB,MAAAA,qBAAA,CAAA,YAAA;QAAA,OAAMnB,aAAa,CAAA;OAAA,CAAA,CAAA;AAC3C,KAAA;AACF,GAAG,EAAA,CAACb,QAAU,EAAAa,WAAW,CAAC,CAAA,CAAA;EAGxB,sBAAAoB,KAAA,CAAAC,aAAA,CAACC;AAAKtC,IAAAA,GAAK,EAAAU,QAAAA;AAAA,GAAA,EAAcH,IAAM,CAAA,EAAA,EAAA,EAAA;AAAAgC,IAAAA,QAAA,EAAUvB,WAAAA;MACtCV,QACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/lib/esm/components/Image/VisibilitySensor.js

@@ -1,21 +1,18 @@
-import { i as _objectWithoutProperties, _ as _slicedToArray, a as _objectSpread2 } from '../../_chunks/CAkwE9ZD.js';
-import React, { forwardRef, useRef, useImperativeHandle, useState, useCallback, useEffect } from 'react';
+import { i as _objectWithoutProperties, a as _objectSpread2 } from '../../_chunks/CAkwE9ZD.js';
+import React, { forwardRef, useRef, useImperativeHandle, useCallback, useEffect } from 'react';
 import { Dimensions, View } from 'react-native';
 
-var _excluded = ["onChange", "disabled", "triggerOnce", "delay", "threshold", "children"];
+var _excluded = ["onChange", "disabled", "threshold", "children"];
 var VisibilitySensor = /*#__PURE__*/forwardRef(function (props, ref) {
   var onChange = props.onChange,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$triggerOnce = props.triggerOnce,
-    triggerOnce = _props$triggerOnce === void 0 ? false : _props$triggerOnce;
-    props.delay;
-    var _props$threshold = props.threshold,
+    _props$threshold = props.threshold,
     threshold = _props$threshold === void 0 ? {} : _props$threshold,
     children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
   var localRef = useRef(null);
-  var hasMountedRef = useRef(false);
+  var measuredOnceRef = useRef(false);
   useImperativeHandle(ref, function () {
     return {
       getInnerRef: function getInnerRef() {
@@ -23,83 +20,28 @@ var VisibilitySensor = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     };
   });
-  var _useState = useState({
-      rectTop: 0,
-      rectBottom: 0,
-      rectLeft: 0,
-      rectRight: 0,
-      rectWidth: 0,
-      rectHeight: 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    rectDimensions = _useState2[0],
-    setRectDimensions = _useState2[1];
-  var _useState3 = useState(void 0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    lastValue = _useState4[0],
-    setLastValue = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    active = _useState6[0],
-    setActive = _useState6[1];
-  var measureInnerView = function measureInnerView() {
+  var measureOnce = useCallback(function () {
     var _localRef$current;
-    if (!active) return;
-    (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _localRef$current.measure(function (_x, _y, width, height, pageX, pageY) {
-      var 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);
-      }
+    if (disabled || measuredOnceRef.current) return;
+    var win = Dimensions.get("window");
+    (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _localRef$current.measure(function (_, __, width, height, pageX, pageY) {
+      if (measuredOnceRef.current) return;
+      var 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);
     });
-  };
-  var startWatching = useCallback(function () {
-    if (!active) setActive(true);
-  }, [active]);
-  var stopWatching = useCallback(function () {
-    if (active) setActive(false);
-  }, [active]);
-  useEffect(function () {
-    if (!disabled) {
-      startWatching();
-    }
-    return function () {
-      stopWatching();
-    };
-  }, [disabled, startWatching, stopWatching]);
+  }, [disabled, onChange, threshold]);
   useEffect(function () {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      return;
+    if (!disabled && !measuredOnceRef.current) {
+      requestAnimationFrame(function () {
+        return measureOnce();
+      });
     }
-    var window = Dimensions.get("window");
-    var isVisible = 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;
-    if (lastValue !== isVisible) {
-      setLastValue(isVisible);
-      onChange(isVisible);
-      if (isVisible && triggerOnce) {
-        stopWatching();
-      }
-    }
-  }, [rectDimensions, lastValue]);
+  }, [disabled, measureOnce]);
   return /* @__PURE__ */React.createElement(View, _objectSpread2(_objectSpread2({
     ref: localRef
   }, rest), {}, {
-    onLayout: function onLayout() {
-      return measureInnerView();
-    }
+    onLayout: measureOnce
   }), children);
 });
 

package/lib/esm/components/Image/VisibilitySensor.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilitySensor.js","sources":["../../../../src/components/Image/VisibilitySensor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from \"react\";\nimport { Dimensions, type ScaledSize, View } from \"react-native\";\nimport type { VisibilitySensorRef, VisibilitySensorProps, RectDimensionsState } from \"./interface/visibilitySensor\";\n// function useInterval(callback: () => void, delay: number | null) {\n//   const savedCallback = useRef(callback);\n//   useEffect(() => {\n//     savedCallback.current = callback;\n//   }, [callback]);\n//   useEffect(() => {\n//     if (delay === null || delay === undefined) {\n//       return;\n//     }\n//     const id = setInterval(() => savedCallback.current(), delay);\n//     return () => clearInterval(id);\n//   }, [delay]);\n// }\nconst VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {\n  const { onChange, disabled = false, triggerOnce = false, delay, threshold = {}, children, ...rest } = props;\n  const localRef = useRef<View>(null);\n  const hasMountedRef = useRef(false);\n  useImperativeHandle(ref, () => ({\n    getInnerRef: () => localRef.current,\n  }));\n  const [rectDimensions, setRectDimensions] = useState<RectDimensionsState>({\n    rectTop: 0,\n    rectBottom: 0,\n    rectLeft: 0,\n    rectRight: 0,\n    rectWidth: 0,\n    rectHeight: 0,\n  });\n  const [lastValue, setLastValue] = useState<boolean | undefined>(undefined);\n  const [active, setActive] = useState<boolean>(false);\n  const measureInnerView = () => {\n    if (!active) return;\n    localRef.current?.measure((_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {\n      const dimensions = {\n        rectTop: pageY,\n        rectBottom: pageY + height,\n        rectLeft: pageX,\n        rectRight: pageX + width,\n        rectWidth: width,\n        rectHeight: height,\n      };\n      if (\n        rectDimensions.rectTop !== dimensions.rectTop ||\n        rectDimensions.rectBottom !== dimensions.rectBottom ||\n        rectDimensions.rectLeft !== dimensions.rectLeft ||\n        rectDimensions.rectRight !== dimensions.rectRight ||\n        rectDimensions.rectWidth !== dimensions.rectWidth ||\n        rectDimensions.rectHeight !== dimensions.rectHeight\n      ) {\n        setRectDimensions(dimensions);\n      }\n    });\n  };\n  // useInterval(measureInnerView, delay || 100);\n  const startWatching = useCallback(() => {\n    if (!active) setActive(true);\n  }, [active]);\n  const stopWatching = useCallback(() => {\n    if (active) setActive(false);\n  }, [active]);\n  useEffect(() => {\n    if (!disabled) {\n      startWatching();\n    }\n    return () => {\n      stopWatching();\n    };\n  }, [disabled, startWatching, stopWatching]);\n  useEffect(() => {\n    if (!hasMountedRef.current) {\n      hasMountedRef.current = true;\n      return;\n    }\n    const window: ScaledSize = Dimensions.get(\"window\");\n    const isVisible: boolean =\n      rectDimensions.rectTop + (threshold.top || 0) <= window.height && // Top edge is within the bottom of the window\n      rectDimensions.rectBottom - (threshold.bottom || 0) >= 0 && // Bottom edge is within the top of the window\n      rectDimensions.rectLeft + (threshold.left || 0) <= window.width && // Left edge is within the right of the window\n      rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window\n    if (lastValue !== isVisible) {\n      setLastValue(isVisible);\n      onChange(isVisible);\n      if (isVisible && triggerOnce) {\n        stopWatching();\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rectDimensions, lastValue]);\n  return (\n    <View ref={localRef} {...rest} onLayout={() => measureInnerView()}>\n      {children}\n    </View>\n  );\n});\nexport default VisibilitySensor;\n"],"names":["VisibilitySensor","forwardRef","props","ref","onChange","_props$disabled","disabled","_props$triggerOnce","triggerOnce","delay","_props$threshold","threshold","children","rest","_excluded","localRef","useRef","hasMountedRef","useImperativeHandle","getInnerRef","current","_useState","useState","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","_useState2","_slicedToArray","rectDimensions","setRectDimensions","_useState3","_useState4","lastValue","setLastValue","_useState5","_useState6","active","setActive","measureInnerView","_localRef$current","measure","_x","_y","width","height","pageX","pageY","dimensions","startWatching","useCallback","stopWatching","useEffect","window","Dimensions","get","isVisible","top","bottom","left","right","React","createElement","View","_objectSpread","onLayout"],"mappings":"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"}
+{"version":3,"file":"VisibilitySensor.js","sources":["../../../../src/components/Image/VisibilitySensor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, forwardRef, useImperativeHandle } from \"react\";\nimport { Dimensions, View } from \"react-native\";\nimport type { VisibilitySensorRef, VisibilitySensorProps } from \"./interface/visibilitySensor\";\n\n// Measure visibility once on first layout to avoid state-driven re-render loops\nconst VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {\n  const { onChange, disabled = false, threshold = {}, children, ...rest } = props;\n  const localRef = useRef<View>(null);\n  const measuredOnceRef = useRef(false);\n\n  useImperativeHandle(ref, () => ({\n    getInnerRef: () => localRef.current,\n  }));\n\n  const measureOnce = useCallback(() => {\n    if (disabled || measuredOnceRef.current) return;\n    const win = Dimensions.get(\"window\");\n    localRef.current?.measure((_, __, width: number, height: number, pageX: number, pageY: number) => {\n      if (measuredOnceRef.current) return; // guard against double-calls in same frame\n      const isVisible =\n        pageY + (threshold.top || 0) <= win.height &&\n        pageY + height - (threshold.bottom || 0) >= 0 &&\n        pageX + (threshold.left || 0) <= win.width &&\n        pageX + width - (threshold.right || 0) >= 0;\n      measuredOnceRef.current = true;\n      onChange(isVisible);\n    });\n  }, [disabled, onChange, threshold]);\n\n  // If initially disabled, measure once when enabled later\n  useEffect(() => {\n    if (!disabled && !measuredOnceRef.current) {\n      requestAnimationFrame(() => measureOnce());\n    }\n  }, [disabled, measureOnce]);\n\n  return (\n    <View ref={localRef} {...rest} onLayout={measureOnce}>\n      {children}\n    </View>\n  );\n});\n\nexport default VisibilitySensor;\n"],"names":["VisibilitySensor","forwardRef","props","ref","onChange","_props$disabled","disabled","_props$threshold","threshold","children","rest","_objectWithoutProperties","_excluded","localRef","useRef","measuredOnceRef","useImperativeHandle","getInnerRef","current","measureOnce","useCallback","_localRef$current","win","Dimensions","get","measure","_","__","width","height","pageX","pageY","isVisible","top","bottom","left","right","useEffect","requestAnimationFrame","React","createElement","View","onLayout"],"mappings":";;;;;AAKMA,IAAAA,gBAAmB,gBAAAC,UAAA,CAAuD,UAACC,KAAA,EAAOC,GAAQ,EAAA;AACxF,EAAA,IAAEC,QAAU,GAAwDF,KAAA,CAAlEE,QAAU;IAAAC,eAAA,GAAwDH,KAAA,CAAxDI,QAAA;AAAAA,IAAAA,QAAA,GAAAD,eAAA,KAAW,KAAA,CAAA,GAAA,KAAO,GAAAA,eAAA;IAAAE,gBAAA,GAAsCL,KAAA,CAAtCM,SAAA;AAAAA,IAAAA,SAAA,GAAAD,gBAAA,KAAA,KAAA,CAAA,GAAY,EAAI,GAAAA,gBAAA;IAAAE,QAAA,GAAsBP,KAAA,CAAtBO,QAAA;AAAaC,IAAAA,IAAA,GAAAC,wBAAA,CAAST,KAAA,EAAAU,SAAA,CAAA,CAAA;AACpE,EAAA,IAAAC,QAAA,GAAWC,OAAa,IAAI,CAAA,CAAA;AAC5B,EAAA,IAAAC,eAAA,GAAkBD,OAAO,KAAK,CAAA,CAAA;EAEpCE,mBAAA,CAAoBb,KAAK,YAAA;IAAA,OAAO;MAC9Bc,WAAA,EAAa,SAAbA,WAAAA,GAAA;QAAA,OAAmBJ,QAAS,CAAAK,OAAA,CAAA;AAAA,OAAA;KAC5B,CAAA;AAAA,GAAA,CAAA,CAAA;AAEI,EAAA,IAAAC,WAAA,GAAcC,YAAY,YAAM;AAAA,IAAA,IAAAC,iBAAA,CAAA;AAChC,IAAA,IAAAf,QAAA,IAAYS,gBAAgBG,OAAS,EAAA,OAAA;AACnC,IAAA,IAAAI,GAAA,GAAMC,UAAW,CAAAC,GAAA,CAAI,QAAQ,CAAA,CAAA;IAC1B,CAAAH,iBAAA,GAAAR,QAAA,CAAAK,OAAA,cAAAG,iBAAA,KAAA,KAAA,CAAA,IAAAA,iBAAA,CAASI,QAAQ,UAACC,CAAA,EAAGC,IAAIC,KAAe,EAAAC,MAAA,EAAgBC,OAAeC,KAAkB,EAAA;MAChG,IAAIhB,gBAAgBG,OAAS,EAAA,OAAA;MACvB,IAAAc,SAAA,GACJD,SAASvB,SAAU,CAAAyB,GAAA,IAAO,MAAMX,GAAI,CAAAO,MAAA,IACpCE,KAAQ,GAAAF,MAAA,IAAUrB,SAAU,CAAA0B,MAAA,IAAU,MAAM,CAC5C,IAAAJ,KAAA,IAAStB,SAAU,CAAA2B,IAAA,IAAQ,CAAM,CAAA,IAAAb,GAAA,CAAIM,SACrCE,KAAQ,GAAAF,KAAA,IAASpB,SAAU,CAAA4B,KAAA,IAAS,CAAM,CAAA,IAAA,CAAA,CAAA;MAC5CrB,eAAA,CAAgBG,OAAU,GAAA,IAAA,CAAA;MAC1Bd,QAAA,CAAS4B,SAAS,CAAA,CAAA;AACpB,KAAC,CAAA,CAAA;GACA,EAAA,CAAC1B,QAAU,EAAAF,QAAA,EAAUI,SAAS,CAAC,CAAA,CAAA;AAGlC6B,EAAAA,SAAA,CAAU,YAAM;AACd,IAAA,IAAI,CAAC/B,QAAA,IAAY,CAACS,eAAA,CAAgBG,OAAS,EAAA;AACnBoB,MAAAA,qBAAA,CAAA,YAAA;QAAA,OAAMnB,aAAa,CAAA;OAAA,CAAA,CAAA;AAC3C,KAAA;AACF,GAAG,EAAA,CAACb,QAAU,EAAAa,WAAW,CAAC,CAAA,CAAA;EAGxB,sBAAAoB,KAAA,CAAAC,aAAA,CAACC;AAAKtC,IAAAA,GAAK,EAAAU,QAAAA;AAAA,GAAA,EAAcH,IAAM,CAAA,EAAA,EAAA,EAAA;AAAAgC,IAAAA,QAAA,EAAUvB,WAAAA;MACtCV,QACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/package.json

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

package/src/components/Image/VisibilitySensor.tsx

@@ -1,98 +1,44 @@
-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]);
-// }
+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
 const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {
-  const { onChange, disabled = false, triggerOnce = false, delay, threshold = {}, children, ...rest } = props;
+  const { onChange, disabled = false, threshold = {}, children, ...rest } = props;
   const localRef = useRef<View>(null);
-  const hasMountedRef = useRef(false);
+  const measuredOnceRef = useRef(false);
+
   useImperativeHandle(ref, () => ({
     getInnerRef: () => localRef.current,
   }));
-  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);
-      }
+
+  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);
     });
-  };
-  // 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]);
+  }, [disabled, onChange, threshold]);
+
+  // If initially disabled, measure once when enabled later
   useEffect(() => {
-    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();
-      }
+    if (!disabled && !measuredOnceRef.current) {
+      requestAnimationFrame(() => measureOnce());
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rectDimensions, lastValue]);
+  }, [disabled, measureOnce]);
+
   return (
-    <View ref={localRef} {...rest} onLayout={() => measureInnerView()}>
+    <View ref={localRef} {...rest} onLayout={measureOnce}>
       {children}
     </View>
   );
 });
+
 export default VisibilitySensor;