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

package/src/components/Text/demo/TextCollapsible.tsx

@@ -4,10 +4,10 @@ import { Text } from "@xhs/reds-rn-next";
 export default () => {
   return (
     <>
-      <Text collapsible={false} isEllipsis>
-        文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开
+      <Text collapsible={true} isEllipsis isRenderEmoji>
+        文字是否可以[微笑R][生气R]展开文字是否可以展开文字是否可以展开[微笑R][生气R]文字是否可以[微笑R][生气R]展开文字是否可以展开文字[微笑R][生气R]是否可以[微笑R][生气R]展开文字是[微笑R][生气R]否可以展开[微笑R][生气R]
       </Text>
-      <Text isEllipsis>
+      <Text collapsible={true} isEllipsis>
         文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开
       </Text>
     </>

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

@@ -42,7 +42,7 @@ export default () => {
         </RedsText>
       </View>
       <View>
-        <Text style={{ color: "gray" }}>基础用法</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>基础用法</Text>
         <TextBasic />
       </View>
 
@@ -51,51 +51,51 @@ export default () => {
         <TextFontFamily />
       </View>
       <View>
-        <Text style={{ color: "gray" }}>删除线</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>删除线</Text>
         <TextStrikethrough />
       </View>
       <View>
-        <Text style={{ color: "gray" }}>下划线</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>下划线</Text>
         <TextUnderline />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>倾斜角度</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>倾斜角度</Text>
         <TextItalic />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>省略配置默认展示行数</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>省略配置默认展示行数</Text>
         <TextRows />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>是否可展开</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>是否可展开</Text>
         <TextExpandable />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>展开后是否可以重新收起</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>表情展开收起</Text>
         <TextCollapsible />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>定制样式</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>定制样式</Text>
         <TextCustomStyle />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>定制 emoji 样式</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>定制 emoji 样式</Text>
         <TextCustomEmojiStyle />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>全量表情展示</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>全量表情展示</Text>
         <TextBasicEmoji />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>小红书表情</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>小红书表情</Text>
         <TextXHSemoji />
       </View>
     </ScrollView>

package/src/components/Text/hooks/cloneContainer.tsx

@@ -1,14 +1,18 @@
-import { StyleSheet, View, Text, TextStyle } from "react-native";
-import React, { useRef } from "react";
+import { StyleSheet, View, Text, TextStyle, Dimensions } from "react-native";
+import React, { useRef, useMemo, useState, useEffect } from "react";
 
 export const CloneContainer = ({
   text,
   textStyle,
   onTextLayout,
+  isRenderEmoji,
+  setLines,
 }: {
   text?: string;
   textStyle: TextStyle;
   onTextLayout?: (e: any) => void;
+  isRenderEmoji?: boolean;
+  setLines?: any;
 }) => {
   const containerRef = useRef(null);
 
@@ -17,19 +21,80 @@ export const CloneContainer = ({
       zIndex: -9999,
       top: -9999,
       height: "auto",
+      width: "100%",
       minHeight: "auto",
       maxHeight: "auto",
     },
     text: {
       ...textStyle,
     },
+    view: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      width: "100%",
+      flexWrap: "wrap",
+    },
   });
+  const [lefts, setLefts] = useState<number[]>([]);
+
+  const renderText = useMemo(() => {
+    if (Array.isArray(text)) {
+      const tempText = text.map?.((txt, index) => {
+        return (
+          <Text
+            onLayout={(e) => {
+              const left = e.nativeEvent.layout.x + e.nativeEvent.layout.width;
+              !lefts[index] && (lefts[index] = left) && setLefts([...lefts]);
+            }}
+          >
+            {txt}
+          </Text>
+        );
+      });
+      return tempText;
+    } else {
+      return <Text>{text}</Text>;
+    }
+  }, [text]);
+
+  useEffect(() => {
+    if (Array.isArray(text) && lefts.length === text.length) {
+      let lines: any = [],
+        cur: any[] = [];
+      lefts.forEach((left, index) => {
+        cur.push(typeof text[index] === "string" ? <Text>{text[index]}</Text> : text[index]);
+        if (left > Dimensions.get("screen").width * 0.9) {
+          lines.push({
+            text: React.Children.map([...cur], (child) => {
+              return React.cloneElement(child, {
+                key: index,
+              });
+            }),
+          });
+          cur = [];
+        }
+      });
+      console.log("~~~~~lines", lines.length);
+      // 处理最后一行
+      if (cur.length > 0) {
+        lines.push({
+          text: [...cur],
+        });
+      }
+      setLines(lines);
+    }
+  }, [lefts]);
 
   return (
     <View ref={containerRef} style={styles.container}>
-      <Text onTextLayout={onTextLayout} style={styles.text}>
-        {text}
-      </Text>
+      {isRenderEmoji ? (
+        <View style={styles.view}>{renderText}</View>
+      ) : (
+        <Text onTextLayout={onTextLayout} style={styles.text}>
+          {text}
+        </Text>
+      )}
     </View>
   );
 };

package/src/components/Text/styles.ts

@@ -51,6 +51,9 @@ export default ({
 
   const actionStyle: ViewStyle = {
     marginLeft: 4,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
   };
 
   return StyleSheet.create({

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

@@ -95,12 +95,47 @@ export default function App() {
         clearable
         placeholder="占位符"
         suffix={
-          <Button variant="text" style={{ marginLeft: 12 }}>
+          <Button
+            variant="text"
+            style={{ marginLeft: 12, height: 24, minWidth: "auto", width: "auto", paddingHorizontal: 0 }}
+          >
             按钮
           </Button>
         }
       />
       <Br />
+
+      <Desc>后缀跳转链接</Desc>
+      <TextField
+        modelValue={modelValue}
+        clearable
+        placeholder="占位符"
+        suffix={
+          <Button
+            type="primary"
+            variant="text"
+            style={{ marginLeft: 12, height: 24, minWidth: "auto", width: "auto", paddingHorizontal: 0 }}
+          >
+            按钮
+          </Button>
+        }
+      />
+      <Br />
+
+      <Desc>后缀图片</Desc>
+      <TextField
+        modelValue={modelValue}
+        clearable
+        placeholder="占位符"
+        type="primary"
+        suffix={
+          <Image
+            source={{ uri: "https://fe-platform.xhscdn.com/platform/104101l031ndr1d7flm06d5494g900000000001m2bkj16" }}
+            style={{ height: 24, width: 48 }}
+          />
+        }
+      />
+      <Br />
       <Desc>前缀和后缀</Desc>
       <TextField
         modelValue={modelValue}

package/src/components/TextView/TextView.tsx

@@ -144,7 +144,7 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
       <TextInput
         testID="text-input"
         ref={inputRef}
-        style={[styles.input, { height: rows * 24 }, style]}
+        style={[styles.input, { minHeight: rows * 24, height: "auto" }, style]}
         value={value}
         onChangeText={handleChangeText}
         onFocus={handleFocus}
@@ -155,7 +155,6 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
         multiline
         returnKeyType={props.returnKeyType as any}
         autoFocus={focused}
-        numberOfLines={rows}
         maxLength={maxLength}
         onKeyPress={handleKeyPress}
         onSubmitEditing={props.onSubmitEditing}

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

@@ -23,7 +23,6 @@ export default function App() {
       <TextView
         modelValue={modelValue}
         showCount
-        maxLength={10}
         clearable
         actionLayout={"horizontal"}
         autofocus={true}

package/src/components/TextView/styles.ts

@@ -11,6 +11,7 @@ const createStyles = (disabled: boolean, actionLayout: "horizontal" | "vertical"
       paddingVertical: 12,
       paddingHorizontal: 16,
       backgroundColor: themeColor.Bg,
+      position: "relative",
     },
     container: {
       display: "flex",
@@ -73,6 +74,9 @@ const createStyles = (disabled: boolean, actionLayout: "horizontal" | "vertical"
       marginTop: actionLayout === "vertical" ? 12 : 0,
       justifyContent: "flex-end",
       alignItems: "center",
+      bottom: 12,
+      position: "absolute",
+      right: 12,
     },
   });
   return styles;

package/src/components/Toast/Toast.tsx

@@ -96,7 +96,7 @@ const ToastContainer = (p: RedsToast) => {
             {icon ? (
               icon
             ) : type === ToastBuiltInType.LOADING ? (
-              <ProgressIndicator type="default" strokeColor={colorMode === "light" ? "dark" : "light"} size={48} />
+              <ProgressIndicator type="default" strokeColor={colorMode === "light" ? "dark" : "light"} size={30} />
             ) : type === ToastBuiltInType.ERROR ? (
               <Icon icon={Close} size={48} type={IconType.iconType?.image} />
             ) : type === ToastBuiltInType.PROGRESS ? (

package/src/components/Uploader/Uploader.tsx

@@ -1,6 +1,15 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { View, TouchableWithoutFeedback, Text, Image, Platform } from "react-native";
-import { RedsUploader, UploaderDefaultProps, UploaderType, UploaderFileListItem, File } from "./interface/index";
+import { View, TouchableWithoutFeedback, Text, Image, ImageStyle } from "react-native";
+import {
+  RedsUploader,
+  UploaderDefaultProps,
+  UploaderType,
+  UploaderFileListItem,
+  File,
+  UploadImage,
+  UploadImageStyle,
+  UploadContainerStyle,
+} from "./interface/index";
 import { useThemeColor, useColorMode } from "../ConfigProvider";
 import ProgressIndicator from "../ProgressIndicator";
 import { Icon, IconType } from "../Icon/index";
@@ -48,11 +57,13 @@ const Uploader = (props: RedsUploader) => {
         desc: props.IDCardPhotoText || IDCardPhotoKey,
         ...props?.value?.[0],
       },
-      {
+    ];
+    if (props.type === UploaderType.IDENTITY || props.type === UploaderType.HKPassport) {
+      data.push({
         desc: props.nationalEmblemSideOfIDCardText || nationalEmblemSideOfIDCardKey,
         ...props?.value?.[1],
-      },
-    ];
+      });
+    }
     return data;
   }, [props.value]);
 
@@ -133,7 +144,6 @@ const Uploader = (props: RedsUploader) => {
       });
     });
   };
-
   /**
    * 选取文件
    * @param event Event
@@ -222,7 +232,7 @@ const Uploader = (props: RedsUploader) => {
   }, [colorMode]);
 
   return props.type === UploaderType.NORMAL ? (
-    <View style={styles.container}>
+    <View style={[styles.container, props.isFormItem ? { paddingHorizontal: 0, paddingBottom: 0 } : {}]}>
       {/** 图片 */}
       {props?.value?.map((item, index) => (
         <View key={index} style={styles.imageView}>
@@ -293,10 +303,17 @@ const Uploader = (props: RedsUploader) => {
       )}
     </View>
   ) : (
-    <View style={styles.container}>
+    <View style={[styles.container, props.isFormItem ? { paddingHorizontal: 0, paddingBottom: 0 } : {}]}>
       {/** 图片/上传 */}
       {identityList.map((item, index) => (
-        <View key={index} style={styles.identityView}>
+        <View
+          key={index}
+          style={[
+            styles.identityView,
+            /** @ts-ignore */
+            UploadContainerStyle[props.type || UploaderType.IDENTITY],
+          ]}
+        >
           {item.content || item.url ? (
             <>
               <Image source={{ uri: item.content || item.url }} style={styles.identityImage} />
@@ -315,8 +332,17 @@ const Uploader = (props: RedsUploader) => {
             <TouchableWithoutFeedback onPress={() => onChange()}>
               <View style={styles.identityUpload}>
                 <View style={styles.column}>
-                  <Icon type={IconType.iconType.image} size={24} icon={User} />
-                  <Text style={styles.identifyDesc}>{item.desc}</Text>
+                  <Image
+                    source={{ uri: UploadImage[props.type as UploaderType][index] as string }}
+                    style={UploadImageStyle[props.type || UploaderType.IDENTITY] as ImageStyle}
+                  />
+                  <Image
+                    source={{
+                      uri: "https://fe-platform.xhscdn.com/platform/104101l031nlco3aolm06d5494g900000000001gjujk24",
+                    }}
+                    style={{ height: 32, width: 32, position: "absolute", left: 45 - 16, top: 39 - 16 }}
+                  />
+                  {/* <Text style={styles.identifyDesc}>{item.desc}</Text> */}
                 </View>
                 {/** 按钮 */}
               </View>

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

@@ -65,26 +65,57 @@ export default function App() {
 
       <Uploader
         value={value}
-        onChange={(files) => setValue(files)}
+        onChange={(files: any) => setValue(files)}
         accept="image/*"
         //@ts-ignore
         invoke={invoke}
+        multiple={true}
       />
 
       <Text>上传身份证</Text>
       <Uploader
         value={value1}
-        onChange={(files) => setValue1(files)}
+        onChange={(files: any) => setValue1(files)}
         accept="image/png"
         type={UploaderType.UploaderType.IDENTITY}
         //@ts-ignore
         invoke={invoke}
       />
 
+      <Text>上传港澳通行证</Text>
+      <Uploader
+        value={value1}
+        onChange={(files: any) => setValue1(files)}
+        accept="image/png"
+        type={UploaderType.UploaderType.HKPassport}
+        //@ts-ignore
+        invoke={invoke}
+      />
+
+      <Text>上传护照</Text>
+      <Uploader
+        value={value1}
+        onChange={(files: any) => setValue1(files)}
+        accept="image/png"
+        type={UploaderType.UploaderType.Passport}
+        //@ts-ignore
+        invoke={invoke}
+      />
+
+      <Text>上传营业执照</Text>
+      <Uploader
+        value={value1}
+        onChange={(files: any) => setValue1(files)}
+        accept="image/png"
+        type={UploaderType.UploaderType.BussinessLicense}
+        //@ts-ignore
+        invoke={invoke}
+      />
+
       <Text>上传多张</Text>
       <Uploader
         value={value2}
-        onChange={(files) => setValue2(files)}
+        onChange={(files: any) => setValue2(files)}
         accept="image/png"
         multiple={true}
         //@ts-ignore

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

@@ -27,6 +27,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | uploadFailText                 | 上传失败文案                    | string                               |                     |
 | uploadingText                  | 上传中文案                      | string                               |                     |
 | invoke                         | invoke                          | (method: string, params: any) => any |                     |
+| isFormItem                     | 是否是formItem                  | boolean                              | false               |
 
 ### Events
 

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

@@ -1,6 +1,9 @@
 export const enum UploaderType {
   IDENTITY = "identity",
   NORMAL = "normal",
+  HKPassport = "HKPassport",
+  Passport = "Passport",
+  BussinessLicense = "BussinessLicense",
 }
 
 export const enum UploaderSize {
@@ -8,6 +11,64 @@ export const enum UploaderSize {
   LARGE = "large",
 }
 
+export const UploadImage = {
+  [UploaderType.IDENTITY]: [
+    "https://fe-platform.xhscdn.com/platform/104101l031lnhgai5li06d5494g900000000001nf43isq",
+    "https://fe-platform.xhscdn.com/platform/104101l031lngm57qle06d5494g900000000001lffdmnc",
+  ],
+  [UploaderType.HKPassport]: [
+    "https://fe-platform.xhscdn.com/platform/104101l031lnib2m55o06d5494g900000000001ki6dfum",
+    "https://fe-platform.xhscdn.com/platform/104101l031lnibh76loe6d5494g900000000001knu5lhc",
+  ],
+  [UploaderType.Passport]: ["https://fe-platform.xhscdn.com/platform/104101l031lniar2c5o06d5494g900000000001la6h4am"],
+  [UploaderType.NORMAL]: ["https://fe-platform.xhscdn.com/platform/104101l031lniatse5i06d5494g900000000001nhpjdbm"],
+  [UploaderType.BussinessLicense]: [
+    "https://fe-platform.xhscdn.com/platform/104101l031lniatse5i06d5494g900000000001nhpjdbm",
+  ],
+};
+
+export const UploadImageStyle = {
+  [UploaderType.IDENTITY]: {
+    width: 90.56,
+    height: 78.4,
+  },
+  [UploaderType.HKPassport]: {
+    width: 90.56,
+    height: 78.4,
+  },
+  [UploaderType.Passport]: {
+    width: 90.56,
+    height: 85.39,
+  },
+  [UploaderType.BussinessLicense]: {
+    width: 90.56,
+    height: 83.85,
+  },
+  [UploaderType.NORMAL]: {
+    width: 90.56,
+    height: 78.4,
+  },
+};
+
+export const UploadContainerStyle = {
+  [UploaderType.IDENTITY]: {
+    height: 109.34,
+  },
+  [UploaderType.HKPassport]: {
+    height: 109.34,
+  },
+  [UploaderType.Passport]: {
+    height: 122.35,
+  },
+  [UploaderType.BussinessLicense]: {
+    height: 115.97,
+  },
+  [UploaderType.NORMAL]: {
+    width: 84.25,
+    height: 84.25,
+  },
+};
+
 export type Status = "initial" | "uploading" | "failed" | "success";
 
 export type File = {
@@ -48,6 +109,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 {}
@@ -59,4 +121,5 @@ export const UploaderDefaultProps = {
   type: UploaderType.NORMAL,
   size: UploaderSize.NORMAL,
   disable: false,
+  isFormItem: false,
 };

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;