@xhsreds/reds-rn-next 0.8.4-fix-image-callbacks202510011434 → 0.9.0

package/lib/types/components/Text/hooks/cloneContainer.d.ts

@@ -1,7 +1,9 @@
 import { TextStyle } from "react-native";
 import React from "react";
-export declare const CloneContainer: ({ text, textStyle, onTextLayout, }: {
+export declare const CloneContainer: ({ text, textStyle, onTextLayout, isRenderEmoji, setLines, }: {
     text?: string;
     textStyle: TextStyle;
     onTextLayout?: (e: any) => void;
+    isRenderEmoji?: boolean;
+    setLines?: any;
 }) => React.JSX.Element;

package/lib/types/components/TextView/styles.d.ts

@@ -5,6 +5,7 @@ declare const createStyles: (disabled: boolean, actionLayout: "horizontal" | "ve
         paddingVertical: number;
         paddingHorizontal: number;
         backgroundColor: string;
+        position: "relative";
     };
     container: {
         display: "flex";
@@ -67,6 +68,9 @@ declare const createStyles: (disabled: boolean, actionLayout: "horizontal" | "ve
         marginTop: number;
         justifyContent: "flex-end";
         alignItems: "center";
+        bottom: number;
+        position: "absolute";
+        right: number;
     };
 };
 export default createStyles;

package/lib/types/components/Uploader/Uploader.d.ts

@@ -10,6 +10,7 @@ declare const Uploader: {
         type: UploaderType;
         size: import("./interface/index").UploaderSize;
         disable: boolean;
+        isFormItem: boolean;
     };
 };
 export default Uploader;

package/lib/types/components/Uploader/interface/index.d.ts

@@ -1,11 +1,61 @@
 export declare const enum UploaderType {
     IDENTITY = "identity",
-    NORMAL = "normal"
+    NORMAL = "normal",
+    HKPassport = "HKPassport",
+    Passport = "Passport",
+    BussinessLicense = "BussinessLicense"
 }
 export declare const enum UploaderSize {
     NORMAL = "normal",
     LARGE = "large"
 }
+export declare const UploadImage: {
+    identity: string[];
+    HKPassport: string[];
+    Passport: string[];
+    normal: string[];
+    BussinessLicense: string[];
+};
+export declare const UploadImageStyle: {
+    identity: {
+        width: number;
+        height: number;
+    };
+    HKPassport: {
+        width: number;
+        height: number;
+    };
+    Passport: {
+        width: number;
+        height: number;
+    };
+    BussinessLicense: {
+        width: number;
+        height: number;
+    };
+    normal: {
+        width: number;
+        height: number;
+    };
+};
+export declare const UploadContainerStyle: {
+    identity: {
+        height: number;
+    };
+    HKPassport: {
+        height: number;
+    };
+    Passport: {
+        height: number;
+    };
+    BussinessLicense: {
+        height: number;
+    };
+    normal: {
+        width: number;
+        height: number;
+    };
+};
 export type Status = "initial" | "uploading" | "failed" | "success";
 export type File = {
     height: number;
@@ -44,6 +94,7 @@ export interface RedsUploader {
     onDelete?: (value: UploaderFileListItem, file: UploaderFileListItem[]) => void;
     onOversize?: (value: UploaderFileListItem[]) => void;
     invoke: (method: string, params: any) => any;
+    isFormItem?: boolean;
 }
 export interface RedsUploaderEvent {
 }
@@ -55,4 +106,5 @@ export declare const UploaderDefaultProps: {
     type: UploaderType;
     size: UploaderSize;
     disable: boolean;
+    isFormItem: boolean;
 };

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.8.4-fix-image-callbacks202510011434",
+  "version": "0.9.0",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
     "@types/runes": "~0.4.3",
-    "@xhs/i18n-fetch": "2.0.0-prerelease.12",
+    "@xhs/i18n-fetch": "*",
     "@xhs/reds-apm": ">=0.0.1",
     "async-validator": "~4.2.5",
-    "dayjs": "^1.10.7",
+    "dayjs": "*",
     "runes": "~0.4.3",
-    "react-native-url-polyfill": "~2.0.0"
+    "react-native-url-polyfill": "*"
   },
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
     "react-native-fs": "2.20.0",
     "react-native-svg": "13.14.0",
     "@xhs/react-native-harmony": "*",
-    "@xhsreds/reds-token-next": "0.8.0"
+    "@xhsreds/reds-token-next": "0.9.0"
   },
   "peerDependenciesMeta": {
     "ozone-schema-web": {

package/src/components/ActionablePopover/ActionablePopover.tsx

@@ -31,7 +31,7 @@ export default ({
   hostName,
   arrowOffset,
 }: RedsActionablePopover) => {
-  useMounted("Popover");
+  useMounted("ActionablePopover");
   const needModal = useMemo(() => opacity !== 0, [opacity]);
 
   const [_visible, setVisible] = useState(false);
@@ -261,29 +261,33 @@ export default ({
             {content.map((data: ActionablePopoverData) => {
               return (
                 <TouchableWithoutFeedback onPress={() => onClick(data.value)}>
-                  <View style={[styles.container, popoverStyle]}>
-                    {data.icon && (
-                      <View style={styles.icon}>
-                        <Icon icon={data.icon} size={20} />
-                      </View>
-                    )}
-                    <Text
-                      style={[
-                        styles.label,
-                        !data.icon && styles.normalLabelLeft,
-                        !checked?.includes(data.value) && styles.normalLabelRight,
-                      ]}
-                    >
-                      {data.label}
-                    </Text>
-                    {type === "check" && checked.includes(data.value) && (
+                  <View style={[styles.spaceBetween]}>
+                    <View style={[styles.container, popoverStyle]}>
+                      {data.icon && (
+                        <View style={styles.icon}>
+                          <Icon
+                            icon={data.icon}
+                            size={20}
+                            fill={mode === "dark" ? themeColor.White : themeColor.Title}
+                          />
+                        </View>
+                      )}
+                      <Text style={[styles.label, !data.icon && styles.normalLabelLeft, styles.normalLabelRight]}>
+                        {data.label}
+                      </Text>
+                    </View>
+                    {type === "check" && (
                       <View style={styles.check}>
-                        <Image
-                          source={{
-                            uri: "https://fe-platform.xhscdn.com/platform/104101l031lekb59j5m0md5494g900000000001j6ahsv6",
-                          }}
-                          style={styles.image}
-                        />
+                        {checked.includes(data.value) ? (
+                          <Image
+                            source={{
+                              uri: "https://fe-platform.xhscdn.com/platform/104101l031lekb59j5m0md5494g900000000001j6ahsv6",
+                            }}
+                            style={styles.image}
+                          />
+                        ) : (
+                          <View style={styles.image}></View>
+                        )}
                       </View>
                     )}
                   </View>

package/src/components/ActionablePopover/demo/index.tsx

@@ -79,30 +79,34 @@ export default function App() {
           justifyContent: "center",
         }}
       >
-        <ActionablePopover content={content} placement="top" opacity={0.4}>
+        <ActionablePopover content={content} placement="top-start" opacity={0.4}>
           <Button>基础用法</Button>
         </ActionablePopover>
       </View>
       <Br />
       <View
-        onLayout={(e) => {
-          console.log("View", e.nativeEvent.layout);
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
         }}
       >
-        <ActionablePopover content={iconContent} placement="top" opacity={0.4}>
+        <ActionablePopover content={iconContent} placement="top-start" opacity={0.4}>
           <Button>{"icon用法"}</Button>
         </ActionablePopover>
       </View>
 
       <Br />
       <View
-        onLayout={(e) => {
-          console.log("View", e.nativeEvent.layout);
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
         }}
       >
         <ActionablePopover
           content={iconContent}
-          placement="top"
+          placement="top-start"
           opacity={0.4}
           type={"check"}
           checked={checked}
@@ -112,29 +116,37 @@ export default function App() {
         </ActionablePopover>
       </View>
       <Br />
-      <ActionablePopover mode={"dark"} content={content} placement={"top"} opacity={0.4}>
-        <Button>{"暗黑模式"}</Button>
-      </ActionablePopover>
-
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <ActionablePopover mode={"dark"} content={content} placement="top-start" opacity={0.4}>
+          <Button>{"暗黑模式"}</Button>
+        </ActionablePopover>
+      </View>
       <Br />
 
       <View style={styles.center}>
-        <ActionablePopover content={content} placement={"bottom"}>
+        <ActionablePopover content={content} placement={"bottom-start"}>
           <Button>{"bottom"}</Button>
         </ActionablePopover>
       </View>
       <Br />
 
-      <ActionablePopover opacity={0.3} content={content}>
-        <Button>{"有遮罩"}</Button>
-      </ActionablePopover>
-
+      <View style={styles.center}>
+        <ActionablePopover opacity={0.3} content={content} placement={"bottom-start"}>
+          <Button>{"有遮罩"}</Button>
+        </ActionablePopover>
+      </View>
       <Br />
-
-      <ActionablePopover trigger={"touch"} content={content}>
-        <Button>{"触摸触发"}</Button>
-      </ActionablePopover>
-
+      <View style={styles.center}>
+        <ActionablePopover trigger={"touch"} content={content} placement={"bottom-start"}>
+          <Button>{"触摸触发"}</Button>
+        </ActionablePopover>
+      </View>
       <Br />
     </View>
   );

package/src/components/ActionablePopover/styles.ts

@@ -7,7 +7,6 @@ const getStyles = (props: RedsActionablePopover, themeTypography: any, themeColo
       fontWeight: themeTypography.T2FontWeight,
       fontSize: themeTypography.T2FontSize,
       color: props.mode === "dark" ? themeColor.White : themeColor.Title,
-      maxWidth: 164,
     },
     container: {
       backgroundColor: themeColor.White,
@@ -17,6 +16,12 @@ const getStyles = (props: RedsActionablePopover, themeTypography: any, themeColo
       flexDirection: "row",
       borderRadius: 12,
     },
+    spaceBetween: {
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "space-between",
+    },
     image: {
       width: 20,
       height: 20,
@@ -26,8 +31,9 @@ const getStyles = (props: RedsActionablePopover, themeTypography: any, themeColo
       marginLeft: 16,
     },
     check: {
-      marginLeft: 12,
       marginRight: 12,
+      width: 20,
+      height: 20,
     },
     normalLabelLeft: {
       paddingLeft: 20,

package/src/components/Alert/Alert.tsx

@@ -199,28 +199,39 @@ const Alert: React.FC<RedsAlert> = (props) => {
                   <Button
                     variant={footerType === "text" ? "text" : "outline"}
                     onClick={handleCancel}
-                    style={{ ...(footerLayout === "vertical" ? styles.verButton : styles.button), ...cancelBtnStyle }}
-                    size={footerType === "text" ? "large" : "medium"}
+                    style={{
+                      ...(footerLayout === "vertical" ? styles.verCancelButton : styles.cancelButton),
+                      ...cancelBtnStyle,
+                    }}
+                    size={footerType === "text" ? (footerLayout === "vertical" ? "medium" : "large") : "medium"}
+                    {...(props.cancelBtnProps || {})}
+                    textStyle={styles.cancelText}
                   >
                     {cancelText || cancelKey}
                   </Button>
                 )}
-                {footerType === "text" && showCancelButton && footerLayout !== "vertical" && (
-                  <View style={styles.dividerBox}>
-                    <Divider direction={"vertical"} size={24} />
-                  </View>
-                )}
+                {footerType === "text" &&
+                  showCancelButton &&
+                  (footerLayout === "vertical" ? (
+                    // @ts-ignore
+                    <View direction={"horizontal"} style={styles.horizontalLine} />
+                  ) : (
+                    // @ts-ignore
+                    <View direction={"vertical"} style={styles.verticalLine} />
+                  ))}
                 {showConfirmButton && (
                   <Button
                     type="primary"
                     variant={footerType === "text" ? "text" : "fill"}
                     onClick={handleConfirm}
                     style={{
-                      ...(footerType === "text" || footerLayout === "vertical" ? styles.button : styles.confirmButton),
+                      ...(footerType === "text" ? styles.button : styles.confirmButton),
+                      ...(footerLayout === "vertical" ? styles.verButton : styles.confirmButton),
                       ...confirmBtnStyle,
                     }}
                     textStyle={confirmBtnTextStyle}
-                    size={footerType === "text" ? "large" : "medium"}
+                    size={footerType === "text" ? (footerLayout === "vertical" ? "medium" : "large") : "medium"}
+                    {...(props.confirmBtnProps || {})}
                   >
                     {confirmText || confirmKey}
                   </Button>

package/src/components/Alert/demo/index.tsx

@@ -81,6 +81,10 @@ export default function App() {
   const [customMessage, setCustomMessage] = useState(false);
   const [customOffset, setCustomOffset] = useState({ x: 0, y: 0 });
 
+  const [confirmBtnProps, setConfirmBtnProps] = useState({});
+
+  const [cancelBtnProps, setCancelBtnProps] = useState({});
+
   const showAlert = () => {
     setAlertVisible(true);
   };
@@ -97,6 +101,8 @@ export default function App() {
     setFooter(undefined);
     setHeader(undefined);
     setCustomMessage(false);
+    setConfirmBtnProps({});
+    setCancelBtnProps({});
   };
 
   const handleConfirm = (e: GestureResponderEvent) => {
@@ -167,6 +173,40 @@ export default function App() {
             </Button>
           </View>
 
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("提示");
+                setAlertMessage("不显示取消按钮的alert");
+                setFooterLayout("vertical");
+                setCancelBtnProps({
+                  variant: "text",
+                });
+                showAlert();
+              }}
+              type="primary"
+              variant="outline"
+            >
+              垂直Alert
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("提示");
+                setAlertMessage("不显示取消按钮的alert");
+                setFooterLayout("vertical");
+                setFooterType("text");
+                showAlert();
+              }}
+              type="primary"
+              variant="outline"
+            >
+              文本垂直Alert
+            </Button>
+          </View>
+
           <View style={styles.buttonContainer}>
             <Button
               onClick={() => {
@@ -270,6 +310,8 @@ export default function App() {
             onCancel={handleCancel}
             onOpen={handleOpen}
             onClose={handleClose}
+            confirmBtnProps={confirmBtnProps}
+            cancelBtnProps={cancelBtnProps}
             footerLayout={footerLayout}
             showConfirmButton
             showCancelButton={showCancelButton}

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

@@ -33,6 +33,8 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | offset              | alert在父容器的位置offset              | AlertOffset                                  | `{"x":0,"y":0}` |
 | hostName            | alert对应PortalProvider hostName       | string                                       | root            |
 | confirmBtnTextStyle | confirmBtnTextStyle                    | TextStyle                                    | `{}`            |
+| confirmBtnProps     | confirmBtnProps                        | any                                          | `{}`            |
+| cancelBtnProps      | cancelBtnProps                         | any                                          | `{}`            |
 
 ### Events
 

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

@@ -32,6 +32,8 @@ export interface RedsAlert {
   offset?: AlertOffset;
   hostName?: string;
   confirmBtnTextStyle?: TextStyle;
+  confirmBtnProps?: any;
+  cancelBtnProps?: any;
 }
 
 export interface RedsAlertEvent {}
@@ -50,4 +52,6 @@ export const AlertDefaultProps = {
   offset: { x: 0, y: 0 },
   hostName: "root",
   confirmBtnTextStyle: {},
+  confirmBtnProps: {},
+  cancelBtnProps: {},
 };

package/src/components/Alert/styles.ts

@@ -78,10 +78,10 @@ export const style = (props: RedsAlert) => {
     },
     footerText: {
       borderTopWidth: 0.5,
-      borderTopColor: themeColor.Separator,
-      paddingBottom: 6,
-      paddingTop: 6,
-      paddingHorizontal: 12,
+      borderTopColor: themeColor.Fill2,
+      paddingBottom: props.footerLayout === "vertical" ? 0 : 6,
+      paddingTop: props.footerLayout === "vertical" ? 0 : 6,
+      paddingHorizontal: props.footerLayout === "vertical" ? 0 : 12,
     },
     footerHorizontal: {
       flexDirection: "row",
@@ -90,13 +90,20 @@ export const style = (props: RedsAlert) => {
     },
     footerVertical: {
       flexDirection: "column-reverse",
-      justifyContent: "center",
       alignItems: "center",
       height: 100,
+      paddingHorizontal: 20,
+    },
+    cancelButton: {
+      flex: 1,
+      width: 109,
+      margin: 0,
+      paddingHorizontal: 0,
+      height: 36,
     },
     button: {
       flex: 1,
-      width: "100%",
+      width: 109,
       margin: 0,
       paddingHorizontal: 0,
       height: 36,
@@ -108,15 +115,44 @@ export const style = (props: RedsAlert) => {
       flex: 1,
       margin: 0,
       marginLeft: 10,
-      width: "100%",
+      width: 109,
       height: 36,
+      paddingHorizontal: 20,
     },
     verButton: {
-      flex: 1,
+      flex: 0,
+      width: "100%",
+      margin: 0,
+      marginLeft: props.footerLayout === "vertical" ? 0 : 10,
+      marginTop: props.footerType === "text" ? 7 : props.footerLayout === "vertical" ? 7 : 10,
+      marginBottom: props.footerLayout === "vertical" ? 7 : 0,
+      height: 36,
+      paddingHorizontal: 20,
+    },
+    verCancelButton: {
+      flex: 0,
       width: "100%",
       margin: 0,
-      marginTop: 10,
+      marginLeft: props.footerLayout === "vertical" ? 0 : 10,
+      marginTop: props.footerType === "text" ? 7 : props.footerLayout === "vertical" ? 7 : 10,
+      marginBottom: props.footerLayout === "vertical" ? 7 : 0,
       height: 36,
+      paddingHorizontal: 20,
+    },
+    cancelText: {
+      color: themeColor.Description,
+      fontSize: 12,
+    },
+    horizontalLine: {
+      width: "100%",
+      height: 0.5,
+      backgroundColor: themeColor.Fill2,
+    },
+    verticalLine: {
+      width: 0.5,
+      height: 24,
+      marginTop: 6,
+      backgroundColor: themeColor.Fill2,
     },
   });
   return styles;

package/src/components/Avatar/Avatar.tsx

@@ -1,9 +1,10 @@
 import React, { useMemo, useRef, memo, useEffect } from "react";
 import { View, StyleSheet, Animated, Image, Text, Platform } from "react-native";
-import { RedsAvatar, AvatarDefaultProps } from "./interface/index";
+import { RedsAvatar, AvatarDefaultProps, avatarSizeMap } from "./interface/index";
 import { getLiveTextStyles, getAvatarStyles } from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { useLanguage } from "../LanguageProvider";
+import { alwaysColor } from "@xhs/reds-token-next";
 export const avatarSizes = {
   small: 24,
   medium: 34,
@@ -126,6 +127,20 @@ const Avatar = (props: RedsAvatar) => {
     }
   }, [levelOneBorderScale, levelTwoBorderScale, levelTwoBorderOpacity, pillLightPosition, animated, imageUrl]);
 
+  const liveSizeClass = () => {
+    switch (sizeType) {
+      case "small":
+        return tagStyles.liveSmall;
+      case "large":
+        return tagStyles.liveLarge;
+      case "xlarge":
+        return tagStyles.liveXLarge;
+      case "medium":
+      default:
+        return tagStyles.liveMedium;
+    }
+  };
+
   const liveTextSizeClass = () => {
     switch (sizeType) {
       case "small":
@@ -140,12 +155,26 @@ const Avatar = (props: RedsAvatar) => {
     }
   };
 
+  const cloneLiveIcon = useMemo(() => {
+    return React.Children.map(liveIcon, (child: any) => {
+      return React.cloneElement(child, {
+        // style: {
+        //   width: avatarSizeMap[sizeType],
+        //   height: avatarSizeMap[sizeType],
+        // },
+        fill: alwaysColor.White,
+        ...child.props,
+        size: avatarSizeMap[sizeType],
+      });
+    });
+  }, [liveIcon, sizeType]);
+
   const renderTag = useMemo(() => {
     return (
-      <Text style={StyleSheet.flatten([tagStyles.avatarLiveTag, liveTextSizeClass(), props.tagStyle])}>
-        {liveIcon && liveIcon}
-        {liveText || liveStreamingKey}
-      </Text>
+      <View style={StyleSheet.flatten([tagStyles.avatarLiveTag, liveSizeClass()])}>
+        {liveIcon && cloneLiveIcon}
+        <Text style={StyleSheet.flatten([liveTextSizeClass(), props.tagStyle])}>{liveText || liveStreamingKey}</Text>
+      </View>
     );
   }, [size]);