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

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]);
 

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet, Image, ScrollView } from "react-native";
-import { Avatar } from "@xhs/reds-rn-next";
+import { Avatar, Icon } from "@xhs/reds-rn-next";
+import { GoodsB } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const styles = StyleSheet.create({
   container: {
@@ -25,6 +26,10 @@ const styles = StyleSheet.create({
     marginRight: 20,
     marginBottom: 10,
     marginTop: 30,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
   },
   check: {
     width: 20,
@@ -55,26 +60,129 @@ export default function App() {
     <ScrollView style={styles.container}>
       <Desc>默认用法</Desc>
       <View style={styles.containerBox}>
-        <Text style={styles.rightGap}>
+        <View style={styles.rightGap}>
           <Avatar />
-        </Text>
+        </View>
       </View>
       <Desc>size 用法</Desc>
       <View style={styles.containerBox}>
-        <Text style={styles.rightGap}>
+        <View style={styles.rightGap}>
           <Avatar size="small" type="live" />
+        </View>
+        <View style={styles.rightGap}>
+          <Avatar size="medium" type="live" />
+        </View>
+        <View style={styles.rightGap}>
+          <Avatar size="large" type="live" />
+        </View>
+        <View style={styles.rightGap}>
+          <Avatar size="xlarge" type="live" />
+        </View>
+        <View style={styles.rightGap}>
+          <Avatar size={18} type="live" />
+        </View>
+      </View>
+      <Br />
+
+      <Desc>size 用法 xlarge</Desc>
+      <View style={styles.containerBox}>
+        <View style={styles.rightGap}>
+          {/* <Text>68 * 68</Text> */}
+          <Avatar size={68} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>72 * 72</Text> */}
+          <Avatar size={72} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>76 * 76</Text> */}
+          <Avatar size={76} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>80 * 80</Text> */}
+          <Avatar size={80} />
+        </View>
+      </View>
+      <Br />
+
+      <Desc>size 用法 large</Desc>
+      <View style={styles.containerBox}>
+        <View style={styles.rightGap}>
+          {/* <Text>48 * 48</Text> */}
+          <Avatar size={48} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>52 * 52</Text> */}
+          <Avatar size={52} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>56 * 56</Text> */}
+          <Avatar size={56} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>64 * 64</Text> */}
+          <Avatar size={64} />
+        </View>
+      </View>
+      <Br />
+
+      <Desc>size 用法 medium</Desc>
+      <View style={styles.containerBox}>
+        <View style={styles.rightGap}>
+          {/* <Text>32 * 32</Text> */}
+          <Avatar size={32} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>36 * 36</Text> */}
+          <Avatar size={36} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>40 * 40</Text> */}
+          <Avatar size={40} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>44 * 44</Text> */}
+          <Avatar size={44} />
+        </View>
+      </View>
+      <Br />
+
+      <Desc>size 用法 small</Desc>
+      <View style={styles.containerBox}>
+        <View style={styles.rightGap}>
+          {/* <Text>16 * 16</Text> */}
+          <Avatar size={16} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>18 * 18</Text> */}
+          <Avatar size={18} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>24 * 24</Text> */}
+          <Avatar size={24} />
+        </View>
+        <View style={styles.rightGap}>
+          {/* <Text>28 * 28</Text> */}
+          <Avatar size={28} />
+        </View>
+      </View>
+      <Br />
+      <Desc>icon size 用法</Desc>
+      <View style={styles.containerBox}>
+        <Text style={styles.rightGap}>
+          <Avatar size="small" type="live" showTag={true} liveIcon={<Icon icon={GoodsB} />} />
         </Text>
         <Text style={styles.rightGap}>
-          <Avatar size="medium" type="live" />
+          <Avatar size="medium" type="live" showTag={true} liveIcon={<Icon icon={GoodsB} />} />
         </Text>
         <Text style={styles.rightGap}>
-          <Avatar size="large" type="live" />
+          <Avatar size="large" type="live" showTag={true} liveIcon={<Icon icon={GoodsB} />} />
         </Text>
         <Text style={styles.rightGap}>
-          <Avatar size="xlarge" type="live" />
+          <Avatar size="xlarge" type="live" showTag={true} liveIcon={<Icon icon={GoodsB} />} />
         </Text>
         <Text style={styles.rightGap}>
-          <Avatar size={18} type="live" />
+          <Avatar size={18} type="live" showTag={true} liveIcon={<Icon icon={GoodsB} />} />
         </Text>
       </View>
       <Br />

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

@@ -29,3 +29,10 @@ export const AvatarDefaultProps = {
   showTag: true,
   tagStyle: {},
 };
+
+export const avatarSizeMap = {
+  small: 8,
+  medium: 8,
+  large: 10,
+  xlarge: 14,
+};

package/src/components/Avatar/styles.ts

@@ -117,22 +117,21 @@ export const getLiveTextStyles = (size: AvatarSize, liveIcon: any) => {
       alignItems: "center",
       justifyContent: "center",
       backgroundColor: themeColor.Primary,
-      color: themeColor.White,
       borderRadius: 99,
-      textAlign: "center",
       opacity: 1,
       zIndex: 999,
     },
-    liveTextSmall: {
+    liveSmall: {
       fontSize: 8,
-      minWidth: 24,
+      minWidth: liveIcon ? 32 : 24,
       paddingVertical: 2,
       // height: 12,
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
+      paddingHorizontal: liveIcon ? 4 : 0,
     },
-    liveTextMedium: {
+    liveMedium: {
       fontSize: 8,
       minWidth: liveIcon ? 34 : 26,
       paddingVertical: 2,
@@ -141,7 +140,7 @@ export const getLiveTextStyles = (size: AvatarSize, liveIcon: any) => {
       justifyContent: "center",
       alignItems: "center",
     },
-    liveTextLarge: {
+    liveLarge: {
       fontSize: typography.C3FontSize,
       minWidth: liveIcon ? 44 : 34,
       paddingVertical: 2,
@@ -151,7 +150,7 @@ export const getLiveTextStyles = (size: AvatarSize, liveIcon: any) => {
       alignItems: "center",
       fontWeight: typography.C3FontWeight,
     },
-    liveTextXLarge: {
+    liveXLarge: {
       fontSize: typography.C2FontSize,
       minWidth: liveIcon ? 56 : 42,
       paddingVertical: 2,
@@ -160,6 +159,30 @@ export const getLiveTextStyles = (size: AvatarSize, liveIcon: any) => {
       justifyContent: "center",
       alignItems: "center",
     },
+    liveTextSmall: {
+      fontSize: 8,
+      textAlign: "center",
+      color: themeColor.White,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    liveTextMedium: {
+      fontSize: 8,
+      textAlign: "center",
+      color: themeColor.White,
+    },
+    liveTextLarge: {
+      fontSize: typography.C3FontSize,
+      fontWeight: typography.C3FontWeight,
+      textAlign: "center",
+      color: themeColor.White,
+    },
+    liveTextXLarge: {
+      fontSize: typography.C2FontSize,
+      textAlign: "center",
+      color: themeColor.White,
+    },
   });
 
   return {

package/src/components/Badge/Badge.tsx

@@ -55,7 +55,7 @@ const Badge: React.FC<RedsBadge> = (props) => {
     centerLeft: {
       transform: dot
         ? [{ translateX: 4 }, { translateY: -wrapperHeight / 2 }]
-        : [{ translateX: 8 }, { translateY: -wrapperHeight / 2 }],
+        : [{ translateX: wrapperWidth - 8 }, { translateY: -wrapperHeight / 2 }],
     },
     topCenter: {
       transform: [{ translateX: wrapperWidth / 2 }, { translateY: 0 }],

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

@@ -48,20 +48,20 @@ export default function App() {
         <Br />
         <View style={{ marginLeft: 20 }}>
           <Badge content={88}>
-            <Image src={imgUrl} width={48} height={48} />
+            <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
           </Badge>
           <Br />
           <Badge content={"新"}>
-            <Image src={imgUrl} width={48} height={48} />
+            <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
           </Badge>
           <Br />
           <Badge content={"标题"}>
-            <Image src={imgUrl} width={48} height={48} />
+            <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
           </Badge>
           <Br />
         </View>
         <Badge content={88}>
-          <Image src={imgUrl} width={48} height={48} />
+          <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
         </Badge>
 
         <Br />
@@ -69,7 +69,7 @@ export default function App() {
         <View style={styles.itembox}>
           <Text style={styles.boxitem}>
             <Badge dot content={99}>
-              <Image src={imgUrl} width={48} height={48} />
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
             </Badge>
           </Text>
         </View>
@@ -79,7 +79,7 @@ export default function App() {
         <View style={styles.itembox}>
           <Text style={styles.boxitem}>
             <Badge max={99} content={99213}>
-              <Image src={imgUrl} width={48} height={48} />
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
             </Badge>
           </Text>
         </View>
@@ -89,12 +89,12 @@ export default function App() {
         <View style={styles.itembox}>
           <Text style={styles.boxitem}>
             <Badge content={0}>
-              <Image src={imgUrl} width={48} height={48} />
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
             </Badge>
           </Text>
           <Text style={styles.boxitem}>
             <Badge showZero={false} content={0}>
-              <Image src={imgUrl} width={48} height={48} />
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
             </Badge>
           </Text>
         </View>
@@ -104,7 +104,7 @@ export default function App() {
         <View style={styles.itembox}>
           <Text style={styles.boxitem}>
             <Badge offset={[-24, 24]} content={99}>
-              <Image src={imgUrl} width={48} height={48} />
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
             </Badge>
           </Text>
         </View>
@@ -114,12 +114,54 @@ export default function App() {
         <View style={styles.itembox}>
           <Text style={styles.boxitem}>
             <Badge color={"#000"} content={99}>
-              <Image src={imgUrl} width={48} height={48} />
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
             </Badge>
           </Text>
         </View>
         <Br />
 
+        <Desc>position 位置 topLeft</Desc>
+        <View style={styles.itembox}>
+          <Text style={styles.boxitem}>
+            <Badge color={"#000"} content={99} position={"topLeft"}>
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
+            </Badge>
+          </Text>
+        </View>
+        <Desc>position 位置 centerLeft</Desc>
+        <View style={styles.itembox}>
+          <Text style={styles.boxitem}>
+            <Badge color={"#000"} content={99} position={"centerLeft"}>
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
+            </Badge>
+          </Text>
+        </View>
+        <Desc>position 位置 topCenter</Desc>
+        <View style={styles.itembox}>
+          <Text style={styles.boxitem}>
+            <Badge color={"#000"} content={99} position={"topCenter"}>
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
+            </Badge>
+          </Text>
+        </View>
+        <Desc>position 位置 centerCenter</Desc>
+        <View style={styles.itembox}>
+          <Text style={styles.boxitem}>
+            <Badge color={"#000"} content={99} position={"centerCenter"}>
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
+            </Badge>
+          </Text>
+        </View>
+
+        <Desc>position 位置 centerRight</Desc>
+        <View style={styles.itembox}>
+          <Text style={styles.boxitem}>
+            <Badge color={"#000"} content={99} position={"centerRight"}>
+              <View style={{ width: 48, height: 48, backgroundColor: "gray" }}></View>
+            </Badge>
+          </Text>
+        </View>
+
         <Br />
       </ScrollView>
     </View>