@xhsreds/reds-rn-next 0.8.4-fix-callbacks202510011427 → 0.9.0

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>
+      ) : (
+        <></>
+      )}
     </>
   );
 };

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",
     },
   });