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

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

@@ -68,12 +68,12 @@ export default function App() {
           console.log("View", e.nativeEvent.layout);
         }}
       >
-        <Popover content={content} placement="top-end" opacity={0.4}>
+        <Popover content={content} placement="top-end" opacity={0.4} block>
           <Button>{"点击触发，无遮罩，再次点击关闭"}</Button>
         </Popover>
       </View>
       <Br />
-      <Popover mode={"dark"} content={content} placement={"top"} opacity={0.4}>
+      <Popover mode={"dark"} content={content} placement={"top"} opacity={0.4} duration={0}>
         <Button>{"暗黑模式"}</Button>
       </Popover>
 
@@ -121,6 +121,12 @@ export default function App() {
         <Button>{"有遮罩"}</Button>
       </Popover>
 
+      <View style={styles.center}>
+        <Popover opacity={0.3} content={content} placement={placement} maxWidth={200}>
+          <Button>{"不同位置"}</Button>
+        </Popover>
+      </View>
+
       <Br />
 
       <Popover trigger={"touch"} content={content}>

package/src/components/Progress/styles.ts

@@ -27,7 +27,7 @@ export const createStyles = () => {
       height: "100%",
     },
     text: {
-      marginLeft: 8,
+      marginLeft: 16,
       fontSize: typography.B1FontSize,
       lineHeight: typography.B1LineHeight,
       color: themeColor.Title,

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -3,6 +3,7 @@ import { View, Easing, Animated, Text, Platform } from "react-native";
 import { RedsProgressIndicator, ProgressIndicatorDefaultProps } from "./interface/index";
 import { getLottieSource } from "./lottie/getLottieSource";
 import { useColorMode, useThemeColor } from "../ConfigProvider/index";
+import createStyles from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import Lottie from "@xhs/lottie-react-native";
 
@@ -28,6 +29,8 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
     ...ProgressIndicatorDefaultProps,
     ...props,
   };
+
+  const styles = createStyles();
   const colorMode = useColorMode();
   const themeColor = useThemeColor();
 
@@ -85,7 +88,7 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
       }
       return (
         <>
-          {showPercent && <Text style={[{ color: themeColor.Title }, textStyle]}>{formatText(percent)}</Text>}
+          {showPercent && <Text style={[styles.percentText, textStyle]}>{formatText(percent)}</Text>}
           {Platform.OS !== "web" && (
             <Lottie style={{ flex: 1 }} progress={progress} source={props.lottieSource || lottieSource} />
           )}

package/src/components/ProgressIndicator/demo/progress.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { View } from "react-native";
+import { View, Text } from "react-native";
 import { ProgressIndicator, Button, useThemeColor } from "@xhs/reds-rn-next";
 const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
 
@@ -8,13 +8,11 @@ export default function App() {
   const [percent, setPercent] = useState(0);
   return (
     <View style={{ flexDirection: "row", width: "100%", justifyContent: "space-around", marginTop: 20 }}>
-      <ProgressIndicator type="progress" percent={20} />
-      <ProgressIndicator type="progress" size={66} percent={30} />
-      <ProgressIndicator type="progress" strokeColor="primary" size={66} percent={30} />
-      <ProgressIndicator type="progress" showPercent={false} size={88} percent={60} strokeWidth={15} />
+      <ProgressIndicator type="progress" size={44} percent={20} />
+      <ProgressIndicator type="progress" size={44} percent={30} showPercent={false} />
       <View style={{ justifyContent: "space-around" }}>
         <View style={{ justifyContent: "center", width: "100%", alignItems: "center" }}>
-          <ProgressIndicator type={"progress"} percent={percent} />
+          <ProgressIndicator type={"progress"} percent={percent} size={44} />
         </View>
         <View style={{ marginTop: 10 }}>
           <Button onClick={() => setPercent((percent) => percent + 10)}>点击增加进度条</Button>

package/src/components/ProgressIndicator/lottie/progress_loading_primary.json

@@ -2,17 +2,17 @@
   "v": "4.8.0",
   "meta": {
     "g": "LottieFiles AE 3.6.0",
-    "a": "",
+    "a": "wenbo",
     "k": "",
     "d": "",
-    "tc": ""
+    "tc": "#FFFFFF"
   },
   "fr": 60,
   "ip": 0,
   "op": 101,
   "w": 48,
   "h": 48,
-  "nm": "Progress Loading 进度加载-dark 2",
+  "nm": "Progress Loading 进度加载-light",
   "ddd": 0,
   "assets": [],
   "layers": [
@@ -83,7 +83,7 @@
                 },
                 "ix": 2
               },
-              "nm": "路径 1",
+              "nm": "路径 1",
               "mn": "ADBE Vector Shape - Group",
               "hd": false
             },
@@ -124,7 +124,7 @@
                 "k": 0,
                 "ix": 5
               },
-              "nm": "变换"
+              "nm": "变换"
             }
           ],
           "nm": "Ellipse",
@@ -171,7 +171,7 @@
           },
           "m": 1,
           "ix": 2,
-          "nm": "修剪路径 1",
+          "nm": "修剪路径 1",
           "mn": "ADBE Vector Filter - Trim",
           "hd": false
         },
@@ -179,12 +179,12 @@
           "ty": "st",
           "c": {
             "a": 0,
-            "k": [1, 1, 1, 1],
+            "k": [0.188235297799, 0.188235297799, 0.203921571374, 1],
             "ix": 3
           },
           "o": {
             "a": 0,
-            "k": 99,
+            "k": 50,
             "ix": 4
           },
           "w": {
@@ -196,7 +196,7 @@
           "lj": 1,
           "ml": 4,
           "bm": 0,
-          "nm": "描边 1",
+          "nm": "描边 1",
           "mn": "ADBE Vector Graphic - Stroke",
           "hd": false
         }
@@ -273,7 +273,7 @@
                 },
                 "ix": 2
               },
-              "nm": "路径 1",
+              "nm": "路径 1",
               "mn": "ADBE Vector Shape - Group",
               "hd": false
             },
@@ -314,7 +314,7 @@
                 "k": 0,
                 "ix": 5
               },
-              "nm": "变换"
+              "nm": "变换"
             }
           ],
           "nm": "Ellipse",
@@ -329,12 +329,12 @@
           "ty": "st",
           "c": {
             "a": 0,
-            "k": [1, 1, 1, 1],
+            "k": [0.188235297799, 0.188235297799, 0.203921571374, 1],
             "ix": 3
           },
           "o": {
             "a": 0,
-            "k": 32,
+            "k": 10,
             "ix": 4
           },
           "w": {
@@ -346,7 +346,7 @@
           "lj": 1,
           "ml": 4,
           "bm": 0,
-          "nm": "描边 1",
+          "nm": "描边 1",
           "mn": "ADBE Vector Graphic - Stroke",
           "hd": false
         }

package/src/components/ProgressIndicator/styles.ts

@@ -1,9 +1,10 @@
 import { alwaysColor, number } from "@xhs/reds-token-next";
 import { StyleSheet } from "react-native";
-import { useThemeColor } from "../ConfigProvider";
+import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 
 const createStyles = () => {
   const themeColor = useThemeColor("ProgressIndicator");
+  const themeTypography = useThemeTypography("ProgressIndicator");
 
   const styles = StyleSheet.create({
     circleInactive: {
@@ -25,9 +26,9 @@ const createStyles = () => {
       ],
     },
     percentText: {
-      color: themeColor.Fill4,
-      fontSize: number.C2NumberFontSize,
-      lineHeight: number.C2NumberLineHeight,
+      color: themeColor.Title,
+      fontSize: themeTypography.C2FontSize,
+      textAlign: "center",
     },
   });
 

package/src/components/PullRefresh/PullRefresh.tsx

@@ -50,6 +50,33 @@ export default function PullRefresh(props: RedsPullRefresh) {
   // 下拉组件的初始top值
   const [top, setTop] = useState<number>(-1000);
 
+  // 标记是否已经执行过初始刷新
+  const [hasInitRefreshed, setHasInitRefreshed] = useState<boolean>(false);
+
+  // 执行初始刷新的方法
+  const performInitRefresh = () => {
+    if ((pullAnimHeight > 0 && !hasInitRefreshed && props.initRefresh) || props.refresh) {
+      // 设置初始状态为拉取状态
+      updatePullState(PullState.LOADING);
+
+      // 执行下拉动画
+      animatedTo(pullAnimHeight, () => {
+        setHasInitRefreshed(true);
+        setIsRefreshing(true);
+        setIsPulling(true);
+        // 触发刷新回调
+        props.onRequest && props.onRequest();
+      });
+    }
+  };
+
+  // 监听 initRefresh 属性和相关依赖变化
+  useEffect(() => {
+    if ((props.initRefresh && pullAnimHeight > 0 && !hasInitRefreshed && !isRefreshing) || props.refresh) {
+      performInitRefresh();
+    }
+  }, [props.initRefresh, pullAnimHeight, hasInitRefreshed, isRefreshing, props.refresh]);
+
   // 释放手指
   const onRelease = () => {
     // 重置偏移位置
@@ -99,10 +126,15 @@ export default function PullRefresh(props: RedsPullRefresh) {
         useNativeDriver: false,
       });
     } else {
+      // 针对初始加载优化动画参数
+      const duration =
+        !hasInitRefreshed && props.initRefresh
+          ? 1000 // 初始加载时使用固定时长
+          : Math.abs(((pan as any)._value - toValue) * 1.4);
       animation = Animated.timing(pan, {
         toValue: toValue,
         easing: Easing.bezier(0.1, 0.57, 0.1, 1),
-        duration: ((pan as any)._value - toValue) * 1.4,
+        duration: duration,
         useNativeDriver: false,
       });
     }
@@ -130,8 +162,12 @@ export default function PullRefresh(props: RedsPullRefresh) {
     }
   };
 
-  // 是否能移动手指
+  // 是否能移动手指 - 初始加载时禁用手势
   const canMove = (evt: any, gestureState: any) => {
+    // 如果正在初始刷新，禁用手势
+    if (props.initRefresh && !hasInitRefreshed) {
+      return false;
+    }
     return isPulling ? false : scrollY <= 0 && gestureState.vy > 0 && gestureState.vy > Math.abs(gestureState.vx);
   };
 
@@ -173,11 +209,11 @@ export default function PullRefresh(props: RedsPullRefresh) {
         return true;
       },
     });
-  }, [isPulling, scrollY]);
+  }, [isPulling, scrollY, props.initRefresh, hasInitRefreshed, pullAnimHeight]);
 
   // 根据外层传递参数变化进行更新执行
   useEffect(() => {
-    if (pullState === PullState.PULLING) {
+    if (pullState === PullState.PULLING && !props.initRefresh) {
       return;
     }
     // 加载中
@@ -204,13 +240,14 @@ export default function PullRefresh(props: RedsPullRefresh) {
 
       setIsRefreshing(false);
     }
-  }, [isRefreshing, props.msHoldingTime, props.isRefreshing]);
+  }, [isRefreshing, props.msHoldingTime, props.isRefreshing, pullState]);
 
   // RefreshControl组件初始化计算
   const onLayout = (evt: LayoutChangeEvent) => {
-    setPullAnimHeight(props.pullAnimHeight || evt.nativeEvent.layout.height);
-    setMinPullDistance(props.minPullDistance || pullAnimHeight);
-    setTop(-pullAnimHeight);
+    const height = props.pullAnimHeight || evt.nativeEvent.layout.height;
+    setPullAnimHeight(height);
+    setMinPullDistance(props.minPullDistance || height);
+    setTop(-height);
   };
 
   // 重写ScrollView的onScroll事件
@@ -219,6 +256,8 @@ export default function PullRefresh(props: RedsPullRefresh) {
       React.cloneElement(child, {
         // 设置滚动响应频率
         scrollEventThrottle: 1,
+        // 初始加载时禁用滚动
+        scrollEnabled: !(props.initRefresh && !hasInitRefreshed && isRefreshing),
         onScroll: (evt: any) => {
           setScrollY(evt.nativeEvent.contentOffset.y);
           // iOS下拉刷新Loading时，ScrollView向上滑动的时候，refreshControl部分同样上滑
@@ -243,7 +282,7 @@ export default function PullRefresh(props: RedsPullRefresh) {
         },
       }),
     );
-  }, [pullState, props.children]);
+  }, [pullState, props.children, props.initRefresh, hasInitRefreshed, isRefreshing, pullAnimHeight]);
 
   // 增加Animated.View控制ScrollView展示位置
   const content = useMemo(() => {

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

@@ -1,23 +1,40 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { ScrollView, View, Text, StyleSheet } from "react-native";
-import { PullRefresh } from "@xhs/reds-rn-next";
+import { PullRefresh, Button } from "@xhs/reds-rn-next";
 
 export default function PullRefreshDemo() {
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [refresh, setRefresh] = useState(false);
   return (
     <>
       <View style={styles.gap}></View>
+      <Button
+        onClick={() => {
+          setRefresh(true);
+        }}
+      >
+        点击刷新
+      </Button>
       <PullRefresh
         // type={"blue"}
         onRequest={() => {
           setIsRefreshing(true);
-          setTimeout(setIsRefreshing, 1000, false);
+          setTimeout(
+            () => {
+              setIsRefreshing(false);
+              setRefresh(false);
+            },
+            1000,
+            false,
+          );
         }}
         pullAnimHeight={56}
         minPullDistance={56}
         isRefreshing={isRefreshing}
         showText={false}
         msHoldingTime={0}
+        refresh={refresh}
+        initRefresh={true}
         style={{ backgroundColor: "yellow" }}
       >
         <View style={styles.container}>

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

@@ -24,6 +24,8 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | style                 | 容器样式               | ViewStyle       |           |
 | controlStyle          | refreshControl样式     | ViewStyle       |           |
 | showText              | 是否展示文字           | boolean         | true      |
+| initRefresh           | 是否初始刷新           | boolean         | false     |
+| refresh               | 手动点击按钮控制刷新   | boolean         | false     |
 
 ### Events
 

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

@@ -13,6 +13,8 @@ export interface RedsPullRefresh {
   controlStyle?: ViewStyle;
   onRequest?: () => void;
   showText?: boolean;
+  initRefresh?: boolean;
+  refresh?: boolean;
 }
 
 export enum PullState {
@@ -31,4 +33,6 @@ export const PullRefreshDefaultProps = {
   msHoldingTime: 1000,
   isRefreshing: false,
   showText: true,
+  initRefresh: false,
+  refresh: false,
 };

package/src/components/Radio/styles.ts

@@ -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,
   };
 };
 

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

@@ -44,7 +44,10 @@ export default function App() {
       ></Result>
       <Br />
       <Desc>操作按钮</Desc>
-      <Result action={<ActionButton />}></Result>
+      <Result
+        action={<ActionButton />}
+        description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"
+      ></Result>
       <Result type={"Info"} action={<ActionButton />}></Result>
       <Result type={"Warning"} action={<ActionButton />}></Result>
       <Br />

package/src/components/Search/Search.tsx

@@ -252,7 +252,7 @@ const RedsSearchComponent = forwardRef((props: RedsSearch, ref) => {
         {clearable && value.length > 0 && (
           <TouchableOpacity onPress={handleClear} onPressIn={(e) => e.preventDefault()} activeOpacity={1}>
             <Image
-              style={styles.icon}
+              style={styles.clearable}
               source={{
                 uri: "https://picasso-static.xiaohongshu.com/fe-platform/3d62a0bc90b6aca0993870867b3e33492eb339c1.png",
               }}
@@ -303,6 +303,7 @@ const RedsSearchComponent = forwardRef((props: RedsSearch, ref) => {
       ) : (
         <></>
       )}
+      {props.suffix}
     </View>
   );
 });

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

@@ -1,11 +1,11 @@
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { useThemeColor, Search, Button } from "@xhs/reds-rn-next"; // 假设这是一个自定义的 hook
+import { useThemeColor, Search, Button, Icon } from "@xhs/reds-rn-next"; // 假设这是一个自定义的 hook
 import { useState, useRef } from "react";
+import { MoreB } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const ExampleComponent = () => {
   const themeColor = useThemeColor();
-
   return (
     <View style={{ ...styles.container, backgroundColor: themeColor.Fill1 }}>
       <Text>基础用法</Text>
@@ -22,6 +22,10 @@ const ExampleComponent = () => {
         <Text>固定展示搜索按钮</Text>
         <SearchForce />
       </View>
+      <View style={{ ...styles.sectionContainer, backgroundColor: themeColor.Bg }}>
+        <Text>附加Icon</Text>
+        <SearchIcon />
+      </View>
     </View>
   );
 };
@@ -66,6 +70,52 @@ export const Basic = () => {
   );
 };
 
+export const SearchIcon = () => {
+  const themeColor = useThemeColor();
+  const [searchText, setSearchText] = useState("");
+  const ref = useRef(null);
+  const cancelClick = () => {
+    console.log("取消搜索");
+  };
+  const cameraIconClick = () => {
+    console.log("camera");
+  };
+  const searchIconClick = () => {
+    console.log("search");
+  };
+
+  return (
+    <>
+      <Search
+        modelValue={searchText}
+        placeholder="搜索"
+        onCancelClick={cancelClick}
+        onCameraIconClick={cameraIconClick}
+        onSearchIconClick={searchIconClick}
+        onSearchClick={searchIconClick}
+        onChange={(e: any) => {
+          console.log("onchange", e);
+        }}
+        ref={ref}
+        suffix={
+          <View style={{ marginLeft: 10 }}>
+            <Icon icon={MoreB} size={16} fill={themeColor.Fill5} />
+          </View>
+        }
+      />
+      <Button
+        onClick={() => {
+          setSearchText("替换modelValue");
+          // @ts-ignore
+          ref.current?.blur?.();
+        }}
+      >
+        替换modelValue
+      </Button>
+    </>
+  );
+};
+
 export const SearchButton = () => {
   const [searchText, setSearchText] = useState("xxxxx");
   const leftBackIconClick = () => {

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

@@ -33,6 +33,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | buttonText       | 自定义操作文案                                                             | string                     |          |
 | transparent      | 透明背景                                                                   | boolean                    | false    |
 | force            | 是否一定展示搜索                                                           | boolean                    | false    |
+| suffix           | suffix                                                                     | any                        |          |
 
 ### Events
 

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

@@ -42,6 +42,7 @@ export interface RedsSearch {
   onSearchClick?: (value: string) => any;
   onAdditionalIconsClick?: () => any;
   onButtonTextClick?: (value: string) => any;
+  suffix?: any;
 }
 
 export const SearchDefaultProps = {

package/src/components/Search/styles.ts

@@ -35,7 +35,7 @@ const createStyles = () => {
       height: 32,
     },
     searchButtonRightText: {
-      color: themeColor.Description,
+      color: themeColor.Title,
       fontSize: typography.B1FontSize,
       lineHeight: typography.B1LineHeight,
       fontWeight: typography.B1FontWeight,
@@ -89,6 +89,11 @@ const createStyles = () => {
       width: 20,
       height: 20,
     },
+    clearable: {
+      width: 20,
+      height: 20,
+      marginRight: 5,
+    },
   });
 
   return styles;

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -3,8 +3,9 @@ import { View, Text, TouchableWithoutFeedback } from "react-native";
 import { RedsSegmentedControl, SegmentedControlDefaultProps } from "./interface/index";
 import createStyles from "./styles";
 import { useThemeColor, useThemeTypography } from "../ConfigProvider";
-
+import useMounted from "../../pvCount/useUnmountedProcess";
 const SegmentedControl = ({ value, options, onChange }: RedsSegmentedControl) => {
+  useMounted("SegmentedControl");
   const themeColor = useThemeColor();
 
   const themeTypography = useThemeTypography();