@xhsreds/reds-rn-next 0.11.1-premode-test.0 → 0.11.1-web202512221520

package/lib/src/components/SlimAlert/Alert.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RedsAlert } from "./interface";
-declare const Alert: React.FC<RedsAlert>;
+declare const Alert: (props: RedsAlert) => React.JSX.Element;
 export default Alert;

package/lib/src/components/SlimAlert/PortalHost.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const PortalHost: ({ children, hostName }: {
+    children: React.ReactNode;
+    hostName: string | undefined;
+}) => import("react").JSX.Element;
+export default PortalHost;

package/lib/src/components/SlimAlert/PortalHost.web.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const PortalHost: ({ children, hostName }: {
+    children: React.ReactNode;
+    hostName: string;
+}) => import("react").JSX.Element;
+export default PortalHost;

package/lib/src/components/Video/interface/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-/// <reference types="node" />
 export declare const enum VideoSize {
     VERTICAL = "vertical",
     HORIZONTAL = "horizontal"

package/lib/types/components/Button/Viewable.web.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Viewable: (props: any) => React.JSX.Element;
+export default Viewable;

package/lib/types/components/Collapse/Item/Item.web.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IItem } from "./interface/index";
+declare const Item: {
+    ({ value, title, lazyRender, children, onClick }: IItem): React.JSX.Element;
+    defaultProps: IItem;
+};
+export default Item;

package/lib/types/components/SlimAlert/Alert.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RedsAlert } from "./interface";
-declare const Alert: React.FC<RedsAlert>;
+declare const Alert: (props: RedsAlert) => React.JSX.Element | null;
 export default Alert;

package/lib/types/components/SlimAlert/PortalHost.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const PortalHost: ({ children, hostName }: {
+    children: React.ReactNode;
+    hostName: string | undefined;
+}) => import("react").JSX.Element;
+export default PortalHost;

package/lib/types/components/SlimAlert/PortalHost.web.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const PortalHost: ({ children, hostName }: {
+    children: React.ReactNode;
+    hostName: string;
+}) => import("react").JSX.Element;
+export default PortalHost;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.11.1-premode-test.0",
+  "version": "0.11.1-web202512221520",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
@@ -9,8 +9,8 @@
     "@xhs/reds-apm": ">=0.0.1",
     "async-validator": "~4.2.5",
     "dayjs": "*",
-    "runes": "~0.4.3",
-    "react-native-url-polyfill": "*"
+    "react-native-url-polyfill": "*",
+    "runes": "~0.4.3"
   },
   "publishConfig": {
     "access": "public"
@@ -19,14 +19,14 @@
     "@xhs/lottie-react-native": "*",
     "@xhs/ozone-schema": "*",
     "@xhs/ozone-schema-web": "*",
+    "@xhs/react-native-harmony": "*",
     "@xhs/reder-icon-svg-ReDs_icon": "*",
+    "@xhs/reds-components": "*",
     "lottie-react-native": "7.1.0",
     "react": "*",
     "react-native": "*",
     "react-native-fs": "2.20.0",
     "react-native-svg": "13.14.0",
-    "@xhs/react-native-harmony": "*",
-    "@xhs/reds-components": "*",
     "@xhsreds/reds-token-next": "0.11.0"
   },
   "peerDependenciesMeta": {
@@ -42,6 +42,10 @@
   },
   "module": "./src/index.ts",
   "types": "./lib/types/index.d.ts",
+  "devDependencies": {
+    "@types/react-dom": "18.2.0",
+    "react-dom": "18.2.0"
+  },
   "scripts": {
     "test": "vitest --coverage",
     "bench": "vitest bench --outputJson benchmarks/out.json",

package/src/components/ActionSheets/ActionSheets.tsx

@@ -9,7 +9,6 @@ import useMounted from "../../pvCount/useUnmountedProcess";
 import { useLanguage } from "../LanguageProvider";
 import { getSafeAreaInsets } from "../StatusBar";
 import { typography } from "@xhs/reds-token-next";
-// test
 const ActionSheets = forwardRef((props: RedsActionSheets, ref) => {
   useMounted("ActionSheets");
   const themeColor = useThemeColor("ActionSheets");

package/src/components/ActionablePopover/ActionablePopover.tsx

@@ -223,6 +223,9 @@ export default ({
               }}
               onPressOut={(e) => {
                 trigger === "touch" && onMaskChange(e, false);
+                if (Platform.OS === "web" && trigger === "click") {
+                  onMaskChange(e, true);
+                }
               }}
             >
               <View

package/src/components/Alert/Alert.tsx

@@ -10,12 +10,12 @@ import {
   GestureResponderEvent,
   Animated,
   TouchableOpacity,
+  ViewStyle,
 } from "react-native";
 import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 import { RedsAlert, AlertDefaultProps } from "./interface";
 import { Button } from "../Button";
-import { Divider } from "../Divider";
-import { Portal } from "../Portal";
+import PortalHost from "../SlimAlert/PortalHost";
 import { style } from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { useLanguage } from "../LanguageProvider";
@@ -143,8 +143,8 @@ const Alert: React.FC<RedsAlert> = (props) => {
   };
   useMounted("Alert");
   return show ? (
-    <Portal hostName={hostName}>
-      <View style={styles.centeredView}>
+    <PortalHost hostName={props.hostName}>
+      <View style={[styles.centeredView, { position: props.hostName ? "absolute" : "fixed" } as ViewStyle]}>
         {mask && (
           <TouchableWithoutFeedback onPress={onMask}>
             <View style={styles.modalOverlay} />
@@ -241,7 +241,7 @@ const Alert: React.FC<RedsAlert> = (props) => {
           </View>
         </Animated.View>
       </View>
-    </Portal>
+    </PortalHost>
   ) : null;
 };
 

package/src/components/Button/Viewable.web.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from "react";
+import { View, Dimensions } from "react-native";
+
+const Viewable = (props: any) => {
+  const { style, percent = 1, callback, ...rest } = props;
+  const targetRef = useRef<View>(null);
+  const hasLoggedExposure = useRef(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && entry.intersectionRatio >= (percent || 1)) {
+            if (!hasLoggedExposure.current) {
+              hasLoggedExposure.current = true;
+              callback?.();
+            }
+          }
+        });
+      },
+      {
+        threshold: percent || 1,
+      },
+    );
+
+    // 获取实际的 DOM 元素
+    const domNode = targetRef.current as any;
+    if (domNode) {
+      observer.observe(domNode);
+    }
+
+    return () => observer.disconnect();
+  }, [callback, percent]);
+
+  return (
+    <View ref={targetRef} style={style} {...rest}>
+      {props.children}
+    </View>
+  );
+};
+
+export default Viewable;

package/src/components/Collapse/Item/Item.web.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import { View, Text, TouchableWithoutFeedback, LayoutChangeEvent, ViewStyle } from "react-native";
+import { IItem, ItemDefaultProps } from "./interface/index";
+import createStyles from "./styles";
+import { Icon } from "../../Icon";
+import { ArrowUpM, ArrowDownCenterB } from "@xhs/reder-icon-svg-ReDs_icon";
+import { CollapseContext } from "../hooks/useCollapseContext";
+import { useThemeColor } from "../../ConfigProvider";
+
+const Item = ({ value, title, lazyRender, children, onClick }: IItem) => {
+  const { addActiveValue, isActiveValue, removeActiveValue, size, registerChild, unregisterChild } =
+    React.useContext(CollapseContext);
+  const styles = createStyles(size || "Medium");
+  const [visible, setVisible] = useState(false);
+  const [shouldMount, setShouldMount] = useState(!lazyRender);
+  const [contentHeight, setContentHeight] = useState(0);
+  const firstRender = useRef(false);
+  const measureRef = useRef<View>(null);
+  const contentRef = useRef<View>(null);
+
+  const themeColor = useThemeColor();
+  const [lineItem, setLineItem] = useState(false);
+
+  const childInfo = {
+    setLine: (value: boolean) => setLineItem(value),
+  };
+
+  useEffect(() => {
+    registerChild(childInfo);
+    return () => unregisterChild(childInfo);
+  }, []);
+
+  const [initialMeasureDone, setInitialMeasureDone] = useState(false);
+
+  const setFirstRenderTag = () => {
+    firstRender.current = true;
+    setShouldMount(true);
+  };
+
+  const handleContentLayout = (event: LayoutChangeEvent) => {
+    const measuredHeight = event.nativeEvent.layout.height;
+    if (measuredHeight !== contentHeight) {
+      setContentHeight(measuredHeight);
+      setInitialMeasureDone(true);
+    }
+  };
+
+  // 初始可见状态同步逻辑
+  useEffect(() => {
+    const isActive = !!isActiveValue?.(value);
+    if (isActive) {
+      measureRef.current?.measure?.((x, y, width, height) => {
+        setContentHeight(height);
+        setInitialMeasureDone(true);
+      });
+    }
+    setVisible(isActive);
+    if (!firstRender.current && isActive) {
+      setFirstRenderTag();
+    }
+  }, [isActiveValue?.(value)]);
+
+  const onPress = () => {
+    const nextActive = !isActiveValue?.(value);
+
+    if (nextActive) {
+      addActiveValue?.(value);
+      if (!firstRender.current) setFirstRenderTag();
+    } else {
+      removeActiveValue?.(value);
+    }
+
+    setVisible(nextActive);
+    onClick?.(value);
+  };
+
+  const cloneChildren = useMemo(() => {
+    return React.Children.map(children, (child: any) => {
+      return React.cloneElement(child, {
+        style: { color: themeColor.Paragraph },
+        ...child.props,
+      });
+    });
+  }, [children]);
+
+  return (
+    <View>
+      <TouchableWithoutFeedback onPress={onPress}>
+        <View style={styles.header}>
+          <Text style={styles.title}>{title}</Text>
+          <View
+            style={
+              { transform: `rotate(${visible ? 180 : 0}deg)`, transition: "transform 200ms ease-in-out" } as ViewStyle
+            }
+          >
+            <Icon icon={ArrowDownCenterB} size={16} fill={themeColor.Title} />
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+
+      {/* 测量视图 */}
+      <View
+        ref={measureRef}
+        onLayout={handleContentLayout}
+        style={{
+          position: "absolute",
+          opacity: 0,
+          paddingHorizontal: 16,
+          paddingBottom: 12,
+          top: -9999,
+          width: "100%",
+          ...styles.content,
+        }}
+      >
+        {cloneChildren}
+      </View>
+
+      {/* Web 内容视图 */}
+      <View
+        ref={contentRef}
+        style={{
+          overflow: "hidden",
+          height: visible ? contentHeight : 0,
+          paddingHorizontal: 16,
+          paddingBottom: visible ? 12 : 0,
+          minHeight: visible ? 1 : 0,
+          // @ts-expect-error
+          transition: "height 200ms ease-in-out, padding 200ms ease-in-out, opacity 200ms ease-in-out",
+          ...styles.content,
+        }}
+      >
+        {cloneChildren}
+      </View>
+
+      {/* 分割线 */}
+      {lineItem && (
+        <View
+          style={{
+            backgroundColor: themeColor.Separator,
+            height: 0.5,
+            marginHorizontal: 16,
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+Item.defaultProps = ItemDefaultProps;
+export default Item;

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

@@ -1,3 +1,4 @@
+import { Platform } from "react-native";
 export enum DatePickerMode {
   YearMonthDay = "yearmonthday",
   YearMonth = "yearmonth",

package/src/components/Image/index.ts

@@ -3,6 +3,6 @@ import Image from "./Image";
 import Image69 from "./Image69";
 import * as ImageType from "./interface";
 
-const ImageComponent = Platform.constants?.reactNativeVersion?.minor === 72 ? Image : Image69;
+const ImageComponent = Platform.constants?.reactNativeVersion?.minor === 72 || Platform.OS === "web" ? Image : Image69;
 export default ImageComponent;
 export { ImageComponent as Image, ImageType, Image69 };

package/src/components/NoticeBar/NoticeBar.tsx

@@ -1,10 +1,30 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { View, TouchableWithoutFeedback, Text, Image, Animated, Easing } from "react-native";
+import {
+  View,
+  TouchableWithoutFeedback,
+  Text,
+  Image,
+  Animated,
+  Easing,
+  LayoutChangeEvent,
+  Platform,
+  TextStyle,
+} from "react-native";
 import { RedsNoticeBar, NoticeBarDefaultProps, NoticeBarType, NoticeBarActionType } from "./interface/index";
 import getStyles from "./styles";
 import { useThemeColor } from "../ConfigProvider";
 import { useLanguage } from "../LanguageProvider";
 import useMounted from "../../pvCount/useUnmountedProcess";
+
+const AnimatedTextStyle =
+  Platform.OS === "web"
+    ? {
+        textOverflow: "initial",
+        overflow: "initial",
+        maxWidth: "auto",
+      }
+    : {};
+
 const NoticeBar = (props: RedsNoticeBar) => {
   useMounted("NoticeBar");
   const [_visible, setVisible] = useState(true);
@@ -52,7 +72,7 @@ const NoticeBar = (props: RedsNoticeBar) => {
   const scrollDistance = useMemo(() => Math.max(textWidth - containerWidth, 0), [textWidth, containerWidth]);
 
   useEffect(() => {
-    if (props.type === NoticeBarType.SCROLLABLE && textWidth > 0) {
+    if (props.type === NoticeBarType.SCROLLABLE && textWidth > 0 && scrollDistance > 0) {
       const startScrolling = () => {
         scrollX.setValue(0);
         Animated.timing(scrollX, {
@@ -84,6 +104,10 @@ const NoticeBar = (props: RedsNoticeBar) => {
     setVisible(!!props.visible);
   }, [props.visible]);
 
+  const handleAnimatedTextLayout = (e: LayoutChangeEvent) => {
+    setTextWidth(e.nativeEvent.layout.width);
+  };
+
   return _visible ? (
     <View
       style={[
@@ -100,11 +124,11 @@ const NoticeBar = (props: RedsNoticeBar) => {
         onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
       >
         {props.type === NoticeBarType.SCROLLABLE ? (
-          <View style={{ minHeight: 18, overflow: "scroll", flexDirection: "row" }}>
+          <View style={{ minHeight: 18, overflow: Platform.OS === "web" ? "hidden" : "scroll", flexDirection: "row" }}>
             <Animated.Text
               numberOfLines={1}
-              style={[{ transform: [{ translateX: scrollX }] }]}
-              onLayout={(e) => setTextWidth(e.nativeEvent.layout.width)}
+              style={[{ transform: [{ translateX: scrollX }] }, AnimatedTextStyle as TextStyle]}
+              onLayout={handleAnimatedTextLayout}
             >
               <Text style={styles.text}>{props.content}</Text>
               <Text style={styles.text}>{"         "}</Text>

package/src/components/PickerView/PickerView.tsx

@@ -47,7 +47,7 @@ const PickerView = (props: RedsPickerView) => {
             <ProgressIndicator type="default" />
           </View>
         ) : (
-          <View style={[styles.wheelWrapper, { backgroundColor: themeColor.Bg2 }]}>
+          <View style={[styles.wheelWrapper, { backgroundColor: themeColor.Bg2, overflow: "scroll" }]}>
             {columns.map((column, colIndex) => (
               <Wheel
                 key={colIndex}

package/src/components/PickerView/Wheel.tsx

@@ -1,5 +1,13 @@
 import React, { useRef, useState, useEffect } from "react";
-import { NativeScrollEvent, NativeSyntheticEvent, ScrollView, View, Text, TouchableNativeFeedback } from "react-native";
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  View,
+  Text,
+  TouchableNativeFeedback,
+  Platform,
+} from "react-native";
 import { useThemeColor } from "../ConfigProvider";
 import { typography } from "@xhs/reds-token-next";
 import { RedsWheel, Column } from "./interface/index";
@@ -143,7 +151,12 @@ const Wheel = (props: RedsWheel) => {
    */
   const renderItems = () => {
     return column.map((item, index) => (
-      <TouchableNativeFeedback onPress={() => handleClick(index)} key={item.value}>
+      <TouchableNativeFeedback
+        onPress={() => handleClick(index)}
+        key={item.value}
+        // @ts-expect-error
+        style={Platform.OS === "web" ? { border: "none", alignSelf: "inherit" } : {}}
+      >
         <View
           style={[styles.wheel, { height: itemHeight, backgroundColor: themeColor.Bg2 }]}
           key={item.value}
@@ -157,9 +170,25 @@ const Wheel = (props: RedsWheel) => {
     ));
   };
 
+  useEffect(() => {
+    if (Platform.OS !== "web") {
+      return;
+    }
+    const handleScrollEnd = (e: any) => {
+      const selectIndex = Math.round(e.target.scrollTop / itemHeight);
+      setIndex(selectIndex);
+    };
+    // @ts-expect-error
+    scrollerRef.current?.addEventListener("scrollend", handleScrollEnd);
+    return () => {
+      // @ts-expect-error
+      scrollerRef.current?.removeEventListener("scrollend", handleScrollEnd);
+    };
+  }, [scrollerRef.current, itemHeight]);
+
   return (
     <ScrollView
-      style={{ flex: 1 }}
+      style={{ flex: 1, height: "100%" }}
       nestedScrollEnabled
       horizontal={false}
       ref={(el: any) => (scrollerRef.current = el)}

package/src/components/Popover/Popover.tsx

@@ -1,5 +1,15 @@
 import React, { useState, useMemo, isValidElement, useEffect, useRef } from "react";
-import { Text, View, TouchableWithoutFeedback, GestureResponderEvent, Animated, Image, Dimensions } from "react-native";
+import {
+  Text,
+  View,
+  TouchableWithoutFeedback,
+  GestureResponderEvent,
+  Animated,
+  Image,
+  Dimensions,
+  Platform,
+  LayoutChangeEvent,
+} from "react-native";
 import { RedsPopover } from "./interface/index";
 import { ModalWrapper } from "./component";
 import { darkColor, lightColor, typography } from "@xhs/reds-token-next";
@@ -33,6 +43,8 @@ export default ({
   const needModal = useMemo(() => opacity !== 0, [opacity]);
 
   const [_visible, setVisible] = useState(false);
+  const [floatStyles, setFloatStyles] = useState({});
+  const [arrowStyles, setArrowStyles] = useState({});
 
   const progress = useRef(new Animated.Value(0)).current;
 
@@ -45,21 +57,15 @@ export default ({
     height: 0,
   });
 
-  const [floatingLayout, setFloatingLayout] = useState({
-    x: defaultValue,
-    y: defaultValue,
-    width: 0,
-    height: 0,
-  });
-
-  const floatStyles = useMemo(() => {
+  const handleFloatingLayout = (e: LayoutChangeEvent) => {
+    const floatingLayout = e.nativeEvent.layout;
     const start = ["top-start", "bottom-start"].includes(placement);
     const mid = ["top", "bottom"].includes(placement);
     const end = ["top-end", "bottom-end"].includes(placement);
     const diffX = floatingLayout.width - layout.width;
     // @ts-expect-error
     const isHarmony = Platform.OS === "harmony";
-    return layout.height
+    const floatStyles = layout.height
       ? {
           position: "absolute",
           top:
@@ -71,16 +77,7 @@ export default ({
             (isHarmony ? Dimensions.get("screen").width : 0),
         }
       : {};
-  }, [placement, layout, floatingLayout]);
-
-  const arrowStyles = useMemo(() => {
-    const start = ["top-start", "bottom-start"].includes(placement);
-    const mid = ["top", "bottom"].includes(placement);
-    const end = ["top-end", "bottom-end"].includes(placement);
-    const diffX = floatingLayout.width - layout.width;
-    // @ts-expect-error
-    const isHarmony = Platform.OS === "harmony";
-    return layout.height
+    const arrowStyles = layout.height
       ? {
           transform: [{ rotate: placement.includes("top") ? `0deg` : `180deg` }],
           position: "absolute",
@@ -101,7 +98,9 @@ export default ({
             (isHarmony ? Dimensions.get("screen").width : 0),
         }
       : {};
-  }, [placement, layout, floatingLayout, offset]);
+    setFloatStyles(floatStyles);
+    setArrowStyles(arrowStyles);
+  };
 
   useEffect(() => {
     let timer: any;
@@ -212,6 +211,9 @@ export default ({
               }}
               onPressOut={(e) => {
                 trigger === "touch" && onMaskChange(e, false);
+                if (Platform.OS === "web" && trigger === "click") {
+                  onMaskChange(e, true);
+                }
               }}
             >
               <View
@@ -240,10 +242,7 @@ export default ({
             <>
               <Animated.View
                 collapsable={false}
-                onLayout={(e) => {
-                  setFloatingLayout(e.nativeEvent.layout);
-                }}
-                // @ts-expect-error
+                onLayout={handleFloatingLayout}
                 style={{
                   backgroundColor: popoverStyle.backgroundColor,
                   paddingHorizontal: 12,
@@ -279,7 +278,6 @@ export default ({
               </Animated.View>
               <Image
                 source={{ uri: angle }}
-                // @ts-expect-error
                 style={{
                   width: 14,
                   height: 6,

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -79,6 +79,7 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
 
   const LottieView = React.useMemo(() => {
     const lottieSource = getLottieSource(type as TLottieSourceType)[strokeColor || colorMode || "light"];
+    // TODO: lottie-react-native 不能使用 progress，需要单独适配 web
     if (type === "progress") {
       let progress = 0;
       if (percent > 100) {
@@ -89,9 +90,7 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
       return (
         <>
           {showPercent && <Text style={[styles.percentText, textStyle]}>{formatText(percent)}</Text>}
-          {Platform.OS !== "web" && (
-            <Lottie style={{ flex: 1 }} progress={progress} source={props.lottieSource || lottieSource} />
-          )}
+          <Lottie style={{ flex: 1 }} progress={progress} source={props.lottieSource || lottieSource} />
           <></>
         </>
       );
@@ -99,19 +98,12 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
     if (colorMode === "light") {
       return (
         <>
-          {Platform.OS !== "web" && (
-            <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />
-          )}
+          <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />
           <></>
         </>
       );
     }
-    return (
-      Platform.OS !== "web" && (
-        <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />
-      )
-    );
-    // return <></>;
+    return <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />;
   }, [type, colorMode, percent, strokeColor]);
 
   return (