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

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

package/src/components/Popover/Popover.tsx

@@ -5,7 +5,7 @@ import { ModalWrapper } from "./component";
 import { darkColor, lightColor, typography } from "@xhs/reds-token-next";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { Portal } from "../Portal";
-import { useColorMode } from "../ConfigProvider";
+const defaultValue = -9999;
 
 export default ({
   mode = "light",
@@ -37,18 +37,16 @@ export default ({
 
   const childRef = useRef<any>(null);
 
-  const colorMode = useColorMode();
-
   const [layout, setLayout] = useState({
-    x: 0,
-    y: 0,
+    x: defaultValue,
+    y: defaultValue,
     width: 0,
     height: 0,
   });
 
   const [floatingLayout, setFloatingLayout] = useState({
-    x: 0,
-    y: 0,
+    x: defaultValue,
+    y: defaultValue,
     width: 0,
     height: 0,
   });
@@ -120,19 +118,21 @@ export default ({
   useEffect(() => {
     onVisibleChange?.(!!_visible);
     if (_visible) {
-      Animated.timing(progress, {
-        toValue: 1,
-        duration: 400,
-        useNativeDriver: false,
-      }).start();
+      if (layout.x !== defaultValue) {
+        Animated.timing(progress, {
+          toValue: 1,
+          duration: duration ?? 400,
+          useNativeDriver: false,
+        }).start();
+      }
     } else {
       Animated.timing(progress, {
         toValue: 0,
-        duration: 400,
+        duration: duration ?? 400,
         useNativeDriver: false,
       }).start();
     }
-  }, [_visible]);
+  }, [_visible, layout]);
 
   const onMaskChange = (event: GestureResponderEvent, value: boolean) => {
     if (isControl) return;
@@ -226,68 +226,73 @@ export default ({
         }
         return child;
       })}
-      <Portal hostName={hostName}>
-        <ModalWrapper
-          needModal={needModal}
-          visible={_visible}
-          onClickMask={onClickMask}
-          opacity={opacity}
-          progress={progress}
-          zIndex={zIndex}
-        >
-          <>
-            <Animated.View
-              collapsable={false}
-              onLayout={(e) => {
-                setFloatingLayout(e.nativeEvent.layout);
-              }}
-              // @ts-expect-error
-              style={{
-                backgroundColor: popoverStyle.backgroundColor,
-                paddingHorizontal: 12,
-                paddingVertical: 7,
-                maxWidth: maxWidth || 280,
-                minHeight: 30,
-                borderRadius: 8,
-                zIndex,
-                shadowColor: "#000000",
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.1,
-                shadowRadius: 4,
-                elevation: 2,
-                ...floatStyles!,
-                ...popContainerStyle!,
-                opacity: progress,
-              }}
-            >
-              {typeof content === "function" ? (
-                (content as any)()
-              ) : (
-                <Text
-                  style={{
-                    fontWeight: typography.B2LooseFontWeight,
-                    fontSize: typography.B2LooseFontSize,
-                    lineHeight: typography.B2LooseLineHeight,
-                    color: popoverStyle.color,
-                  }}
-                >
-                  {content}
-                </Text>
-              )}
-            </Animated.View>
-            <Image
-              source={{ uri: angle }}
-              // @ts-expect-error
-              style={{
-                width: 14,
-                height: 6,
-                ...arrowStyles,
-                ...propsArrowStyles,
-              }}
-            />
-          </>
-        </ModalWrapper>
-      </Portal>
+      {_visible && layout.x !== defaultValue ? (
+        <Portal hostName={hostName}>
+          <ModalWrapper
+            needModal={needModal}
+            visible={_visible}
+            onClickMask={onClickMask}
+            opacity={opacity}
+            progress={progress}
+            zIndex={zIndex}
+          >
+            <>
+              <Animated.View
+                collapsable={false}
+                onLayout={(e) => {
+                  setFloatingLayout(e.nativeEvent.layout);
+                }}
+                // @ts-expect-error
+                style={{
+                  backgroundColor: popoverStyle.backgroundColor,
+                  paddingHorizontal: 12,
+                  paddingVertical: 7,
+                  maxWidth: maxWidth || 280,
+                  minHeight: 30,
+                  borderRadius: 8,
+                  zIndex,
+                  shadowColor: "#000000",
+                  shadowOffset: { width: 0, height: 1 },
+                  shadowOpacity: 0.1,
+                  shadowRadius: 4,
+                  elevation: 2,
+                  ...floatStyles!,
+                  ...popContainerStyle!,
+                  opacity: progress,
+                }}
+              >
+                {typeof content === "function" ? (
+                  (content as any)()
+                ) : (
+                  <Text
+                    style={{
+                      fontWeight: typography.B2LooseFontWeight,
+                      fontSize: typography.B2LooseFontSize,
+                      lineHeight: typography.B2LooseLineHeight,
+                      color: popoverStyle.color,
+                    }}
+                  >
+                    {content}
+                  </Text>
+                )}
+              </Animated.View>
+              <Image
+                source={{ uri: angle }}
+                // @ts-expect-error
+                style={{
+                  width: 14,
+                  height: 6,
+                  zIndex: zIndex + 9,
+                  ...arrowStyles,
+                  ...propsArrowStyles,
+                }}
+              />
+            </>
+          </ModalWrapper>
+        </Portal>
+      ) : (
+        <></>
+      )}
     </>
   );
 };