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

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",
@@ -24,6 +24,7 @@ export default ({
   arrowStyles: propsArrowStyles,
   offset,
   duration,
+  animation_duration,
   hostName,
   maxWidth,
   arrowOffset,
@@ -37,18 +38,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 +119,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: animation_duration ?? 400,
+          useNativeDriver: false,
+        }).start();
+      }
     } else {
       Animated.timing(progress, {
         toValue: 0,
-        duration: 400,
+        duration: animation_duration ?? 400,
         useNativeDriver: false,
       }).start();
     }
-  }, [_visible]);
+  }, [_visible, layout, animation_duration]);
 
   const onMaskChange = (event: GestureResponderEvent, value: boolean) => {
     if (isControl) return;
@@ -226,68 +227,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>
+      ) : (
+        <></>
+      )}
     </>
   );
 };

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/Popover/doc/index.mdx

@@ -8,27 +8,28 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性              | 描述                              | 类型                                                                                                | 默认值          |
-| ----------------- | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
-| visible           | 是否显示气泡                      | boolean                                                                                             | undefined       |
-| placement         | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
-| content           | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
-| opacity           | 遮罩透明度                        | number                                                                                              | 0               |
-| mode              | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
-| trigger           | 触发方式                          | "click" | "touch"                                                                              | click           |
-| duration          | 固定时间后popover消失             | number                                                                                              |                 |
-| zIndex            | 层级                              | number                                                                                              | 1000            |
-| popContainerStyle | 气泡框的样式                      | ViewStyle                                                                                           | `{}`            |
-| closeOnClickAgain | 再次点击关闭                      | boolean                                                                                             | true            |
-| children          | popover 作用的目标节点            | ReactNode                                                                                           |                 |
-| floatingStyles    | floating style                    | ViewStyle                                                                                           | `{}`            |
-| arrowStyles       | arrow style                       | ImageStyle                                                                                          | `{}`            |
-| isControl         | 是否受控                          | boolean                                                                                             | false           |
-| offset            | 气泡偏移位置 用于特殊场景适配     | Offset                                                                                              | `{"x":0,"y":0}` |
-| arrowOffset       | 气泡箭头偏移位置 用于特殊场景适配 | Offset                                                                                              | `{"x":0,"y":0}` |
-| hostName          | hostName                          | string                                                                                              | root            |
-| maxWidth          | popover最大宽度                   | number                                                                                              | 280             |
-| layoutChange      | 布局是否变化                      | any                                                                                                 | `{}`            |
+| 属性               | 描述                              | 类型                                                                                                | 默认值          |
+| ------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
+| visible            | 是否显示气泡                      | boolean                                                                                             | undefined       |
+| placement          | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
+| content            | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
+| opacity            | 遮罩透明度                        | number                                                                                              | 0               |
+| mode               | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
+| trigger            | 触发方式                          | "click" | "touch"                                                                              | click           |
+| duration           | 固定时间后popover消失             | number                                                                                              |                 |
+| animation_duration | animation_duration 动画时间       | number                                                                                              |                 |
+| zIndex             | 层级                              | number                                                                                              | 1000            |
+| popContainerStyle  | 气泡框的样式                      | ViewStyle                                                                                           | `{}`            |
+| closeOnClickAgain  | 再次点击关闭                      | boolean                                                                                             | true            |
+| children           | popover 作用的目标节点            | ReactNode                                                                                           |                 |
+| floatingStyles     | floating style                    | ViewStyle                                                                                           | `{}`            |
+| arrowStyles        | arrow style                       | ImageStyle                                                                                          | `{}`            |
+| isControl          | 是否受控                          | boolean                                                                                             | false           |
+| offset             | 气泡偏移位置 用于特殊场景适配     | Offset                                                                                              | `{"x":0,"y":0}` |
+| arrowOffset        | 气泡箭头偏移位置 用于特殊场景适配 | Offset                                                                                              | `{"x":0,"y":0}` |
+| hostName           | hostName                          | string                                                                                              | root            |
+| maxWidth           | popover最大宽度                   | number                                                                                              | 280             |
+| layoutChange       | 布局是否变化                      | any                                                                                                 | `{}`            |
 
 ### Events
 

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

@@ -12,6 +12,7 @@ export interface RedsPopover {
   mode?: "light" | "dark" | "alwaysLight" | "alwaysDark";
   trigger?: "click" | "touch";
   duration?: number;
+  animation_duration?: number;
   zIndex?: number;
   popContainerStyle?: ViewStyle;
   closeOnClickAgain?: boolean;

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}>