@xhsreds/reds-rn-next 0.10.1-beta202512022142 → 0.10.1-feat-sheets-anim202512041203

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

@@ -37,7 +37,6 @@ export default function App() {
   const [value14, setValue14] = useState("2023-10-05-12");
   const [value16, setValue16] = useState("2023-10-05-12-10");
   const [value17, setValue17] = useState("2025-9-15-14-25");
-  const [value18, setValue18] = useState("2025-11-20");
 
   const [visible1, setVisible1] = useState(false);
   const [visible2, setVisible2] = useState(false);
@@ -55,7 +54,6 @@ export default function App() {
   const [visible14, setVisible14] = useState(false);
   const [visible16, setVisible16] = useState(false);
   const [visible17, setVisible17] = useState(false);
-  const [visible18, setVisible18] = useState(false);
 
   const { show, remove } = useDatePicker();
   return (
@@ -331,30 +329,6 @@ export default function App() {
       >
         函数式调用
       </Button>
-
-      <Button
-        onClick={() => {
-          setVisible18(true);
-        }}
-      >
-        跳动bug
-      </Button>
-      <DatePicker
-        visible={visible18}
-        value={value18}
-        label={"跳动bug"}
-        startTime={"1900-01-01"}
-        endTime={"2200-12-31"}
-        onConfirm={(val: string) => {
-          console.log("onConfirm18", val);
-          setValue18(val);
-          setVisible18(false);
-        }}
-        onChange={(val: string) => {
-          console.log("onChange18", val);
-        }}
-        onCancel={() => setVisible18(false)}
-      />
       <View style={{ height: 200 }}></View>
     </ScrollView>
   );

package/src/components/Divider/Divider.tsx

@@ -1,48 +1,28 @@
-import React, { useState, useMemo } from "react";
+import React from "react";
 import { View, Text } from "react-native";
 import { RedsDivider, DividerDefaultProps } from "./interface";
 import { getStyles } from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
-import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 
 const Divider = (props: RedsDivider) => {
-  const [textWidth, setTextWidth] = useState(0);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const themeColor = useThemeColor("Divider");
-  const typography = useThemeTypography("Divider");
   useMounted("Divider");
   const finalProps: RedsDivider = {
     ...DividerDefaultProps,
     ...props,
-    direction: (props.direction || DividerDefaultProps.direction) as RedsDivider["direction"],
-    orientation: (props.orientation || DividerDefaultProps.orientation) as RedsDivider["orientation"],
+    direction: props.direction as RedsDivider["direction"],
+    orientation: props.orientation as RedsDivider["orientation"],
   };
 
-  const styles = useMemo(() => {
-    return getStyles(finalProps, textWidth, containerWidth, themeColor, typography);
-  }, [textWidth, containerWidth, themeColor, typography]);
-
-  const handleLayout = (e: any) => {
-    setTextWidth(e.nativeEvent.layout.width);
-  };
-
-  const handlerContainerWidth = (e: any) => {
-    setContainerWidth(e.nativeEvent.layout.width);
-  };
+  const styles = getStyles(finalProps);
+  const isPrimary = finalProps.direction === "primary" || finalProps.direction === "secondary";
 
   return (
-    <View style={[styles.divider, styles[finalProps.direction!]]} onLayout={handlerContainerWidth}>
+    <View style={[styles.divider, styles[finalProps.direction!]]}>
       {finalProps.orientation && finalProps.direction !== "vertical" && (
         <View style={styles.textContainer}>
-          <View style={styles.before} />
-          {props.children ? (
-            <Text style={styles.text} onLayout={handleLayout}>
-              {props.children}
-            </Text>
-          ) : (
-            <Text style={styles.noTextBorderStyle}></Text>
-          )}
-          <View style={styles.after} />
+          {isPrimary && <View style={styles.before} />}
+          {props.children && <Text style={styles.text}>{props.children}</Text>}
+          {isPrimary && <View style={styles.after} />}
         </View>
       )}
     </View>

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { View, Text, StyleSheet } from "react-native";
 import { Divider } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
@@ -21,29 +21,23 @@ const Br = (props: { height?: number }) => <View style={{ height: props.height |
 
 export default function App() {
   return (
-    <ScrollView>
-      <Br />
-      <Br />
+    <View>
       <Desc>默认用法</Desc>
       <Divider>测试</Divider>
       <Br />
-      <Desc>direction="primary"</Desc>
+      <Desc>direction 类型用法</Desc>
       <Divider direction="primary" orientation={"center"}>
         测试
       </Divider>
       <Br />
-      <Desc>direction="secondary"</Desc>
-      <Divider direction="secondary" orientation={"center"}>
-        测试
-      </Divider>
+      <Divider direction="secondary">测试 </Divider>
       <Br />
 
-      <Desc>direction="vertical"</Desc>
       <View style={styles.itemBox}>
         <Divider direction="vertical">测试</Divider>
       </View>
-      <Desc>direction="horizontal"</Desc>
       <Divider direction="horizontal">测试</Divider>
+      <Divider direction="horizontal"></Divider>
       <Br />
       <Br />
 
@@ -73,6 +67,6 @@ export default function App() {
       <Desc>margin 数组：horizontal / [上下，左右] vertical / [左右]</Desc>
       <Divider margin={[10, 20]} stroke={2} direction="horizontal" />
       <Divider margin={[10, 0]} stroke={2} direction="vertical" />
-    </ScrollView>
+    </View>
   );
 }

package/src/components/Divider/styles.ts

@@ -1,30 +1,38 @@
 import { StyleSheet, ViewStyle, TextStyle, DimensionValue } from "react-native";
 import { RedsDivider, DividerDefaultProps } from "./interface";
+import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 
 const baseDivider: ViewStyle = {
   position: "relative",
 };
 
-const getStyles = (p: RedsDivider, textWidth: number, containerWidth: number, themeColor: any, typography: any) => {
+const baseText: TextStyle = {
+  paddingVertical: 0,
+  paddingHorizontal: 16,
+  position: "absolute",
+  backgroundColor: "#fff",
+  lineHeight: 18,
+};
+
+const getStyles = (p: RedsDivider) => {
   const props = { ...DividerDefaultProps, ...p };
+  const themeColor = useThemeColor("Divider");
+  const typography = useThemeTypography("Divider");
   const isHorizontal = props.direction === "horizontal";
-  const hasTextContent = p.children;
-
-  const remainingWidth = containerWidth - textWidth;
-
   const beforeAfterCommon: ViewStyle = {
     borderStyle: "solid",
-    borderTopWidth: props.stroke || 0.5,
+    borderTopWidth: 0.5,
     borderColor: props.color || themeColor.Separator2,
+    width: 8,
   };
 
   const dividerStyle: ViewStyle = {
     ...baseDivider,
-    // borderBottomWidth: isHorizontal && hasTextContent ? 0 : (isHorizontal ? (props.stroke ? props.stroke : StyleSheet.hairlineWidth) : 0),
-    // borderLeftWidth: isHorizontal ? 0 : props.stroke ? props.stroke : StyleSheet.hairlineWidth,
-    // borderBottomColor: isHorizontal && !hasTextContent ? props.color || themeColor.Separator2 : undefined,
-    // borderLeftColor: isHorizontal ? undefined : props.color || themeColor.Separator2,
-    // borderStyle: "solid",
+    borderBottomWidth: isHorizontal ? (props.stroke ? props.stroke : StyleSheet.hairlineWidth) : 0,
+    borderLeftWidth: isHorizontal ? 0 : props.stroke ? props.stroke : StyleSheet.hairlineWidth,
+    borderBottomColor: isHorizontal ? props.color || themeColor.Separator2 : undefined,
+    borderLeftColor: isHorizontal ? undefined : props.color || themeColor.Separator2,
+    borderStyle: "solid",
     marginVertical: (props.margin && props.margin[0] && Number(props.margin[0])) || (isHorizontal ? 20 : 0),
     marginHorizontal: (props.margin && props.margin[1] && Number(props.margin[1])) || (isHorizontal ? 0 : 12),
     marginLeft:
@@ -39,11 +47,17 @@ const getStyles = (p: RedsDivider, textWidth: number, containerWidth: number, th
     width: (isHorizontal ? props.size : "auto") as DimensionValue,
   };
 
-  const textContainer: ViewStyle = {
+  const textContainer: TextStyle = {
+    paddingVertical: 0,
+    paddingHorizontal: 16,
+    position: "absolute",
+    lineHeight: 18,
+    left: props.orientation === "left" ? 24 : undefined,
+    right: props.orientation === "right" ? 24 : undefined,
+    alignSelf: props.orientation === "center" ? "center" : undefined,
     flexDirection: "row",
     alignItems: "center",
-    width: "100%",
-    // 移除 position absolute，改为正常布局
+    top: (isHorizontal && -9) || 0,
   };
 
   const textStyle: TextStyle = {
@@ -64,29 +78,13 @@ const getStyles = (p: RedsDivider, textWidth: number, containerWidth: number, th
 
   const beforeStyle: ViewStyle = {
     ...beforeAfterCommon,
-    marginRight: props.children ? 8 : 0,
-    ...(isHorizontal
-      ? props.orientation === "center"
-        ? { flex: 1 }
-        : { width: props.orientation === "left" ? remainingWidth * 0.15 : remainingWidth * 0.85 }
-      : { width: 8 }),
+    marginRight: 8,
     borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
   };
 
   const afterStyle: ViewStyle = {
     ...beforeAfterCommon,
-    marginLeft: props.children ? 8 : 0,
-    ...(isHorizontal
-      ? props.orientation === "center"
-        ? { flex: 1 }
-        : { width: props.orientation === "right" ? remainingWidth * 0.15 : remainingWidth * 0.85 }
-      : { width: 8 }),
-    borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
-  };
-
-  const noTextBorderStyle: ViewStyle = {
-    ...beforeAfterCommon,
-    width: "auto",
+    marginLeft: 8,
     borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
   };
 
@@ -106,7 +104,6 @@ const getStyles = (p: RedsDivider, textWidth: number, containerWidth: number, th
     text: textStyle,
     before: beforeStyle,
     after: afterStyle,
-    noTextBorderStyle: noTextBorderStyle,
   });
 };
 

package/src/components/Image/Image.tsx

@@ -206,15 +206,9 @@ const Image = ({
   };
 
   const colorMode = useColorMode();
+
   return (
-    <View
-      style={{
-        borderRadius: borderRadius || style?.borderRadius,
-        ...(style as {}),
-        height: ((height || style?.height || 0) as number) + (style?.borderWidth || 0) * 2,
-        width: ((width || style?.width || 0) as number) + (style?.borderWidth || 0) * 2,
-      }}
-    >
+    <View style={{ borderRadius, height, width, ...(style as {}) }}>
       {imageStatus !== IMAGE_STATUS.HIDE && (
         <RNImage
           {...props}
@@ -231,7 +225,7 @@ const Image = ({
           style={{
             width: width || style?.width,
             height: height || style?.height,
-            borderRadius: borderRadius || style?.borderRadius,
+            borderRadius,
             // opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
           }}
           // @ts-ignore
@@ -241,11 +235,12 @@ const Image = ({
       {imageStatus === IMAGE_STATUS.LOADING && loadStyle !== TLoadStyle.NONE && (
         <View
           style={{
-            width: width || style?.width,
-            height: height || style?.height,
-            borderRadius: borderRadius || style?.borderRadius,
+            width,
+            height,
+            borderRadius,
             ...styles.loadingContainer,
             backgroundColor: loadStyle === TLoadStyle.AVE ? aveColor : styles.loadingContainer.backgroundColor,
+            ...style,
           }}
         >
           {loadStyle === TLoadStyle.BLUR && (
@@ -254,7 +249,7 @@ const Image = ({
               style={{
                 width: width || style?.width,
                 height: height || style?.height,
-                borderRadius: borderRadius || style?.borderRadius,
+                borderRadius,
               }}
               // @ts-ignore
               apmBiz={props.apmBiz}
@@ -270,7 +265,7 @@ const Image = ({
             onPress={(e) => {
               onReload(e);
             }}
-            style={{ width, height, ...styles.loadingContainer }}
+            style={{ width, height, borderRadius, ...styles.loadingContainer }}
           >
             <RNImage
               style={{ width: 40, height: 40 }}

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

@@ -16,23 +16,24 @@ export default function App() {
   return (
     <View style={{ display: "flex", flexDirection: "row" }}>
       <ScrollView style={{ backgroundColor: "#50796633" }}>
-        {/* <Desc>基础用法</Desc>
+        <Desc>基础用法</Desc>
 
         <Image width={150} height={150} borderRadius={30} source={{ uri: imageUrl }} abortApmCollection={true}></Image>
         <Br />
 
-        <Desc>Image组件加边框</Desc> */}
+        <Desc>Image组件加边框</Desc>
 
         <Image
           width={150}
           height={150}
+          borderRadius={30}
           source={{ uri: imageUrl }}
           abortApmCollection={true}
           style={{ borderWidth: 1, borderStyle: "solid", borderColor: "red", borderRadius: 50 }}
         ></Image>
         <Br />
 
-        {/* <Desc>加载时显示主要色</Desc>
+        <Desc>加载时显示主要色</Desc>
         <Image loadStyle={TLoadStyle.AVE} width={150} height={150} borderRadius={30} src={imageUrl}></Image>
 
         <Br />
@@ -93,7 +94,7 @@ export default function App() {
           onReload={() => {
             setImageUrl2(imageUrl);
           }}
-        ></Image> */}
+        ></Image>
       </ScrollView>
     </View>
   );

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

@@ -21,8 +21,6 @@ export interface RedsListItem {
   contentStyle?: ViewStyle;
   badgeActionContent?: string;
   badgeTitleContent?: string;
-  style?: any;
-  lineStyle?: any;
 }
 
 const ListItem: React.FC<RedsListItem> = ({
@@ -40,8 +38,6 @@ const ListItem: React.FC<RedsListItem> = ({
   children,
   badgeActionContent,
   badgeTitleContent,
-  style,
-  lineStyle,
 }) => {
   useMounted("ListItem");
   const styles = createStyles();
@@ -70,7 +66,6 @@ const ListItem: React.FC<RedsListItem> = ({
           styles.listItem,
           children ? {} : { height: listItemSizeToHeight[size] },
           size === "expand" && styles.expand,
-          style,
         ]}
       >
         {children ? (
@@ -80,13 +75,7 @@ const ListItem: React.FC<RedsListItem> = ({
             {prefix && (
               <View style={[styles.prefix, { height: listItemSizeToHeight[size] }, prefixStyle]}>{prefix}</View>
             )}
-            <View
-              style={[
-                styles.contentBox,
-                lineItem ? { ...styles.hr, ...lineStyle } : {},
-                { height: listItemSizeToHeight[size] },
-              ]}
-            >
+            <View style={[styles.contentBox, lineItem ? styles.hr : {}, { height: listItemSizeToHeight[size] }]}>
               <View
                 style={[styles.contentContainer, { marginBottom: 12, marginTop: 12 }, prefix ? { height: 48 } : {}]}
               >

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

@@ -51,8 +51,6 @@ export default function ListDemo() {
           onClick={() => {
             console.log("click item");
           }}
-          // style={{ backgroundColor: 'blue'}}
-          lineStyle={{ borderBottomColor: "red" }}
         />
         <ListItem title="标题" actionText="描述" />
       </List>

package/src/components/PickerView/Wheel.tsx

@@ -15,26 +15,6 @@ const Wheel = (props: RedsWheel) => {
    */
   const scrollerRef = useRef();
 
-  const [scrollEnded, setScrollEnded] = useState(false);
-
-  const [scrollHeight, setScrollHeight] = useState(0);
-
-  const [lastValue, setLastValue] = useState(value);
-
-  const onScrollEndDrag = () => {
-    setScrollEnded(true);
-  };
-
-  /**
-   * 初始化滚动高度
-   */
-  useEffect(() => {
-    if (value !== lastValue) {
-      const idx = getSelectIndex(column, value);
-      setIndex(idx);
-    }
-  }, [column, value]);
-
   /**
    * themeColor
    */
@@ -45,8 +25,6 @@ const Wheel = (props: RedsWheel) => {
    */
   const [index, setIndex] = useState<any>();
 
-  const timer = useRef<any>();
-
   /**
    * 初始化滚动高度
    */
@@ -59,28 +37,9 @@ const Wheel = (props: RedsWheel) => {
     scrollTo(index * itemHeight);
     if (newVal) {
       onSelect(newVal, props.index);
-      setLastValue(newVal);
     }
   }, [index, props.index]);
 
-  useEffect(() => {
-    if (scrollEnded) {
-      // @ts-ignore
-      if (scrollHeight != null) {
-        timer.current = setTimeout(() => {
-          const selectIndex = Math.round(scrollHeight / itemHeight);
-          if (selectIndex >= 0 && selectIndex < column.length) {
-            setIndex(selectIndex);
-          }
-        }, 0);
-      }
-      setScrollEnded(false);
-    }
-    return () => {
-      timer.current && clearTimeout(timer.current);
-    };
-  }, [scrollEnded]);
-
   /**
    * 滚动ScrollView
    * @param y 滚动距离
@@ -125,12 +84,6 @@ const Wheel = (props: RedsWheel) => {
     let contentOffset = e.nativeEvent.contentOffset;
     const selectIndex = Math.round(contentOffset.y / itemHeight);
     setIndex(selectIndex);
-    const newVal = column?.[selectIndex]?.value;
-    setLastValue(newVal);
-  };
-
-  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    setScrollHeight(e.nativeEvent.contentOffset.y);
   };
 
   const handleClick = (index: number) => {
@@ -171,9 +124,6 @@ const Wheel = (props: RedsWheel) => {
       decelerationRate="fast"
       snapToInterval={itemHeight}
       onMomentumScrollEnd={onMomentumScrollEnd}
-      onScrollEndDrag={onScrollEndDrag}
-      onScroll={onScroll}
-      scrollEventThrottle={16}
       testID={`wheel${props.index}`}
       {...accessibility}
     >

package/src/components/Portal/core/PortalHost.tsx

@@ -1,5 +1,4 @@
 import React, { memo, useEffect } from "react";
-import { View } from "react-native";
 import { usePortalState } from "./hooks/usePortalState";
 import { usePortal } from "./hooks/usePortal";
 import { PortalHostProps } from "../interface";
@@ -17,9 +16,7 @@ const PortalHostComponent = ({ name }: PortalHostProps) => {
   return (
     <>
       {state.map((item, index) => {
-        return React.cloneElement(item.node as any, {
-          key: index,
-        });
+        return item.node;
       })}
     </>
   );

package/src/components/Radio/Radio.tsx

@@ -64,9 +64,9 @@ const Radio = (props: RedsRadio) => {
   const labelStyle = getLabelStyle(disabled || parent?.disabled, size, parent?.direction);
 
   const iconSizeMap: Record<"small" | "medium" | "large", number> = {
-    small: 12,
-    medium: 16,
-    large: 20,
+    small: 16,
+    medium: 20,
+    large: 24,
   };
 
   const rightStyle = getRightIconStyle(size);

package/src/components/Radio/styles.ts

@@ -2,9 +2,9 @@ import { StyleSheet, ViewStyle, TextStyle, DimensionValue } from "react-native";
 import { useThemeColor } from "../ConfigProvider";
 import { typography } from "@xhs/reds-token-next";
 const iconSizeMap: Record<"small" | "medium" | "large" | string, number> = {
-  small: 12,
-  medium: 16,
-  large: 20,
+  small: typography.B1FontSize,
+  medium: typography.H3FontSize,
+  large: typography.H2FontSize,
 };
 const fontSizeMap: Record<"small" | "medium" | "large", number> = {
   small: 12,
@@ -43,6 +43,7 @@ export const getContainerStyle = (direction?: string | undefined, position?: "le
     alignItems: "center",
     justifyContent: "flex-start",
     backgroundColor: direction === "vertical" ? themeColor.Bg : undefined,
+    paddingHorizontal: 16,
   };
 };
 
@@ -98,6 +99,7 @@ export const getLabelStyle = (
 
   return {
     color: disabled ? themeColor.Disabled : themeColor.Title,
+    lineHeight: iconSizeMap[size],
     fontSize: fontSizeMap[size],
     marginRight: direction === "horizontal" ? 8 : 0,
   };