@xhsreds/reds-rn-next 0.11.1-beta202512161527 → 0.11.1-beta202512261559

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/Icon/Icon.web.tsx

@@ -0,0 +1,2 @@
+export * from "./Icon.72";
+export { default } from "./Icon.72";

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 (

package/src/components/Rate/Rate.tsx

@@ -173,24 +173,28 @@ const Rate = (props: RedsRate) => {
               }}
               testID="image"
             />
-            <Text
-              style={{
-                fontWeight: (props.emojiType === "default" ? rate >= index + 1 : rate === index + 1)
-                  ? typography.T3FontWeight
-                  : typography.B2LooseFontWeight,
-                fontSize: typography.C2FontSize,
-                color: (props.emojiType === "default" ? rate >= index + 1 : rate === index + 1)
-                  ? themeColor.Title
-                  : themeColor.Description,
-                marginTop: 12,
-                ...((props.emojiType === "default" ? rate >= index + 1 : rate === index + 1)
-                  ? props.activeTextStyle || {}
-                  : props.textStyle || {}),
-                textAlign: "center",
-              }}
-            >
-              {(props?.texts || defaultText)?.[index]}
-            </Text>
+            {rate === index + 1 ? (
+              <Text
+                style={{
+                  fontWeight: (props.emojiType === "default" ? rate >= index + 1 : rate === index + 1)
+                    ? typography.T3FontWeight
+                    : typography.B2LooseFontWeight,
+                  fontSize: typography.C2FontSize,
+                  color: (props.emojiType === "default" ? rate >= index + 1 : rate === index + 1)
+                    ? themeColor.Title
+                    : themeColor.Description,
+                  marginTop: 12,
+                  ...((props.emojiType === "default" ? rate >= index + 1 : rate === index + 1)
+                    ? props.activeTextStyle || {}
+                    : props.textStyle || {}),
+                  textAlign: "center",
+                }}
+              >
+                {(props?.texts || defaultText)?.[index]}
+              </Text>
+            ) : (
+              <></>
+            )}
           </View>
         </TouchableWithoutFeedback>
       ))}

package/src/components/Sheets/AnimatedSheets.tsx

@@ -200,6 +200,10 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
     // 适配底部bottom
     const isIos = Platform.OS === "ios";
     const SAFE_BOTTOM = getSafeAreaInsets().bottom;
+    let finalSafeBottom = SAFE_BOTTOM || isIos ? 34 : 20;
+    if (Platform.OS === "web") {
+      finalSafeBottom = 0;
+    }
     // 适配底部bottom
     let calculateHeight = 0;
     if (props.animatedSheetsSize === "fixed") {
@@ -232,9 +236,7 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       childHeightRef.current = calculateHeight;
     }
     setSheetsHeight(
-      props.sheetsStyle?.backgroundColor === "transparent"
-        ? calculateHeight
-        : calculateHeight + (SAFE_BOTTOM || (isIos ? 34 : 20)),
+      props.sheetsStyle?.backgroundColor === "transparent" ? calculateHeight : calculateHeight + finalSafeBottom,
     );
   }, [actionHeight, labelHeight, childHeight, props.animatedSheetsSize, props.autoSize, size, screenHeight]);
 
@@ -416,6 +418,8 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
             },
             { zIndex: props.zIndex },
             props.sheetsStyle,
+            // @ts-expect-error
+            Platform.OS === "web" ? { position: "fixed", bottom: 0, left: 0, right: 0 } : {},
           ]}
         >
           {props.header ? <View onLayout={handleLabelLayout}>{props.header}</View> : <></>}

package/src/components/SlimAlert/Alert.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useMemo } from "react";
-import { View, TouchableWithoutFeedback, Animated } from "react-native";
+import { View, TouchableWithoutFeedback, Animated, ViewStyle } from "react-native";
 import { RedsAlert, AlertDefaultProps } from "./interface";
-import { Portal } from "../Portal";
+import PortalHost from "./PortalHost";
 import { style } from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
-const Alert: React.FC<RedsAlert> = (props) => {
+const Alert = (props: RedsAlert) => {
   const finalProps = { ...AlertDefaultProps, ...props };
-  const { show, onOpen, onClose, mask, hostName } = finalProps;
+  const { show, onOpen, onClose, mask } = finalProps;
 
   const styles = style(props);
 
@@ -40,16 +40,18 @@ const Alert: React.FC<RedsAlert> = (props) => {
     });
   }, [props.children]);
   useMounted("Alert");
+
   return show ? (
-    <Portal hostName={hostName}>
+    <PortalHost hostName={props.hostName}>
       {mask && (
         <TouchableWithoutFeedback>
-          <View style={styles.modalOverlay} />
+          <View style={[styles.modalOverlay, { position: props.hostName ? "absolute" : "fixed" } as ViewStyle]} />
         </TouchableWithoutFeedback>
       )}
       <Animated.View
         style={[
           styles.centeredView,
+          { position: props.hostName ? "absolute" : "fixed" } as ViewStyle,
           {
             transform: [
               {
@@ -67,7 +69,7 @@ const Alert: React.FC<RedsAlert> = (props) => {
           {footer}
         </View>
       </Animated.View>
-    </Portal>
+    </PortalHost>
   ) : null;
 };
 

package/src/components/SlimAlert/PortalHost.tsx

@@ -0,0 +1,7 @@
+import { Portal } from "../Portal";
+
+const PortalHost = ({ children, hostName = "root" }: { children: React.ReactNode; hostName: string | undefined }) => {
+  return <Portal hostName={hostName}>{children}</Portal>;
+};
+
+export default PortalHost;

package/src/components/SlimAlert/PortalHost.web.tsx

@@ -0,0 +1,11 @@
+import { Portal } from "../Portal";
+import { createPortal } from "react-dom";
+
+const PortalHost = ({ children, hostName }: { children: React.ReactNode; hostName: string }) => {
+  if (hostName) {
+    return <Portal hostName={hostName}>{children}</Portal>;
+  }
+  return createPortal(children, document.body);
+};
+
+export default PortalHost;