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

package/src/components/Image/hook/index.ts

@@ -30,5 +30,3 @@ export const useBlur = ({ source }: { source: ImageSourcePropType }) => {
   if (!url) return { uri: "" };
   return { uri: url.includes("?") ? url.replace(/\?.*/, "?imageMogr2/blur/25x25") : url + "?imageMogr2/blur/25x25" };
 };
-
-export { useImageId } from "./useImageId";

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

@@ -52,6 +52,7 @@ export interface RedsImage {
   apmBiz?: ApmBiz;
   onFirstDrawFinished?: (e: Event) => void;
   fadeDuration?: number;
+  format?: boolean;
 }
 
 export interface RedsImageEvent {}
@@ -63,6 +64,7 @@ export const ImageDefaultProps = {
   abortApmCollection: false,
   onFirstDrawFinished: () => {},
   fadeDuration: 300,
+  format: true,
 };
 
 export interface ImageTrackerProps {

package/src/components/ImagePreview/ImagePreview.tsx

@@ -3,7 +3,9 @@ import { Text, Image, Animated, View, TouchableOpacity, TouchableWithoutFeedback
 import Carousel from "../Carousel";
 import { RedsImagePreview, ImagePreviewDefaultProps } from "./interface";
 import styles from "./styles";
+import useMounted from "../../pvCount/useUnmountedProcess";
 const ImagePreview = (props: RedsImagePreview) => {
+  useMounted("Image");
   const [currentIndex, setCurrentIndex] = useState(props.initIndex || 0);
   const [_visible, setVisible] = useState(props.visible);
   const handleChange = (url: string, index: number) => {

package/src/components/LanguageProvider/LanguageProvider.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { RedsLanguageProvider, LanguageProviderDefaultProps } from "./interface/index";
 import { LanguageProviderContext } from "./hooks/LanguageContext";
-
+import useMounted from "../../pvCount/useUnmountedProcess";
 const LanguageProvider = (props: RedsLanguageProvider) => {
+  useMounted("LanguageProvider");
   const { children } = props;
   return (
     <LanguageProviderContext.Provider value={{ language: props.language!, config: props.config }}>

package/src/components/List/List.tsx

@@ -37,7 +37,7 @@ const List: React.FC<RedsList> = ({ headerText, footerText, type = "grouped", co
   }, [registeredChildren.current]);
 
   return (
-    <View style={[styles.list, containerStyle]}>
+    <View style={[styles.list, containerStyle, { marginHorizontal: type === "grouped" ? 16 : 0 }]}>
       {headerText && <Text style={type === "plain" ? styles.headerTextPlain : styles.headerText}>{headerText}</Text>}
       <ListContext.Provider value={{ registerChild, unregisterChild }}>
         <View style={type === "plain" ? styles.listContainerPlain : styles.listContainer}>{children}</View>

package/src/components/List/ListItem/ListItem.tsx

@@ -4,6 +4,7 @@ import { useListContext } from "./ListContext";
 import { useColorMode } from "../../ConfigProvider";
 import createStyles from "../styles";
 import useMounted from "../../../pvCount/useUnmountedProcess";
+import { Badge } from "../../Badge";
 
 export interface RedsListItem {
   title: string;
@@ -18,6 +19,8 @@ export interface RedsListItem {
   prefixStyle?: ViewStyle;
   children?: ReactNode;
   contentStyle?: ViewStyle;
+  badgeActionContent?: string;
+  badgeTitleContent?: string;
 }
 
 const ListItem: React.FC<RedsListItem> = ({
@@ -33,6 +36,8 @@ const ListItem: React.FC<RedsListItem> = ({
   prefixStyle = {},
   contentStyle = {},
   children,
+  badgeActionContent,
+  badgeTitleContent,
 }) => {
   useMounted("ListItem");
   const styles = createStyles();
@@ -67,9 +72,13 @@ const ListItem: React.FC<RedsListItem> = ({
           children
         ) : (
           <View style={[styles.content, contentStyle]}>
-            {prefix && <View style={[styles.prefix, prefixStyle]}>{prefix}</View>}
-            <View style={styles.contentBox}>
-              <View style={styles.contentContainer}>
+            {prefix && (
+              <View style={[styles.prefix, { height: listItemSizeToHeight[size] }, prefixStyle]}>{prefix}</View>
+            )}
+            <View style={[styles.contentBox, lineItem ? styles.hr : {}, { height: listItemSizeToHeight[size] }]}>
+              <View
+                style={[styles.contentContainer, { marginBottom: 12, marginTop: 12 }, prefix ? { height: 48 } : {}]}
+              >
                 <View style={styles.textContainer}>
                   <Text style={styles.title}>{title}</Text>
                   {size === "expand" && subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
@@ -80,6 +89,11 @@ const ListItem: React.FC<RedsListItem> = ({
                   ) : (
                     <View style={styles.tail}>
                       <Text style={[styles.tailText, actionTextStyle]}>{actionText}</Text>
+                      {badgeActionContent && (
+                        <Badge content={badgeActionContent} position="centerLeft" offset={[-15, 7]}>
+                          <View></View>
+                        </Badge>
+                      )}
                       {arrow && (
                         <View style={{ height: 16, width: 16 }}>
                           <Image
@@ -101,7 +115,6 @@ const ListItem: React.FC<RedsListItem> = ({
             </View>
           </View>
         )}
-        {lineItem && <View style={[styles.hr, { top: size === "regular" ? 12 : 20 }]}></View>}
       </View>
     </TouchableWithoutFeedback>
   );

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, ScrollView, StyleSheet, Image } from "react-native";
-import { List, Button, ListItem } from "@xhs/reds-rn-next";
+import { List, Button, ListItem, Switch, useThemeColor, Icon } from "@xhs/reds-rn-next";
+import { RowDoubleNew } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const styles = StyleSheet.create({
   container: {
@@ -8,7 +9,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#F5F5F5",
     paddingVertical: 40,
     marginBottom: 40,
-    paddingHorizontal: 16,
+    // paddingHorizontal: 16,
   },
   titleBox: {
     marginLeft: 20,
@@ -26,13 +27,20 @@ const styles = StyleSheet.create({
     borderRadius: 24,
   },
   grayBox: {
-    width: 30,
-    height: 30,
+    width: 48,
+    height: 48,
     backgroundColor: "gray",
   },
+  center: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });
 
 export default function ListDemo() {
+  const themeColor = useThemeColor();
   return (
     <ScrollView style={styles.container}>
       <Text style={styles.titleBox}>基本使用</Text>
@@ -47,6 +55,39 @@ export default function ListDemo() {
         <ListItem title="标题" actionText="描述" />
       </List>
 
+      <List headerText="单行没有icon没有描述" type="plain">
+        <ListItem title="标题" />
+      </List>
+
+      <List type="plain">
+        <ListItem title="Prefix" prefix={<Icon icon={RowDoubleNew} size={24} fill={themeColor.Fill5} />} />
+      </List>
+
+      <List type="plain">
+        <ListItem title="标题" badgeActionContent={"内容"} arrow />
+      </List>
+      <List type="plain">
+        <ListItem
+          title="Prefix"
+          size="expand"
+          prefix={<Icon icon={RowDoubleNew} size={24} fill={themeColor.Fill5} />}
+          subtitle="这是一段很长的描述"
+        />
+      </List>
+      <List type="plain">
+        <ListItem
+          title="Prefix"
+          size="expand"
+          prefix={
+            <Image
+              style={styles.avatar}
+              source={{
+                uri: "https://picasso-static.xiaohongshu.com/fe-platform/81bb94fcff424f3ca02d620e7460d5a8315b0158.png",
+              }}
+            />
+          }
+        />
+      </List>
       <Text style={styles.titleBox}>类型</Text>
       <List headerText="Type: Plain" type="plain">
         <ListItem title="标题" actionText="描述" />
@@ -59,6 +100,10 @@ export default function ListDemo() {
         <ListItem title="标题" arrow />
       </List>
 
+      <List headerText="Badge">
+        <ListItem title="标题" badgeActionContent={"内容"} arrow />
+      </List>
+
       <Text style={styles.titleBox}>尺寸</Text>
       <List headerText="Size: Regular | Expand">
         <ListItem title="Size: Regular" actionText="描述" />
@@ -67,6 +112,14 @@ export default function ListDemo() {
 
       <Text style={styles.titleBox}>插槽</Text>
       <List headerText="Prefix 插槽">
+        <ListItem title="标题" badgeActionContent={"内容"} arrow />
+        <ListItem title="Normal" subtitle="这是一段很长的描述" size="expand" />
+        <ListItem
+          title="Prefix"
+          size="expand"
+          prefix={<Icon icon={RowDoubleNew} size={24} fill={themeColor.Fill5} />}
+          subtitle="这是一段很长的描述"
+        />
         <ListItem
           title="Prefix"
           size="expand"
@@ -104,6 +157,15 @@ export default function ListDemo() {
             </Button>
           }
         />
+        <ListItem
+          title="Action"
+          action={
+            <View style={styles.center}>
+              <Text style={{ color: themeColor.Description, marginRight: 8 }}>描述</Text>
+              <Switch isControl={false}></Switch>
+            </View>
+          }
+        />
         <ListItem
           title="Action"
           subtitle="slot"
@@ -147,7 +209,7 @@ export default function ListDemo() {
           subtitle="副标题"
           prefix={<View style={styles.grayBox} />}
         >
-          <View style={{ height: 100, backgroundColor: "lightgreen", width: "100%" }}></View>
+          <View style={{ height: 100, backgroundColor: "lightgreen", flex: 1 }}></View>
         </ListItem>
         <ListItem title="长长长标题" actionText="ACTION" arrow />
         <ListItem title="标题 2" actionText="描述" />

package/src/components/List/styles.ts

@@ -50,26 +50,28 @@ const createStyles = () => {
     listItem: {
       display: "flex",
       flexDirection: "column",
-      paddingVertical: 12,
       paddingLeft: 12,
     },
     expand: {},
     prefix: {
       marginRight: 12,
       marginLeft: 4,
+      paddingVertical: 12,
     },
     content: {
       display: "flex",
       flexDirection: "row",
-      alignItems: "center",
+      alignItems: "flex-start",
       justifyContent: "flex-start",
     },
     contentBox: {
       flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
     },
     contentContainer: {
       flexDirection: "row",
-      alignItems: "center",
+      // alignItems: "center",
       justifyContent: "space-between",
       width: "100%",
     },
@@ -85,7 +87,7 @@ const createStyles = () => {
     title: {
       fontSize: typography.B1FontSize,
       fontWeight: typography.B1FontWeight,
-      lineHeight: typography.B1LineHeight,
+      // lineHeight: typography.B1LineHeight,
       color: themeColor.Title,
     },
     subtitle: {
@@ -93,6 +95,7 @@ const createStyles = () => {
       color: themeColor.Description,
       lineHeight: typography.C2LineHeight,
       fontWeight: typography.C2FontWeight,
+      marginTop: 4,
     },
     tail: {
       marginRight: 16,
@@ -107,16 +110,18 @@ const createStyles = () => {
     },
 
     hr: {
-      borderTopWidth: 0.5,
-      borderTopColor: themeColor.Separator,
+      borderBottomWidth: 0.5,
       width: "100%",
-      alignSelf: "stretch",
-      position: "relative",
+      borderBottomColor: themeColor.Separator,
     },
     icon: {
       width: 16,
       height: 16,
     },
+    badge: {
+      height: "100%",
+      width: 1,
+    },
   });
   return styles;
 };

package/src/components/MiniSnackBar/MiniSnackBar.tsx

@@ -8,7 +8,7 @@ import { useLanguage } from "../LanguageProvider";
 const SnackBar: React.FC<RedsMiniSnackBar> = (
   { show, title, onClick = () => {}, prefixImage, suffixButton, style = {} } = { ...MiniSnackBarDefaultProps },
 ) => {
-  useMounted("SnackBar");
+  useMounted("MiniSnackBar");
   const translateY = useRef(new Animated.Value(0)).current;
   const opacity = useRef(new Animated.Value(0)).current;
   const height = useRef(0);

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, Text, ScrollView } from "react-native";
-import { NavigationBar, NavigationBarType, IconType, useThemeColor } from "@xhs/reds-rn-next";
+import { NavigationBar, NavigationBarType, IconType, useThemeColor, Tabs, Tab, TabType } from "@xhs/reds-rn-next";
 import { Close, BackCenterB, MoreB, ShareB, BackLeftB } from "@xhs/reder-icon-svg-ReDs_icon";
 import { alwaysColor } from "@xhs/reds-token-next";
 
@@ -199,7 +199,11 @@ export default function App() {
         leftActions={[backIconBg, closeIconBg]}
         rightActions={[shareIconBg, moreIconBg]}
       >
-        <Text>自定义标题区</Text>
+        <Tabs active={"1"} layout={TabType.TabLayoutType.middle} theme={TabType.TabThemeType.text}>
+          <Tab name={"类目"} value={"1"}></Tab>
+          <Tab name={"类目"} value={"2"}></Tab>
+          <Tab name={"类目"} value={"3"}></Tab>
+        </Tabs>
       </NavigationBar>
       <Br />
 
@@ -219,7 +223,11 @@ export default function App() {
         leftActions={[backIconBg, closeIconBg]}
         rightActions={[shareIconBg, moreIconBg]}
       >
-        <Text>自定义标题区</Text>
+        <Tabs active={"1"} layout={TabType.TabLayoutType.middle} theme={TabType.TabThemeType.text}>
+          <Tab name={"类目"} value={"1"}></Tab>
+          <Tab name={"类目"} value={"2"}></Tab>
+          <Tab name={"类目"} value={"3"}></Tab>
+        </Tabs>
       </NavigationBar>
 
       <Text>透明背景</Text>

package/src/components/NoticeBar/NoticeBar.tsx

@@ -4,7 +4,9 @@ import { RedsNoticeBar, NoticeBarDefaultProps, NoticeBarType, NoticeBarActionTyp
 import getStyles from "./styles";
 import { useThemeColor } from "../ConfigProvider";
 import { useLanguage } from "../LanguageProvider";
+import useMounted from "../../pvCount/useUnmountedProcess";
 const NoticeBar = (props: RedsNoticeBar) => {
+  useMounted("NoticeBar");
   const [_visible, setVisible] = useState(true);
 
   const themeColor = useThemeColor();
@@ -83,7 +85,13 @@ const NoticeBar = (props: RedsNoticeBar) => {
   }, [props.visible]);
 
   return _visible ? (
-    <View style={[styles.container, { backgroundColor: color }, props.style]}>
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: color, alignItems: props.type === NoticeBarType.MUTILINE ? "flex-start" : "center" },
+        props.style,
+      ]}
+    >
       {props.withIcon ? <Image source={{ uri: icon }} style={styles.icon} testID="notice-icon" /> : <></>}
       {props.children}
       <View

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

@@ -133,7 +133,7 @@ export default function App() {
         }
         withIcon={true}
         closable={true}
-        actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
+        // actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
       />
 
       <Desc>多行展示</Desc>
@@ -151,7 +151,7 @@ export default function App() {
         }
         type={NoticeBarType.NoticeBarType.MUTILINE}
         withIcon={true}
-        closable={true}
+        // closable={true}
         actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
       />
 
@@ -170,7 +170,7 @@ export default function App() {
         }
         type={NoticeBarType.NoticeBarType.SCROLLABLE}
         withIcon={true}
-        closable={true}
+        // closable={true}
         actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
       />
       <Br />
@@ -190,7 +190,7 @@ export default function App() {
         }
         type={NoticeBarType.NoticeBarType.SCROLLABLE}
         withIcon={true}
-        closable={true}
+        // closable={true}
         theme={NoticeBarType.NoticeBarTheme.SUCCESS}
         actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
       />
@@ -200,7 +200,7 @@ export default function App() {
         }
         type={NoticeBarType.NoticeBarType.SCROLLABLE}
         withIcon={true}
-        closable={true}
+        // closable={true}
         theme={NoticeBarType.NoticeBarTheme.WARNING}
         actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
       />
@@ -224,7 +224,7 @@ export default function App() {
         withIcon={true}
         closable={true}
         theme={NoticeBarType.NoticeBarTheme.SUCCESS}
-        actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
+        // actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
         onClick={handleClick}
         onClose={handleClose}
       />
@@ -234,7 +234,7 @@ export default function App() {
         }
         type={NoticeBarType.NoticeBarType.SCROLLABLE}
         withIcon={true}
-        closable={true}
+        // closable={true}
         theme={NoticeBarType.NoticeBarTheme.WARNING}
         actionType={NoticeBarType.NoticeBarActionType.TEXTACTION}
         onClick={handleClick}

package/src/components/NoticeBar/styles.ts

@@ -25,7 +25,6 @@ export default (themeColor: any) => {
       boxSizing: "border-box",
       display: "flex",
       flexDirection: "row",
-      alignItems: "center",
     },
     textWrapper: {
       flex: 1,

package/src/components/Picker/Picker.tsx

@@ -36,6 +36,7 @@ const Picker = (props: RedsPicker) => {
         close={true}
       >
         <PickerView columns={props.columns} value={props.value} onChange={handleChange} accessibility={accessibility} />
+        {props.bottom}
       </AnimatedSheets>
     </Portal>
   );

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

@@ -173,9 +173,11 @@ export default function App() {
         columns={singleColumns}
         value={value1}
         visible={visible1}
+        label={"标题"}
         onCancel={() => setVisible1(false)}
         onConfirm={handleConfirm1}
         onChange={handleChange1}
+        bottom={<Text>xxxxxxx</Text>}
       />
       <Button onClick={handleVisible2}>双列</Button>
       <Picker

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

@@ -17,6 +17,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | visible       | 是否展示弹窗                | boolean    | false  |
 | accessibility | 无障碍的一系列属性 是个对象 | Object     | `{}`   |
 | hostName      | hostName                    | string     |        |
+| bottom        | picker 底部自定义内容       | any        |        |
 
 ### Events
 

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

@@ -17,6 +17,7 @@ export interface RedsPicker {
   visible: boolean;
   accessibility?: Object;
   hostName?: string;
+  bottom?: any;
 }
 
 export interface RedsPickerEvent {}

package/src/components/PickerView/Wheel.tsx

@@ -33,7 +33,7 @@ const Wheel = (props: RedsWheel) => {
   }, [column, value]);
 
   useEffect(() => {
-    const newVal = column[index]?.value;
+    const newVal = column?.[index]?.value;
     scrollTo(index * itemHeight);
     if (newVal) {
       onSelect(newVal, props.index);