@xhsreds/reds-rn-next 0.8.4-image-optimization202510222117 → 0.9.1-feat-image-2202510231126

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

@@ -47,6 +47,7 @@ export interface RedsSearch {
     onSearchClick?: (value: string) => any;
     onAdditionalIconsClick?: () => any;
     onButtonTextClick?: (value: string) => any;
+    suffix?: any;
 }
 export declare const SearchDefaultProps: {
     modelValue: string;

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

@@ -83,5 +83,10 @@ declare const createStyles: () => {
         width: number;
         height: number;
     };
+    clearable: {
+        width: number;
+        height: number;
+        marginRight: number;
+    };
 };
 export default createStyles;

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

@@ -9,10 +9,10 @@ declare const Sheets: {
         sheetsType: SheetsType;
         cancel: boolean;
         close: boolean;
-        zIndex: number;
-        cancelType: SheetsActionType; /**
+        zIndex: number; /**
          * 关闭Sheets
          */
+        cancelType: SheetsActionType;
         closeType: SheetsActionType;
         iconType: SheetsIconType;
         size: SheetsSize;
@@ -23,12 +23,12 @@ declare const Sheets: {
         onCancel: () => void;
         onConfirm: () => void;
         onAnimatedOut: () => void;
-        /** icon wrapper */
         isMaskClose: boolean;
         visible: boolean;
         onImmediateCancel: () => void;
         onImmediateConfirm: () => void;
         avoidSheetsMove: boolean;
+        headlerLayout: string;
     };
 };
 export default Sheets;

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

@@ -56,6 +56,7 @@ export interface RedsSheets {
     onImmediateCancel?: () => void;
     onImmediateConfirm?: () => void;
     avoidSheetsMove?: boolean;
+    headlerLayout?: "center" | "left";
 }
 export interface RedsSheetsEvent {
 }
@@ -83,4 +84,5 @@ export declare const SheetsDefaultProps: {
     onImmediateCancel: () => void;
     onImmediateConfirm: () => void;
     avoidSheetsMove: boolean;
+    headlerLayout: string;
 };

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

@@ -34,6 +34,17 @@ declare const styles: {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
     };
+    leftLabelContainer: {
+        display: "flex";
+        justifyContent: "flex-start";
+        alignItems: "center";
+        flexDirection: "row";
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
     cancel: {
         fontSize: number;
         fontWeight: "400";
@@ -76,6 +87,7 @@ declare const styles: {
         alignItems: "center";
         flexDirection: "row";
         width: "100%";
+        paddingHorizontal: number;
     };
     action: {
         flex: number;

package/lib/types/components/Skeleton/Item/SkeletonItem.d.ts

@@ -6,6 +6,7 @@ declare const SkeletonItem: {
         type: string;
         animation: boolean;
         loading: boolean;
+        borderRadius: number;
     };
 };
 export default SkeletonItem;

package/lib/types/components/Skeleton/Item/SkeletonItem69.d.ts

@@ -6,6 +6,7 @@ declare const SkeletonItem: {
         type: string;
         animation: boolean;
         loading: boolean;
+        borderRadius: number;
     };
 };
 export default SkeletonItem;

package/lib/types/components/Skeleton/Item/interface/index.d.ts

@@ -5,10 +5,12 @@ export interface RedsSkeletonItem {
     animation?: boolean;
     loading?: boolean;
     color?: string;
+    borderRadius?: number;
 }
 export declare const SkeletonItemDefaultProps: {
     type: string;
     animation: boolean;
     loading: boolean;
+    borderRadius: number;
 };
 export {};

package/lib/types/components/Skeleton/index.d.ts

@@ -14,6 +14,7 @@ declare const SkeletonItemComponent: {
         type: string;
         animation: boolean;
         loading: boolean;
+        borderRadius: number;
     };
 };
 export default SkeletonComponent;

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

@@ -29,7 +29,8 @@ export declare const enum TabThemeType {
 export declare const enum TabLayoutType {
     left = "left",
     middle = "middle",
-    space = "space"
+    space = "space",
+    right = "right"
 }
 export interface RedsTab {
     theme?: TabThemeType;

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

@@ -18,6 +18,11 @@ declare const createStyles: (props: RedsTab) => {
         flexDirection: "row";
         justifyContent: "flex-start";
     };
+    tabRightContainer: {
+        flex: number;
+        flexDirection: "row";
+        justifyContent: "flex-end";
+    };
     tabSpaceContainer: {
         width: "100%";
         flexDirection: "row";

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

@@ -36,13 +36,11 @@ declare const createStyles: () => {
         fontSize: any;
         fontWeight: any;
         opacity: number;
-        marginTop: number;
     };
     activeIconText: {
         fontSize: any;
         fontWeight: any;
         opacity: number;
-        marginTop: number;
     };
 };
 export default createStyles;

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-image-optimization202510222117",
+  "version": "0.9.1-feat-image-2202510231126",
   "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: {},
 };