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

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>

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { BottomBar, Button } from "@xhs/reds-rn-next";
+import { BottomBar, Button, CheckBox, useThemeColor } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
   container: {
@@ -42,6 +42,7 @@ const Desc = ({ children = "" }) => {
 const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
 
 export default function App() {
+  const themeColor = useThemeColor();
   return (
     <ScrollView>
       <View style={styles.container}>
@@ -55,6 +56,15 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar showTopBorder={true}>
+            <Button type="primary" block size={"xLarge"}>
+              xLarge 按钮
+            </Button>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar showBackground={false}>
             <Button type="primary" block>
@@ -64,6 +74,15 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar showBackground={false}>
+            <Button type="primary" block size={"xLarge"}>
+              xLarge 按钮
+            </Button>
+          </BottomBar>
+        </View>
+        <Br />
+
         <Desc>按钮组</Desc>
         <View style={styles.itemBox}>
           <BottomBar layout="center">
@@ -75,6 +94,18 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout="center">
+            <Button type="primary" size={"xLarge"}>
+              xLarge按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button size={"xLarge"}>xLarge按钮</Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <BottomBar layout="center" fixedToBottom>
           <Button type="primary">按钮</Button>
           <View style={{ marginLeft: 10 }}>
@@ -82,6 +113,15 @@ export default function App() {
           </View>
         </BottomBar>
 
+        <BottomBar layout="center" fixedToBottom>
+          <Button type="primary" size={"xLarge"}>
+            按钮
+          </Button>
+          <View style={{ marginLeft: 10 }}>
+            <Button size={"xLarge"}>按钮</Button>
+          </View>
+        </BottomBar>
+
         <Desc>layout 布局</Desc>
         <View style={styles.itemBox}>
           <BottomBar layout="block">
@@ -93,6 +133,20 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout="block">
+            <Button type="primary" size={"xLarge"}>
+              按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button type="primary" size={"xLarge"}>
+                按钮
+              </Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar layout="center">
             <Button type="primary">按钮</Button>
@@ -103,6 +157,20 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout="center">
+            <Button type="primary" size={"xLarge"}>
+              按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button type="primary" size={"xLarge"}>
+                按钮
+              </Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar layout="right">
             <Button type="primary">按钮</Button>
@@ -113,9 +181,23 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout="right">
+            <Button type="primary" size={"xLarge"}>
+              按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button type="primary" size={"xLarge"}>
+                按钮
+              </Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <Desc>插槽</Desc>
         <View style={styles.itemBox}>
-          <BottomBar left={<Text style={styles.customArea}>自定义区域</Text>}>
+          <BottomBar layout={"right"} left={<Text style={styles.customArea}>自定义区域</Text>}>
             <Button type="primary">按钮</Button>
             <View style={{ marginLeft: 10 }}>
               <Button type="primary">按钮</Button>
@@ -124,12 +206,27 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout={"right"} left={<Text style={styles.customArea}>自定义区域</Text>}>
+            <Button type="primary" size={"xLarge"}>
+              按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button type="primary" size={"xLarge"}>
+                按钮
+              </Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar
             showTopBorder={true}
             top={
               <View style={styles.textflex}>
-                <Text>创建课程即代表同意</Text>
+                <CheckBox isControl={false} />
+                <Text style={{ marginLeft: 5, color: themeColor.Description }}>创建课程即代表同意</Text>
                 <Text style={styles.link}>《小红书直播课主播协议》</Text>
               </View>
             }
@@ -141,12 +238,31 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar
+            showTopBorder={true}
+            top={
+              <View style={styles.textflex}>
+                <CheckBox isControl={false} />
+                <Text style={{ marginLeft: 5, color: themeColor.Description }}>创建课程即代表同意</Text>
+                <Text style={styles.link}>《小红书直播课主播协议》</Text>
+              </View>
+            }
+          >
+            <Button type="primary" block size={"xLarge"}>
+              按钮
+            </Button>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar
             showTopBorder={true}
             bottom={
               <View style={styles.textflex}>
-                <Text>创建课程即代表同意</Text>
+                <CheckBox isControl={false} />
+                <Text style={{ marginLeft: 5, color: themeColor.Description }}>创建课程即代表同意</Text>
                 <Text style={styles.link}>《小红书直播课主播协议》</Text>
               </View>
             }
@@ -156,6 +272,23 @@ export default function App() {
             </Button>
           </BottomBar>
         </View>
+
+        <View style={styles.itemBox}>
+          <BottomBar
+            showTopBorder={true}
+            bottom={
+              <View style={styles.textflex}>
+                <CheckBox isControl={false} />
+                <Text style={{ marginLeft: 5, color: themeColor.Description }}>创建课程即代表同意</Text>
+                <Text style={styles.link}>《小红书直播课主播协议》</Text>
+              </View>
+            }
+          >
+            <Button type="primary" block size={"xLarge"}>
+              按钮
+            </Button>
+          </BottomBar>
+        </View>
       </View>
     </ScrollView>
   );

package/src/components/BottomBar/styles.ts

@@ -23,7 +23,7 @@ export const getStyles = (themeColor: any) => {
       borderTopColor: themeColor.Separator,
     },
     block: {
-      paddingHorizontal: 16,
+      paddingHorizontal: 48,
       justifyContent: "flex-start", // Align to the start for block layout
     },
     center: {
@@ -38,12 +38,12 @@ export const getStyles = (themeColor: any) => {
       width: "50%",
     },
     top: {
-      marginBottom: 8,
+      marginBottom: 18,
       justifyContent: "center",
       alignItems: "center",
     },
     bottom: {
-      marginTop: 8,
+      marginTop: 18,
       justifyContent: "center",
       alignItems: "center",
     },