@xhsreds/reds-rn-next 0.2.7 → 0.2.9

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

@@ -1,83 +1,144 @@
 import React from "react";
 import { View, Text, ScrollView } from "react-native";
-import { NavigationBar, NavigationBarType } from "@xhs/reds-rn-next";
-import { Close } from "@xhs/reder-icon-svg-ReDs_icon";
+import { NavigationBar, NavigationBarType, IconType, useThemeColor } 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";
 
 const { NavigationBarTextTheme, NavigationBarActionType, NavigationBarLayoutType, NavigationBarSize } =
   NavigationBarType;
 
-/**
- * 回退操作区
- */
-const backIcon = {
-  iconProps: {
-    icon: Close,
-  },
-  event: () => {
-    console.log("back");
-  },
-};
-
-/**
- * 关闭操作区
- */
-const closeIcon = {
-  iconProps: {
-    icon: Close,
-  },
-  event: () => {
-    console.log("close");
-  },
-};
-
-/**
- * 分享操作区
- */
-const shareIcon = {
-  iconProps: {
-    icon: Close,
-  },
-  event: () => {
-    console.log("share");
-  },
-};
-
-/**
- * 更多操作区
- */
-const moreIcon = {
-  iconProps: {
-    icon: Close,
-  },
-  event: () => {
-    console.log("more");
-  },
-};
-
-/**
- * 文字取消操作区
- */
-const leftText = {
-  text: "取消",
-  event: () => {
-    console.log("text cancel");
-  },
-};
-
-/**
- * 文字完成操作区
- */
-const rightText = {
-  text: "完成",
-  textTheme: NavigationBarTextTheme.primary,
-  event: () => {
-    console.log("text complete");
-  },
-};
-
 const Br = (props: { height?: number }) => <View style={{ height: props.height || 30 }}></View>;
 
 export default function App() {
+  const themeColor = useThemeColor();
+  /**
+   * 回退操作区
+   */
+  const backIcon = {
+    iconProps: {
+      icon: BackCenterB,
+      type: IconType.iconType.svg,
+      fill: themeColor.Title,
+    },
+    event: () => {
+      console.log("back");
+    },
+  };
+  const backIconBg = {
+    iconProps: {
+      icon: BackCenterB,
+      type: IconType.iconType.svg,
+      fill: alwaysColor.White,
+    },
+    event: () => {
+      console.log("back");
+    },
+  };
+
+  const backLeftIcon = {
+    iconProps: {
+      icon: BackLeftB,
+      type: IconType.iconType.svg,
+      fill: themeColor.Title,
+    },
+    event: () => {
+      console.log("back");
+    },
+  };
+
+  /**
+   * 关闭操作区
+   */
+  const closeIcon = {
+    iconProps: {
+      icon: Close,
+      type: IconType.iconType.svg,
+      fill: themeColor.Title,
+    },
+    event: () => {
+      console.log("close");
+    },
+  };
+  const closeIconBg = {
+    iconProps: {
+      icon: Close,
+      type: IconType.iconType.svg,
+      fill: alwaysColor.White,
+    },
+    event: () => {
+      console.log("close");
+    },
+  };
+
+  /**
+   * 分享操作区
+   */
+  const shareIcon = {
+    iconProps: {
+      icon: ShareB,
+      type: IconType.iconType.svg,
+      fill: themeColor.Title,
+    },
+    event: () => {
+      console.log("share");
+    },
+  };
+  const shareIconBg = {
+    iconProps: {
+      icon: ShareB,
+      type: IconType.iconType.svg,
+      fill: alwaysColor.White,
+    },
+    event: () => {
+      console.log("share");
+    },
+  };
+
+  /**
+   * 更多操作区
+   */
+  const moreIcon = {
+    iconProps: {
+      icon: MoreB,
+      type: IconType.iconType.svg,
+      fill: themeColor.Title,
+    },
+    event: () => {
+      console.log("more");
+    },
+  };
+
+  const moreIconBg = {
+    iconProps: {
+      icon: MoreB,
+      type: IconType.iconType.svg,
+      fill: alwaysColor.White,
+    },
+    event: () => {
+      console.log("more");
+    },
+  };
+
+  /**
+   * 文字取消操作区
+   */
+  const leftText = {
+    text: "取消",
+    event: () => {
+      console.log("text cancel");
+    },
+  };
+
+  /**
+   * 文字完成操作区
+   */
+  const rightText = {
+    text: "完成",
+    textTheme: NavigationBarTextTheme.primary,
+    event: () => {
+      console.log("text complete");
+    },
+  };
   return (
     <ScrollView>
       <Br />
@@ -112,15 +173,15 @@ export default function App() {
 
       <Text>带背景颜色的标题</Text>
       <NavigationBar
-        leftActions={[backIcon]}
-        rightActions={[moreIcon]}
+        leftActions={[backIconBg]}
+        rightActions={[moreIconBg]}
         actionType={NavigationBarActionType.BgIcon}
         title={"标题"}
       />
       <Br />
       <NavigationBar
-        leftActions={[backIcon, closeIcon]}
-        rightActions={[shareIcon, moreIcon]}
+        leftActions={[backIconBg, closeIconBg]}
+        rightActions={[shareIconBg, moreIconBg]}
         actionType={NavigationBarActionType.BgIcon}
         title={"标题"}
       />
@@ -129,8 +190,8 @@ export default function App() {
       <Text>居左布局 右侧最多三个操作区</Text>
       <NavigationBar
         layout={NavigationBarLayoutType.LEFT}
-        actionType={NavigationBarActionType.BgIcon}
-        leftActions={[backIcon]}
+        actionType={NavigationBarActionType.Icon}
+        leftActions={[backLeftIcon]}
         rightActions={[shareIcon, moreIcon, closeIcon]}
         title={"标题"}
       />
@@ -139,16 +200,8 @@ export default function App() {
       <Text>自定义标题</Text>
       <NavigationBar
         actionType={NavigationBarActionType.BgIcon}
-        leftActions={[backIcon, closeIcon]}
-        rightActions={[shareIcon, moreIcon]}
-      >
-        <Text>自定义标题区</Text>
-      </NavigationBar>
-      <NavigationBar
-        layout={NavigationBarLayoutType.LEFT}
-        actionType={NavigationBarActionType.BgIcon}
-        leftActions={[backIcon, closeIcon]}
-        rightActions={[shareIcon, moreIcon]}
+        leftActions={[backIconBg, closeIconBg]}
+        rightActions={[shareIconBg, moreIconBg]}
       >
         <Text>自定义标题区</Text>
       </NavigationBar>
@@ -158,15 +211,15 @@ export default function App() {
       <NavigationBar
         size={NavigationBarSize.large}
         actionType={NavigationBarActionType.BgIcon}
-        leftActions={[backIcon]}
-        rightActions={[shareIcon, moreIcon, closeIcon]}
+        leftActions={[backIconBg]}
+        rightActions={[shareIconBg, moreIconBg, closeIconBg]}
         title={"标题"}
       ></NavigationBar>
       <NavigationBar
         size={NavigationBarSize.large}
         actionType={NavigationBarActionType.BgIcon}
-        leftActions={[backIcon, closeIcon]}
-        rightActions={[shareIcon, moreIcon]}
+        leftActions={[backIconBg, closeIconBg]}
+        rightActions={[shareIconBg, moreIconBg]}
       >
         <Text>自定义标题区</Text>
       </NavigationBar>

package/src/components/NavigationBar/styles.ts

@@ -1,6 +1,7 @@
 import { alwaysColor } from "@xhs/reds-token-next";
 import { StyleSheet } from "react-native";
 import { useThemeTypography } from "../ConfigProvider";
+import { NavigationBarActionType, RedsNavigationBar, NavigationBarLayoutType } from "./interface/index";
 
 const getStyles = (themeColor: any) => {
   const typography = useThemeTypography("NavigationBar");
@@ -17,24 +18,24 @@ const getStyles = (themeColor: any) => {
       position: "relative",
     },
     textPrimary: {
-      fontSize: typography.B1FontSize,
-      fontWeight: typography.T3FontWeight,
+      fontSize: typography.T2FontSize,
+      fontWeight: typography.T2FontWeight,
       color: themeColor.Primary,
     },
     textNormal: {
-      fontSize: typography.B1FontSize,
-      fontWeight: typography.T3FontWeight,
+      fontSize: typography.T2FontSize,
+      fontWeight: typography.T2FontWeight,
       color: themeColor.Title,
     },
     title: {
-      fontSize: typography.B1FontSize,
-      fontWeight: typography.T3FontWeight,
+      fontSize: typography.T2FontSize,
+      fontWeight: typography.T2FontWeight,
       color: themeColor.Title,
       maxWidth: 100,
     },
     largeTitle: {
       fontSize: typography.H2FontSize,
-      fontWeight: typography.T3FontWeight,
+      fontWeight: typography.H2FontWeight,
       color: themeColor.Title,
       maxWidth: 100,
     },
@@ -45,26 +46,15 @@ const getStyles = (themeColor: any) => {
       paddingLeft: 10,
     },
     leftActionStyle: {
-      marginRight: 20,
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
     },
     rightActionStyle: {
-      marginLeft: 20,
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
     },
-    iconBg: {
-      width: 32,
-      height: 32,
-      borderRadius: 32,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: themeColor.Disabled,
-    },
     flexCenter: {
       display: "flex",
       flexDirection: "row",
@@ -96,4 +86,33 @@ const getStyles = (themeColor: any) => {
   return styles;
 };
 
+export const getIconStyles = (props: RedsNavigationBar, item: any, themeColor: any, type: string) => {
+  const style =
+    props.actionType === NavigationBarActionType.BgIcon
+      ? StyleSheet.create({
+          style: {
+            width: Number(item?.iconProps?.size || 32),
+            height: Number(item?.iconProps?.size || 32),
+            borderRadius: Number(item?.iconProps?.size || 32),
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: themeColor.Disabled,
+            marginRight: props.layout === NavigationBarLayoutType.MIDDLE && type === "left" ? 12 : 0,
+            marginLeft: type === "right" ? 12 : 0,
+          },
+        })
+      : StyleSheet.create({
+          style: {
+            width: Number(item?.iconProps?.size || 24),
+            height: Number(item?.iconProps?.size || 24),
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginRight: props.layout === NavigationBarLayoutType.MIDDLE && type === "left" ? 16 : 0,
+            marginLeft: type === "right" ? 20 : 0,
+          },
+        });
+  return style.style;
+};
 export default getStyles;

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

@@ -184,8 +184,7 @@ export default function App() {
           setVisible4(false);
         }}
         onChange={handleChange3}
-        // @ts-expect-error
-        size={SheetsType.SheetsSize.half}
+        // @ts-ignore
         cancel={true}
         close={true}
         cancelText={"取消"}

package/src/components/Popover/Popover.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useMemo, isValidElement, useEffect, useRef } from "react";
-import { Text, View, TouchableWithoutFeedback, GestureResponderEvent, Animated } from "react-native";
+import { Text, View, TouchableWithoutFeedback, GestureResponderEvent, Animated, Image } from "react-native";
 import { RedsPopover } from "./interface/index";
 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";
 
 export default ({
   mode = "light",
@@ -23,6 +24,7 @@ export default ({
   popContainerStyle = {},
   floatingStyles: propsFloatingStyles,
   arrowStyles: propsArrowStyles,
+  offset,
 }: RedsPopover) => {
   useMounted("Popover");
   const needModal = useMemo(() => opacity !== 0, [opacity]);
@@ -33,6 +35,8 @@ export default ({
 
   const childRef = useRef<any>(null);
 
+  const colorMode = useColorMode();
+
   const [layout, setLayout] = useState({
     x: 0,
     y: 0,
@@ -62,8 +66,11 @@ export default ({
     return layout.height
       ? {
           position: "absolute",
-          top: placement.includes("top") ? layout.y - floatingLayout.height - 12 : layout.y + layout.height + 12,
-          left: start ? realLayout.x : mid ? realLayout.x - diffX / 2 : end ? realLayout.x - diffX : 0,
+          top:
+            (placement.includes("top") ? layout.y - floatingLayout.height - 12 : layout.y + layout.height + 12) -
+            (offset?.y || 0),
+          left:
+            (start ? realLayout.x : mid ? realLayout.x - diffX / 2 : end ? realLayout.x - diffX : 0) + (offset?.x || 0),
         }
       : {};
   }, [placement, layout, floatingLayout]);
@@ -75,16 +82,17 @@ export default ({
     const diffX = floatingLayout.width - layout.width;
     return layout.height
       ? {
-          transform: [{ rotate: placement.includes("top") ? `180deg` : `0deg` }],
+          transform: [{ rotate: placement.includes("top") ? `0deg` : `180deg` }],
           position: "absolute",
-          top: placement.includes("top") ? layout.y - 12 : layout.y + layout.height,
-          left: start
-            ? realLayout.x + 8
-            : mid
-              ? realLayout.x - diffX / 2 + floatingLayout.width / 2
-              : end
-                ? realLayout.x - diffX + floatingLayout.width - 24
-                : 0,
+          top: (placement.includes("top") ? layout.y - 12 : layout.y + layout.height + 6) - (offset?.y || 0),
+          left:
+            (start
+              ? realLayout.x + 8
+              : mid
+                ? realLayout.x - diffX / 2 + floatingLayout.width / 2
+                : end
+                  ? realLayout.x - diffX + floatingLayout.width - 24
+                  : 0) + (offset?.x || 0),
         }
       : {};
   }, [placement, layout, floatingLayout]);
@@ -134,6 +142,14 @@ export default ({
     isControl && setVisible(!!visible);
   }, [visible]);
 
+  const angle = useMemo(() => {
+    if (colorMode === "light") {
+      return "https://picasso-static.xiaohongshu.com/fe-platform/907ae578dedd5f26b9c150ab910c7d16234cf219.png";
+    } else {
+      return "https://picasso-static.xiaohongshu.com/fe-platform/354f38172beb8e9f51725ec0bc9f5d546597e5ba.png";
+    }
+  }, [colorMode]);
+
   return (
     <>
       {React.Children.map(children, (child, index) => {
@@ -199,7 +215,7 @@ export default ({
               // @ts-expect-error
               style={{
                 backgroundColor: popoverStyle.backgroundColor,
-                paddingHorizontal: 8,
+                paddingHorizontal: 12,
                 paddingVertical: 7,
                 maxWidth: 280,
                 minHeight: 30,
@@ -231,26 +247,16 @@ export default ({
                 </Text>
               )}
             </Animated.View>
-            <Animated.View
-              collapsable={false}
+            <Image
+              source={{ uri: angle }}
               // @ts-expect-error
               style={{
-                opacity: progress,
-                borderBottomColor: popoverStyle.backgroundColor,
-                width: 0,
-                height: 0,
-                zIndex: zIndex,
+                width: 14,
+                height: 6,
                 ...arrowStyles,
-                borderTopWidth: 7,
-                borderLeftWidth: 7,
-                borderRightWidth: 7,
-                borderLeftColor: "transparent",
-                borderRightColor: "transparent",
-                borderTopColor: "transparent",
-                borderBottomWidth: 5,
                 ...propsArrowStyles,
               }}
-            ></Animated.View>
+            />
           </>
         </ModalWrapper>
       </Portal>

package/src/components/Popover/component.tsx

@@ -1,21 +1,26 @@
-import React, { ReactNode, forwardRef } from "react";
+import React, { ReactNode } from "react";
 import { Modal, View, Pressable, GestureResponderEvent, Animated, TouchableNativeFeedback } from "react-native";
 
-export const ModalWrapper = forwardRef<
-  Modal,
-  {
-    needModal?: boolean;
-    visible: boolean;
-    children: ReactNode;
-    onClickMask: (e: GestureResponderEvent) => any;
-    opacity?: number;
-    progress: Animated.Value | number;
-    zIndex: number;
-  }
->(({ needModal, visible, children, onClickMask, opacity, progress, zIndex }, ref) => {
+export const ModalWrapper = ({
+  needModal,
+  visible,
+  children,
+  onClickMask,
+  opacity,
+  progress,
+  zIndex,
+}: {
+  needModal?: boolean;
+  visible: boolean;
+  children: ReactNode;
+  onClickMask: (e: GestureResponderEvent) => any;
+  opacity?: number;
+  progress: Animated.Value | number;
+  zIndex: number;
+}) => {
   // if (!needModal) return visible ? children : null
   return (
-    <Modal visible={visible} transparent ref={ref} collapsable={false}>
+    <Modal visible={visible} transparent collapsable={false}>
       <TouchableNativeFeedback onPress={(e) => onClickMask(e)}>
         <Animated.View
           style={{
@@ -37,4 +42,4 @@ export const ModalWrapper = forwardRef<
       </TouchableNativeFeedback>
     </Modal>
   );
-});
+};