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

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;

package/src/components/Tag/Tag.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useImperativeHandle, forwardRef, memo, FunctionComponent } from "react";
-import { View, Text, StyleSheet, GestureResponderEvent, TouchableNativeFeedback } from "react-native";
+import { View, Text, StyleSheet, GestureResponderEvent, TouchableNativeFeedback, Platform } from "react-native";
 import { RedsTag, TagDefaultProps } from "./interface";
 import { lightColor, typography, alwaysColor } from "@xhs/reds-token-next";
 import { useThemeColor } from "../ConfigProvider";
@@ -81,6 +81,8 @@ const getSizeStyles = (icon: any, afterIcon: any, size: string) => {
   return sizeStyles[size || "medium"];
 };
 
+const TouchableStyles = Platform.OS === "web" ? { border: "none" } : {};
+
 const getTextSizeStyles = (icon: any, afterIcon: any, size: string) => {
   const sizeStyles = {
     mini: {
@@ -197,7 +199,8 @@ const Tag: FunctionComponent<RedsTag> = memo(
 
     return (
       <View style={[styles.tag, tagStyle, props.style]}>
-        <TouchableNativeFeedback disabled={disabled} onPress={onClick}>
+        {/* @ts-expect-error */}
+        <TouchableNativeFeedback disabled={disabled} onPress={onClick} style={TouchableStyles}>
           <View style={{ flexDirection: "row", alignItems: "center" }}>
             {icon && (
               <View style={{ marginRight: 3, flexDirection: "row", alignItems: "center", height: "100%" }}>{icon}</View>
@@ -217,7 +220,8 @@ const Tag: FunctionComponent<RedsTag> = memo(
           </View>
         </TouchableNativeFeedback>
         {closeabled && (
-          <TouchableNativeFeedback onPress={handleClose} style={{ marginLeft: 3 }}>
+          // @ts-expect-error
+          <TouchableNativeFeedback onPress={handleClose} style={{ marginLeft: 3 }} style={TouchableStyles}>
             {closeIcon}
           </TouchableNativeFeedback>
         )}

package/src/components/TextField/TextField.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useMemo, useEffect, useCallback, forwardRef, useImperativeHandle } from "react";
-import { View, TextInput, Text, ColorValue } from "react-native";
+import { View, TextInput, Text, ColorValue, TextStyle } from "react-native";
 import { RedsTextField, TextFieldDefaultProps } from "./interface";
 import createStyles from "./styles";
 import runes from "runes";
@@ -122,7 +122,10 @@ const TextField = forwardRef(
     }, [modelValue, isControl]);
 
     useEffect(() => {
-      setShowClear(clearable && focused && value.length > 0);
+      const newShowClear = clearable && focused && value.length > 0;
+      if (newShowClear !== showClear) {
+        setShowClear(newShowClear);
+      }
     }, [clearable, focused, value]);
 
     const CloseClear = useMemo(() => {
@@ -137,6 +140,18 @@ const TextField = forwardRef(
       textInputRef: inputRef,
     }));
 
+    const ClearIcon = useMemo(() => {
+      return (
+        <View
+          style={[styles.rightItem, { display: showClear ? "flex" : "none" }]}
+          testID="clear-icon"
+          {...clearAccessibility}
+        >
+          <Icon icon={CloseClear} onClick={handleClear} size={20} type={IconType.iconType?.image} />
+        </View>
+      );
+    }, [showClear, handleClear, clearAccessibility]);
+
     return (
       <View style={[isFormItem ? {} : styles.wrapper, style]}>
         <View style={[styles.container, styles.centerItem]}>
@@ -145,7 +160,7 @@ const TextField = forwardRef(
             <TextInput
               testID="text-input"
               ref={inputRef}
-              style={[styles.input, inputStyle]}
+              style={[styles.input, inputStyle, { outline: "none" } as TextStyle]}
               value={value}
               autoFocus={autofocus}
               onChangeText={updateValue}
@@ -176,11 +191,7 @@ const TextField = forwardRef(
               </Text>
             )}
           </View>
-          {showClear && (
-            <View style={styles.rightItem} testID="clear-icon" {...clearAccessibility}>
-              <Icon icon={CloseClear} onClick={handleClear} size={20} type={IconType.iconType?.image} />
-            </View>
-          )}
+          {ClearIcon}
           {showCount && maxLength && (
             <View style={styles.rightItem}>
               <Text style={[styles.count, maxLengthStyle]}>{`${runes(value).length}/${maxLength}`}</Text>

package/src/components/TextView/TextView.tsx

@@ -1,5 +1,14 @@
 import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from "react";
-import { TextInput, View, Text, TouchableWithoutFeedback, ColorValue, Keyboard, Platform } from "react-native";
+import {
+  TextInput,
+  View,
+  Text,
+  TouchableWithoutFeedback,
+  ColorValue,
+  Keyboard,
+  Platform,
+  TextStyle,
+} from "react-native";
 import { TextViewDefaultProps, RedsTextView } from "./interface";
 import createStyles from "./styles";
 import runes from "runes";
@@ -147,7 +156,7 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
       <TextInput
         testID="text-input"
         ref={inputRef}
-        style={[styles.input, { minHeight: rows * 24, height: "auto" }, style]}
+        style={[styles.input, { minHeight: rows * 24, height: "auto", outline: "none" } as TextStyle, style]}
         value={value}
         onChangeText={handleChangeText}
         onFocus={handleFocus}
@@ -173,7 +182,10 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
           )}
           {showClear && modelValueStringLength && focused && (
             <View style={styles.rightItem}>
-              <TouchableWithoutFeedback onPress={handleClear}>
+              <TouchableWithoutFeedback
+                onPress={handleClear}
+                onPressOut={Platform.OS === "web" ? handleClear : undefined}
+              >
                 <View style={styles.clearIconContainer}>
                   <Text style={styles.clearIcon}>清空</Text>
                 </View>

package/src/components/Toast/Toast.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from "react";
-import { Animated, View, Text } from "react-native";
+import { Animated, View, Text, Platform } from "react-native";
 import { Icon, IconType } from "../Icon/index";
 import Button from "../Button/index";
 import ProgressIndicator from "../ProgressIndicator/index";
@@ -85,7 +85,7 @@ const ToastContainer = (p: RedsToast) => {
   return (
     <Animated.View
       style={[styles.ToastContainer, { opacity: fadeAnim.current }]}
-      pointerEvents={mask ? undefined : "none"}
+      pointerEvents={mask || Platform.OS === "web" ? undefined : "none"}
     >
       {/** @ts-ignore */}
       <View style={[getContainerStyle(props), { backgroundColor: themeColor.Fill5 }]}>

package/src/i18n/@types/resources.d.ts

@@ -1,32 +1,32 @@
 interface Resources {
   componentKey: {
-    sureKey: "確定";
-    satisfyKey: "滿意";
-    confirmKey: "確認";
-    uploadingKey: "上傳中";
-    resetKey: "重置";
-    NoDataKey: "暫無數據";
-    liveStreamingKey: "直播";
-    generallyKey: "一般";
-    uploadFailedKey: "上傳失敗";
-    submitKey: "提交";
-    requestSuccessfulKey: "請求成功";
-    cancelKey: "取消";
-    PullDownToRefreshKey: "下拉重繪";
-    selectAllKey: "全選";
-    requestDataKey: "請求數據中";
-    closeKey: "收起";
-    veryBadKey: "極差";
-    searchKey: "蒐索";
-    expandKey: "展開";
-    IDCardPhotoKey: "身份證人像面";
-    finishKey: "完成";
-    surpriseKey: "驚喜";
-    releaseRefreshKey: "鬆開重繪";
-    nationalEmblemSideOfIDCardKey: "身份证国徽面";
-    buttonKey: "按鈕";
-    jumpKey: "跳轉";
-    disappointmentKey: "失望";
+    sureKey: "Confirm";
+    satisfyKey: "Satisfy";
+    confirmKey: "Confirm";
+    uploadingKey: "Uploading";
+    resetKey: "Reset";
+    NoDataKey: "No data available at the moment";
+    liveStreamingKey: "live";
+    generallyKey: "Generally";
+    uploadFailedKey: "Upload failed";
+    submitKey: "Submit";
+    requestSuccessfulKey: "Request successful";
+    cancelKey: "Cancel";
+    PullDownToRefreshKey: "Pull down to refresh";
+    selectAllKey: "SelectAll";
+    requestDataKey: "Request data";
+    closeKey: "Close";
+    veryBadKey: "Very bad";
+    searchKey: "Search";
+    expandKey: "Expand";
+    IDCardPhotoKey: "ID card photo";
+    finishKey: "Finish";
+    surpriseKey: "Surprise";
+    releaseRefreshKey: "Release refresh";
+    nationalEmblemSideOfIDCardKey: "National emblem side of ID card";
+    buttonKey: "Button";
+    jumpKey: "Jump";
+    disappointmentKey: "Disappointment";
   };
 }
 export default Resources;

package/src/i18n/index.json

@@ -1,35 +1,4 @@
 {
-  "zh_tw": {
-    "componentKey": {
-      "sureKey": "確定",
-      "satisfyKey": "滿意",
-      "confirmKey": "確認",
-      "uploadingKey": "上傳中",
-      "resetKey": "重置",
-      "NoDataKey": "暫無數據",
-      "liveStreamingKey": "直播",
-      "generallyKey": "一般",
-      "uploadFailedKey": "上傳失敗",
-      "submitKey": "提交",
-      "requestSuccessfulKey": "請求成功",
-      "cancelKey": "取消",
-      "PullDownToRefreshKey": "下拉重繪",
-      "selectAllKey": "全選",
-      "requestDataKey": "請求數據中",
-      "closeKey": "收起",
-      "veryBadKey": "極差",
-      "searchKey": "蒐索",
-      "expandKey": "展開",
-      "IDCardPhotoKey": "身份證人像面",
-      "finishKey": "完成",
-      "surpriseKey": "驚喜",
-      "releaseRefreshKey": "鬆開重繪",
-      "nationalEmblemSideOfIDCardKey": "身份证国徽面",
-      "buttonKey": "按鈕",
-      "jumpKey": "跳轉",
-      "disappointmentKey": "失望"
-    }
-  },
   "en_us": {
     "componentKey": {
       "sureKey": "Confirm",
@@ -91,5 +60,36 @@
       "jumpKey": "跳转",
       "disappointmentKey": "失望"
     }
+  },
+  "zh_tw": {
+    "componentKey": {
+      "sureKey": "確定",
+      "satisfyKey": "滿意",
+      "confirmKey": "確認",
+      "uploadingKey": "上傳中",
+      "resetKey": "重置",
+      "NoDataKey": "暫無數據",
+      "liveStreamingKey": "直播",
+      "generallyKey": "一般",
+      "uploadFailedKey": "上傳失敗",
+      "submitKey": "提交",
+      "requestSuccessfulKey": "請求成功",
+      "cancelKey": "取消",
+      "PullDownToRefreshKey": "下拉重繪",
+      "selectAllKey": "全選",
+      "requestDataKey": "請求數據中",
+      "closeKey": "收起",
+      "veryBadKey": "極差",
+      "searchKey": "蒐索",
+      "expandKey": "展開",
+      "IDCardPhotoKey": "身份證人像面",
+      "finishKey": "完成",
+      "surpriseKey": "驚喜",
+      "releaseRefreshKey": "鬆開重繪",
+      "nationalEmblemSideOfIDCardKey": "身份证国徽面",
+      "buttonKey": "按鈕",
+      "jumpKey": "跳轉",
+      "disappointmentKey": "失望"
+    }
   }
 }

package/tsconfig.dts.json

@@ -3,7 +3,7 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "jsx": "react-native",
-    "lib": ["esnext"],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "target": "ESNext",
     "esModuleInterop": true,
     "rootDirs": ["./src/components/"],