@xhsreds/reds-rn-next 0.9.1-test.1 → 0.10.0

package/src/components/Image/Image.tsx

@@ -27,8 +27,8 @@ import { useColorMode } from "../ConfigProvider";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { lightColor } from "@xhs/reds-token-next";
 import { formatUri, isDataUri, isLocalFile, convertKeysToSnakeCase } from "./utils";
-import VisibilitySensor from "./VisibilitySensor";
 import { apmPush } from "./apm";
+import { queryCacheBatched } from "./queryCacheBatcher";
 
 const imageReLoad = {
   light: "https://picasso-static.xiaohongshu.com/fe-platform/06ae169b310c2926e541903b828486a80fcac404.png",
@@ -56,16 +56,14 @@ const Image = ({
   onFirstDrawFinished,
   ...props
 }: RedsImage & Omit<ImageProps, keyof RedsImage>) => {
-  useMounted("Image");
+  // useMounted("Image");
   const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
   const [progress, setProgress] = useState(0);
-
-  const [loadedTime, setLoadedTime] = useState(0);
-  const [loadStartTime, setLoadStartTime] = useState(0);
+  const mountTimeRef = useRef<number>(Date.now());
 
   const formatSource = useMemo(() => {
     // @ts-ignore
-    if (_source) return _source as ImageSourcePropTyp;
+    if (_source) return _source as ImageSourcePropType;
     // @ts-ignore
     return { uri: src } as ImageSourcePropType;
   }, [src, _source]);
@@ -78,21 +76,11 @@ const Image = ({
 
   const blurSource = useBlur({ source: formatSource });
 
-  const [viewable, setViewable] = useState(false);
-  const hasInit = useRef(false);
-  const checkIsVisible = (isVisible: boolean) => {
-    if (abortApmCollection) return;
-    // 判断首屏
-    if (!hasInit.current) {
-      hasInit.current = true;
-      apmDataRef.current.isFirstScreen = isVisible ? "true" : "false";
-    }
-    setViewable(isVisible);
-  };
+  // Visibility tracking removed: no longer needed for APM
   const apmDataRef = useRef<ImageTrackerProps>({
     imageUrl: "",
     imageHost: "",
-    intersectTime: viewable ? Date.now() : 0,
+    intersectTime: 0,
     imageSize: 0,
     isFirstScreen: "false",
     isPrefetch: "",
@@ -103,7 +91,7 @@ const Image = ({
     loadDuration: 0,
     viewDuration: 0,
   });
-  const [apmDoneRef, setApmDoneRef] = useState(false);
+  const apmDoneRef = useRef(false);
 
   useEffect(() => {
     if (abortApmCollection) return;
@@ -126,17 +114,19 @@ const Image = ({
   useEffect(() => {
     if (abortApmCollection) return;
     const imageUrl = (formatSource as ImageURISource)?.uri || "";
-    if (typeof RNImage.queryCache === "function" && !!imageUrl) {
-      const uriEncodeImageUrl = encodeURI(imageUrl);
-      RNImage.queryCache([imageUrl]).then((res) => {
-        if (res?.[uriEncodeImageUrl]) {
-          apmDataRef.current.isPrefetch = "true";
-        } else {
-          apmDataRef.current.isPrefetch = "false";
-        }
+    if (!imageUrl) return;
+    let alive = true;
+    queryCacheBatched(imageUrl)
+      .then((isPrefetched) => {
+        if (!alive) return;
+        apmDataRef.current.isPrefetch = String(isPrefetched);
+      })
+      .catch(() => {
+        if (!alive) return;
+        apmDataRef.current.isPrefetch = "false";
       });
-    }
     return () => {
+      alive = false;
       apmDataRef.current.isPrefetch = "";
     };
   }, [formatSource, abortApmCollection]);
@@ -144,8 +134,9 @@ const Image = ({
   const pushApmData = useCallback(() => {
     if (abortApmCollection) return;
     const apmData = apmDataRef.current;
-    const viewDuration = apmData.loadedTime - apmData.intersectTime;
-    apmData.viewDuration = viewDuration < 0 ? 0 : viewDuration;
+    // Simplify: do not track view duration/intersect time
+    apmData.intersectTime = 0;
+    apmData.viewDuration = 0;
     /**
      * 如果Image.queryCache未完成时,通过imageSize来判断
      * 如果image_size是-1,那么认为图片已有缓存
@@ -154,40 +145,19 @@ const Image = ({
     if (!apmDataRef.current.isPrefetch) {
       apmDataRef.current.isPrefetch = String((imageSize || 0) <= 0);
     }
-    if (!apmDoneRef && apmData.imageUrl && !abortApmCollection) {
-      setApmDoneRef(true);
+    if (!apmDoneRef.current && apmData.imageUrl && !abortApmCollection) {
+      apmDoneRef.current = true;
       apmPush(convertKeysToSnakeCase(apmData));
     }
   }, [abortApmCollection]);
 
   // 判断首屏
-  if (
-    (!apmDataRef.current.isFirstScreen || apmDataRef.current.isFirstScreen === "false") &&
-    viewable &&
-    !abortApmCollection
-  ) {
-    apmDataRef.current.isFirstScreen = "true";
-  }
-  useEffect(() => {
-    if (abortApmCollection) return;
-    const apmData = apmDataRef.current;
-    if (!apmData.intersectTime && viewable) {
-      apmData.intersectTime = Date.now();
-      // 进入视窗前加载完成/失败
-      if (apmData.loadedTime || apmData.errorReason) {
-        pushApmData();
-      }
-    }
-  }, [viewable, pushApmData, abortApmCollection]);
-
+  // isFirstScreen stays "false" and intersectTime stays 0 by design
   const onLoadEnd = () => {
     props?.onLoadEnd?.();
     if (abortApmCollection) return;
-    const apmData = apmDataRef.current;
-    // 进入视窗后加载成功/失败
-    // if (apmData.intersectTime) {
+    // Push regardless of visibility/intersect time
     pushApmData();
-    // }
   };
 
   const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
@@ -203,8 +173,10 @@ const Image = ({
   const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
     if (!abortApmCollection) {
       const now = Date.now();
-      setLoadedTime(now);
-      const loadDuration = now - apmDataRef.current.loadedStartTime;
+      let start = apmDataRef.current.loadedStartTime || mountTimeRef.current;
+      if (start > now) start = now;
+      apmDataRef.current.loadedStartTime = start;
+      const loadDuration = now - start;
       apmDataRef.current.loadedTime = now;
       apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
       apmDataRef.current.isSuccess = "true";
@@ -213,17 +185,8 @@ const Image = ({
     setImageStatus(IMAGE_STATUS.LOADED);
   };
 
-  useEffect(() => {
-    const loadDuration = loadedTime - loadStartTime;
-    apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
-  }, [loadedTime, loadStartTime]);
-
   const onLoadStart = () => {
-    if (!abortApmCollection) {
-      const now = Date.now();
-      apmDataRef.current.loadedStartTime = now;
-      setLoadStartTime(now);
-    }
+    !abortApmCollection && (apmDataRef.current.loadedStartTime = Date.now());
   };
 
   const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
@@ -246,54 +209,29 @@ const Image = ({
 
   return (
     <View style={{ borderRadius, height, width, ...(style as {}) }}>
-      {imageStatus !== IMAGE_STATUS.HIDE &&
-        (!abortApmCollection ? (
-          <VisibilitySensor onChange={checkIsVisible} disabled={apmDoneRef}>
-            <RNImage
-              {...props}
-              // @ts-ignore
-              source={formatSource}
-              onLoadStart={onLoadStart}
-              onLoad={onLoad}
-              onProgress={onProgress}
-              onError={onError}
-              onLoadEnd={onLoadEnd}
-              fadeDuration={fadeDuration}
-              // @ts-ignore
-              onFirstDrawFinished={onFirstDrawFinished}
-              style={{
-                width: width || style?.width,
-                height: height || style?.height,
-                borderRadius,
-                // opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
-              }}
-              // @ts-ignore
-              apmBiz={props.apmBiz}
-            ></RNImage>
-          </VisibilitySensor>
-        ) : (
-          <RNImage
-            {...props}
-            // @ts-ignore
-            source={formatSource}
-            onLoadStart={onLoadStart}
-            onLoad={onLoad}
-            onProgress={onProgress}
-            onError={onError}
-            onLoadEnd={onLoadEnd}
-            fadeDuration={fadeDuration}
-            // @ts-ignore
-            onFirstDrawFinished={onFirstDrawFinished}
-            style={{
-              width: width || style?.width,
-              height: height || style?.height,
-              borderRadius,
-              // opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
-            }}
-            // @ts-ignore
-            apmBiz={props.apmBiz}
-          ></RNImage>
-        ))}
+      {imageStatus !== IMAGE_STATUS.HIDE && (
+        <RNImage
+          {...props}
+          // @ts-ignore
+          source={formatSource}
+          onLoadStart={onLoadStart}
+          onLoad={onLoad}
+          onProgress={onProgress}
+          onError={onError}
+          onLoadEnd={onLoadEnd}
+          fadeDuration={fadeDuration}
+          // @ts-ignore
+          onFirstDrawFinished={(e) => onFirstDrawFinished(e)}
+          style={{
+            width: width || style?.width,
+            height: height || style?.height,
+            borderRadius,
+            // opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
+          }}
+          // @ts-ignore
+          apmBiz={props.apmBiz}
+        ></RNImage>
+      )}
       {imageStatus === IMAGE_STATUS.LOADING && loadStyle !== TLoadStyle.NONE && (
         <View
           style={{

package/src/components/Image/VisibilitySensor.tsx

@@ -87,8 +87,7 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
         stopWatching();
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rectDimensions, lastValue]);
+  }, [rectDimensions, lastValue, threshold, onChange, triggerOnce, stopWatching]);
   return (
     <View ref={localRef} {...rest} onLayout={() => measureInnerView()}>
       {children}

package/src/components/Image/queryCacheBatcher.ts

@@ -0,0 +1,84 @@
+import { Image as RNImage } from "react-native";
+
+declare const global: any;
+
+type Resolver = (value: boolean) => void;
+
+// Runtime switch: set global.REDS_IMAGE_QUERYCACHE_BATCHING_ENABLED = false to disable batching
+let enabled: boolean = global?.REDS_IMAGE_QUERYCACHE_BATCHING_ENABLED !== false;
+let FLUSH_MS = 50;
+
+const pending = new Map<string, Resolver[]>();
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+function directQuery(url: string): Promise<boolean> {
+  try {
+    if (typeof (RNImage as any).queryCache !== "function") {
+      return Promise.resolve(false);
+    }
+    return (RNImage as any)
+      .queryCache([url])
+      .then((res: Record<string, any>) => !!(res?.[url] || res?.[encodeURI(url)]))
+      .catch(() => false);
+  } catch (_) {
+    return Promise.resolve(false);
+  }
+}
+
+function flush() {
+  const entries = Array.from(pending.entries());
+  pending.clear();
+  timer = null;
+
+  const urls = entries.map(([url]) => url);
+  if (!urls.length) return;
+
+  if (typeof (RNImage as any).queryCache !== "function") {
+    entries.forEach(([, resolvers]) => resolvers.forEach((r) => r(false)));
+    return;
+  }
+
+  (RNImage as any)
+    .queryCache(urls)
+    .then((res: Record<string, any>) => {
+      entries.forEach(([url, resolvers]) => {
+        const ok = !!(res?.[url] || res?.[encodeURI(url)]);
+        resolvers.forEach((r) => r(ok));
+      });
+    })
+    .catch(() => {
+      entries.forEach(([, resolvers]) => resolvers.forEach((r) => r(false)));
+    });
+}
+
+function schedule() {
+  if (!timer) {
+    timer = setTimeout(flush, FLUSH_MS);
+  }
+}
+
+export function setQueryCacheBatchingEnabled(v: boolean) {
+  enabled = v;
+}
+
+export function configureQueryCacheBatching(options: { flushMs?: number } = {}) {
+  if (typeof options.flushMs === "number" && options.flushMs >= 0) {
+    FLUSH_MS = options.flushMs;
+  }
+}
+
+// Main entry: batched query with quick toggle to direct query
+export function queryCacheBatched(url: string): Promise<boolean> {
+  if (!url) return Promise.resolve(false);
+  if (!enabled) return directQuery(url);
+
+  return new Promise<boolean>((resolve) => {
+    const list = pending.get(url);
+    if (list) {
+      list.push(resolve);
+    } else {
+      pending.set(url, [resolve]);
+    }
+    schedule();
+  });
+}

package/src/components/Popover/Popover.tsx

@@ -24,6 +24,7 @@ export default ({
   arrowStyles: propsArrowStyles,
   offset,
   duration,
+  animation_duration,
   hostName,
   maxWidth,
   arrowOffset,
@@ -121,18 +122,18 @@ export default ({
       if (layout.x !== defaultValue) {
         Animated.timing(progress, {
           toValue: 1,
-          duration: duration ?? 400,
+          duration: animation_duration ?? 400,
           useNativeDriver: false,
         }).start();
       }
     } else {
       Animated.timing(progress, {
         toValue: 0,
-        duration: duration ?? 400,
+        duration: animation_duration ?? 400,
         useNativeDriver: false,
       }).start();
     }
-  }, [_visible, layout]);
+  }, [_visible, layout, animation_duration]);
 
   const onMaskChange = (event: GestureResponderEvent, value: boolean) => {
     if (isControl) return;

package/src/components/Popover/doc/index.mdx

@@ -8,27 +8,28 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性              | 描述                              | 类型                                                                                                | 默认值          |
-| ----------------- | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
-| visible           | 是否显示气泡                      | boolean                                                                                             | undefined       |
-| placement         | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
-| content           | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
-| opacity           | 遮罩透明度                        | number                                                                                              | 0               |
-| mode              | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
-| trigger           | 触发方式                          | "click" | "touch"                                                                              | click           |
-| duration          | 固定时间后popover消失             | number                                                                                              |                 |
-| zIndex            | 层级                              | number                                                                                              | 1000            |
-| popContainerStyle | 气泡框的样式                      | ViewStyle                                                                                           | `{}`            |
-| closeOnClickAgain | 再次点击关闭                      | boolean                                                                                             | true            |
-| children          | popover 作用的目标节点            | ReactNode                                                                                           |                 |
-| floatingStyles    | floating style                    | ViewStyle                                                                                           | `{}`            |
-| arrowStyles       | arrow style                       | ImageStyle                                                                                          | `{}`            |
-| isControl         | 是否受控                          | boolean                                                                                             | false           |
-| offset            | 气泡偏移位置 用于特殊场景适配     | Offset                                                                                              | `{"x":0,"y":0}` |
-| arrowOffset       | 气泡箭头偏移位置 用于特殊场景适配 | Offset                                                                                              | `{"x":0,"y":0}` |
-| hostName          | hostName                          | string                                                                                              | root            |
-| maxWidth          | popover最大宽度                   | number                                                                                              | 280             |
-| layoutChange      | 布局是否变化                      | any                                                                                                 | `{}`            |
+| 属性               | 描述                              | 类型                                                                                                | 默认值          |
+| ------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
+| visible            | 是否显示气泡                      | boolean                                                                                             | undefined       |
+| placement          | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
+| content            | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
+| opacity            | 遮罩透明度                        | number                                                                                              | 0               |
+| mode               | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
+| trigger            | 触发方式                          | "click" | "touch"                                                                              | click           |
+| duration           | 固定时间后popover消失             | number                                                                                              |                 |
+| animation_duration | animation_duration 动画时间       | number                                                                                              |                 |
+| zIndex             | 层级                              | number                                                                                              | 1000            |
+| popContainerStyle  | 气泡框的样式                      | ViewStyle                                                                                           | `{}`            |
+| closeOnClickAgain  | 再次点击关闭                      | boolean                                                                                             | true            |
+| children           | popover 作用的目标节点            | ReactNode                                                                                           |                 |
+| floatingStyles     | floating style                    | ViewStyle                                                                                           | `{}`            |
+| arrowStyles        | arrow style                       | ImageStyle                                                                                          | `{}`            |
+| isControl          | 是否受控                          | boolean                                                                                             | false           |
+| offset             | 气泡偏移位置 用于特殊场景适配     | Offset                                                                                              | `{"x":0,"y":0}` |
+| arrowOffset        | 气泡箭头偏移位置 用于特殊场景适配 | Offset                                                                                              | `{"x":0,"y":0}` |
+| hostName           | hostName                          | string                                                                                              | root            |
+| maxWidth           | popover最大宽度                   | number                                                                                              | 280             |
+| layoutChange       | 布局是否变化                      | any                                                                                                 | `{}`            |
 
 ### Events
 

package/src/components/Popover/interface/index.ts

@@ -12,6 +12,7 @@ export interface RedsPopover {
   mode?: "light" | "dark" | "alwaysLight" | "alwaysDark";
   trigger?: "click" | "touch";
   duration?: number;
+  animation_duration?: number;
   zIndex?: number;
   popContainerStyle?: ViewStyle;
   closeOnClickAgain?: boolean;