@xhsreds/reds-rn-next 0.10.1-beta202511211532 → 0.10.1-beta202512021041

package/lib/types/components/List/ListItem/ListItem.d.ts

@@ -15,6 +15,8 @@ export interface RedsListItem {
     contentStyle?: ViewStyle;
     badgeActionContent?: string;
     badgeTitleContent?: string;
+    style?: any;
+    lineStyle?: any;
 }
 declare const ListItem: React.FC<RedsListItem>;
 export default ListItem;

package/lib/types/components/Stepper/interface/index.d.ts

@@ -5,6 +5,7 @@ export interface RedsStepper {
     disable?: boolean;
     onChange?: (value: number) => any;
     isControl?: boolean;
+    style?: any;
 }
 export interface RedsStepperEvent {
 }

package/lib/types/components/Stepper/styles.d.ts

@@ -3,7 +3,8 @@ export declare const getStyles: (themeColor: any, typography: any) => {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        justifyContent: "center";
+        justifyContent: "space-between";
+        width: number;
     };
     opacity: {
         opacity: number;
@@ -19,7 +20,6 @@ export declare const getStyles: (themeColor: any, typography: any) => {
         lineHeight: number;
     };
     text: {
-        paddingHorizontal: number;
         fontWeight: any;
         fontSize: any;
         color: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.10.1-beta202511211532",
+  "version": "0.10.1-beta202512021041",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
@@ -26,7 +26,7 @@
     "react-native-fs": "2.20.0",
     "react-native-svg": "13.14.0",
     "@xhs/react-native-harmony": "*",
-    "@xhsreds/reds-token-next": "0.10.1-beta202511211532"
+    "@xhsreds/reds-token-next": "0.10.1-beta202512021041"
   },
   "peerDependenciesMeta": {
     "ozone-schema-web": {

package/src/components/ActionablePopover/ActionablePopover.tsx

@@ -1,5 +1,14 @@
 import React, { useState, useMemo, isValidElement, useEffect, useRef } from "react";
-import { Text, View, TouchableWithoutFeedback, GestureResponderEvent, Animated, Image, Dimensions } from "react-native";
+import {
+  Text,
+  View,
+  TouchableWithoutFeedback,
+  GestureResponderEvent,
+  Animated,
+  Image,
+  Dimensions,
+  Platform,
+} from "react-native";
 import { RedsActionablePopover, ActionablePopoverData } from "./interface/index";
 import { ModalWrapper } from "./component";
 import useMounted from "../../pvCount/useUnmountedProcess";

package/src/components/BottomBar/styles.ts

@@ -5,7 +5,7 @@ export const getStyles = (themeColor: any) => {
     bottomBar: {
       width: "100%",
       padding: 8,
-      backgroundColor: "inherit",
+      backgroundColor: themeColor.Bg,
     },
     fixed: {
       position: "absolute",

package/src/components/Divider/Divider.tsx

@@ -1,28 +1,48 @@
-import React from "react";
+import React, { useState, useMemo } 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 as RedsDivider["direction"],
-    orientation: props.orientation as RedsDivider["orientation"],
+    direction: (props.direction || DividerDefaultProps.direction) as RedsDivider["direction"],
+    orientation: (props.orientation || DividerDefaultProps.orientation) as RedsDivider["orientation"],
   };
 
-  const styles = getStyles(finalProps);
-  const isPrimary = finalProps.direction === "primary" || finalProps.direction === "secondary";
+  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);
+  };
 
   return (
-    <View style={[styles.divider, styles[finalProps.direction!]]}>
+    <View style={[styles.divider, styles[finalProps.direction!]]} onLayout={handlerContainerWidth}>
       {finalProps.orientation && finalProps.direction !== "vertical" && (
         <View style={styles.textContainer}>
-          {isPrimary && <View style={styles.before} />}
-          {props.children && <Text style={styles.text}>{props.children}</Text>}
-          {isPrimary && <View style={styles.after} />}
+          <View style={styles.before} />
+          {props.children ? (
+            <Text style={styles.text} onLayout={handleLayout}>
+              {props.children}
+            </Text>
+          ) : (
+            <Text style={styles.noTextBorderStyle}></Text>
+          )}
+          <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 } from "react-native";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
 import { Divider } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
@@ -21,23 +21,29 @@ const Br = (props: { height?: number }) => <View style={{ height: props.height |
 
 export default function App() {
   return (
-    <View>
+    <ScrollView>
+      <Br />
+      <Br />
       <Desc>默认用法</Desc>
       <Divider>测试</Divider>
       <Br />
-      <Desc>direction 类型用法</Desc>
+      <Desc>direction="primary"</Desc>
       <Divider direction="primary" orientation={"center"}>
         测试
       </Divider>
       <Br />
-      <Divider direction="secondary">测试 </Divider>
+      <Desc>direction="secondary"</Desc>
+      <Divider direction="secondary" orientation={"center"}>
+        测试
+      </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 />
 
@@ -67,6 +73,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" />
-    </View>
+    </ScrollView>
   );
 }

package/src/components/Divider/styles.ts

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

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

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

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

@@ -51,6 +51,8 @@ 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,31 +15,71 @@ const Wheel = (props: RedsWheel) => {
    */
   const scrollerRef = useRef();
 
-  /**
-   * themeColor
-   */
-  const themeColor = useThemeColor();
+  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);
-      handleScroll(idx);
+      setIndex(idx);
     }
   }, [column, value]);
 
-  const handleScroll = (idx: number) => {
-    const newVal = column?.[idx]?.value;
-    scrollTo(idx * itemHeight);
+  /**
+   * themeColor
+   */
+  const themeColor = useThemeColor();
+
+  /**
+   * index
+   */
+  const [index, setIndex] = useState<any>();
+
+  const timer = useRef<any>();
+
+  /**
+   * 初始化滚动高度
+   */
+  useEffect(() => {
+    value && setIndex(getSelectIndex(column, value));
+  }, [column, value]);
+
+  useEffect(() => {
+    const newVal = column?.[index]?.value;
+    scrollTo(index * itemHeight);
     if (newVal) {
-      setLastValue(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
@@ -84,13 +124,17 @@ const Wheel = (props: RedsWheel) => {
     e.persist?.();
     let contentOffset = e.nativeEvent.contentOffset;
     const selectIndex = Math.round(contentOffset.y / itemHeight);
+    setIndex(selectIndex);
     const newVal = column?.[selectIndex]?.value;
     setLastValue(newVal);
-    onSelect(newVal, props.index);
+  };
+
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setScrollHeight(e.nativeEvent.contentOffset.y);
   };
 
   const handleClick = (index: number) => {
-    handleScroll(index);
+    setIndex(index);
   };
 
   /**
@@ -127,6 +171,9 @@ const Wheel = (props: RedsWheel) => {
       decelerationRate="fast"
       snapToInterval={itemHeight}
       onMomentumScrollEnd={onMomentumScrollEnd}
+      onScrollEndDrag={onScrollEndDrag}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
       testID={`wheel${props.index}`}
       {...accessibility}
     >

package/src/components/Stepper/Stepper.tsx

@@ -84,7 +84,7 @@ const Stepper = (props: RedsStepper) => {
   }, [colorMode]);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, props.style]}>
       <TouchableWithoutFeedback onPress={() => handleNumber("min")}>
         <View style={[styles.icon, minus]}>
           <Image source={{ uri: minusImage }} style={[styles.minus]} />

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

@@ -21,7 +21,7 @@ export default function App() {
   return (
     <View style={styles.container}>
       <Text>基础用法</Text>
-      <Stepper value={value} onChange={handleChange} />
+      <Stepper value={value} onChange={handleChange} style={{ width: 200 }} />
 
       <Text>基础用法(非受控)</Text>
       <Stepper isControl={false} />

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

@@ -17,6 +17,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | min       | 最小值     | number  |        |
 | disable   | disable    | boolean | false  |
 | isControl | 是否受控   | boolean | true   |
+| style     | style      | any     |        |
 
 ### Events
 

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

@@ -7,6 +7,7 @@ export interface RedsStepper {
   disable?: boolean;
   onChange?: (value: number) => any;
   isControl?: boolean;
+  style?: any;
 }
 
 export interface RedsStepperEvent {}

package/src/components/Stepper/styles.ts

@@ -5,7 +5,8 @@ export const getStyles = (themeColor: any, typography: any) => {
       display: "flex",
       flexDirection: "row",
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: "space-between",
+      width: 72,
     },
     opacity: {
       opacity: 0.5,
@@ -21,7 +22,6 @@ export const getStyles = (themeColor: any, typography: any) => {
       lineHeight: 20,
     },
     text: {
-      paddingHorizontal: 8,
       fontWeight: typography.B1LooseFontWeight,
       fontSize: typography.T3FontSize,
       color: themeColor.Title,

package/src/i18n/@types/resources.d.ts

@@ -1,31 +1,31 @@
 interface Resources {
   componentKey: {
-    sureKey: "确定";
-    satisfyKey: "满意";
-    confirmKey: "确认";
-    uploadingKey: "上传中";
+    sureKey: "確定";
+    satisfyKey: "滿意";
+    confirmKey: "確認";
+    uploadingKey: "上傳中";
     resetKey: "重置";
-    NoDataKey: "暂无数据";
+    NoDataKey: "暫無數據";
     liveStreamingKey: "直播";
     generallyKey: "一般";
-    uploadFailedKey: "上传失败";
+    uploadFailedKey: "上傳失敗";
     submitKey: "提交";
-    requestSuccessfulKey: "请求成功";
+    requestSuccessfulKey: "請求成功";
     cancelKey: "取消";
-    PullDownToRefreshKey: "下拉刷新";
-    selectAllKey: "全选";
-    requestDataKey: "请求数据中";
+    PullDownToRefreshKey: "下拉重繪";
+    selectAllKey: "全選";
+    requestDataKey: "請求數據中";
     closeKey: "收起";
-    veryBadKey: "极差";
-    searchKey: "搜索";
-    expandKey: "展开";
-    IDCardPhotoKey: "身份证人像面";
+    veryBadKey: "極差";
+    searchKey: "蒐索";
+    expandKey: "展開";
+    IDCardPhotoKey: "身份證人像面";
     finishKey: "完成";
-    surpriseKey: "惊喜";
-    releaseRefreshKey: "松开刷新";
+    surpriseKey: "驚喜";
+    releaseRefreshKey: "鬆開重繪";
     nationalEmblemSideOfIDCardKey: "身份证国徽面";
-    buttonKey: "按钮";
-    jumpKey: "跳转";
+    buttonKey: "按鈕";
+    jumpKey: "跳轉";
     disappointmentKey: "失望";
   };
 }

package/src/i18n/index.json

@@ -1,35 +1,4 @@
 {
-  "zh_cn": {
-    "componentKey": {
-      "sureKey": "确定",
-      "satisfyKey": "满意",
-      "confirmKey": "确认",
-      "uploadingKey": "上传中",
-      "resetKey": "重置",
-      "NoDataKey": "暂无数据",
-      "liveStreamingKey": "直播",
-      "generallyKey": "一般",
-      "uploadFailedKey": "上传失败",
-      "submitKey": "提交",
-      "requestSuccessfulKey": "请求成功",
-      "cancelKey": "取消",
-      "PullDownToRefreshKey": "下拉刷新",
-      "selectAllKey": "全选",
-      "requestDataKey": "请求数据中",
-      "closeKey": "收起",
-      "veryBadKey": "极差",
-      "searchKey": "搜索",
-      "expandKey": "展开",
-      "IDCardPhotoKey": "身份证人像面",
-      "finishKey": "完成",
-      "surpriseKey": "惊喜",
-      "releaseRefreshKey": "松开刷新",
-      "nationalEmblemSideOfIDCardKey": "身份证国徽面",
-      "buttonKey": "按钮",
-      "jumpKey": "跳转",
-      "disappointmentKey": "失望"
-    }
-  },
   "zh_tw": {
     "componentKey": {
       "sureKey": "確定",
@@ -91,5 +60,36 @@
       "jumpKey": "Jump",
       "disappointmentKey": "Disappointment"
     }
+  },
+  "zh_cn": {
+    "componentKey": {
+      "sureKey": "确定",
+      "satisfyKey": "满意",
+      "confirmKey": "确认",
+      "uploadingKey": "上传中",
+      "resetKey": "重置",
+      "NoDataKey": "暂无数据",
+      "liveStreamingKey": "直播",
+      "generallyKey": "一般",
+      "uploadFailedKey": "上传失败",
+      "submitKey": "提交",
+      "requestSuccessfulKey": "请求成功",
+      "cancelKey": "取消",
+      "PullDownToRefreshKey": "下拉刷新",
+      "selectAllKey": "全选",
+      "requestDataKey": "请求数据中",
+      "closeKey": "收起",
+      "veryBadKey": "极差",
+      "searchKey": "搜索",
+      "expandKey": "展开",
+      "IDCardPhotoKey": "身份证人像面",
+      "finishKey": "完成",
+      "surpriseKey": "惊喜",
+      "releaseRefreshKey": "松开刷新",
+      "nationalEmblemSideOfIDCardKey": "身份证国徽面",
+      "buttonKey": "按钮",
+      "jumpKey": "跳转",
+      "disappointmentKey": "失望"
+    }
   }
 }