@xhsreds/reds-rn-next 0.2.7 → 0.2.9

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

@@ -91,6 +91,7 @@ export default function App() {
           closeType={SheetsType.SheetsActionType.icon}
           mask={true}
           maskMode={SheetsType.SheetsMaskMode.dark}
+          size={SheetsType.SheetsSize.threeQuater}
         >
           <Children />
           <Button onClick={() => setShowView((val) => !val)}>测试弹窗高度变化</Button>
@@ -342,21 +343,6 @@ export default function App() {
         <Button onClick={() => setShowView((val) => !val)}>测试弹窗高度变化</Button>
         {showView ? <Text style={{ width: "100%", height: 200, backgroundColor: "#f00" }}>xxxxxxx</Text> : <></>}
       </Sheets>
-
-      <Button onClick={() => setVisible14(true)}>可拖拽（不限制最大高度sheets）</Button>
-      <Portal>
-        <Sheets
-          visible={visible14}
-          label={"标题"}
-          onCancel={() => setVisible14(false)}
-          onConfirm={() => setVisible14(false)}
-          mask={true}
-          sheetsType={SheetsType.SheetsType.dragable}
-          maskMode={SheetsType.SheetsMaskMode.light}
-        >
-          <Children />
-        </Sheets>
-      </Portal>
     </View>
   );
 }

package/src/components/SnackBar/SnackBar.tsx

@@ -60,14 +60,14 @@ const SnackBar: React.FC<RedsSnackBar> = (
               width={24}
               height={24}
               source={{
-                uri: "https://picasso-static.xiaohongshu.com/fe-platform/462b8bac03c250fc343eefe46fe8d024e83afbfa.png",
+                uri: "https://picasso-static.xiaohongshu.com/fe-platform/ca3f425040b2aebed30cdfd3df316e5a6884e02f.png",
               }}
             />
           )}
         </View>
         <View style={styles.textContent}>
-          <Text style={styles.title}>{title}</Text>
-          <Text style={styles.description}>{description}</Text>
+          {title ? <Text style={styles.title}>{title}</Text> : <></>}
+          {description ? <Text style={styles.description}>{description}</Text> : <></>}
         </View>
         <TouchableWithoutFeedback style={styles.suffixButton}>
           {suffixButton ? suffixButton : <Text style={styles.buttonText}>按钮</Text>}

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

@@ -15,7 +15,7 @@ const ImageDemo = () => {
       width={40}
       height={40}
       source={{
-        uri: "https://picasso-static.xiaohongshu.com/fe-platform/0fd240a4939600afa2deb08fc68c48f4c590de6f.png",
+        uri: "https://picasso-static.xiaohongshu.com/fe-platform/20e6669d0724f61d0a4f6c2f4542fa997b70fa76.png",
       }}
     />
   );
@@ -70,6 +70,7 @@ export default function App() {
               按钮
             </Button>
           }
+          prefixImage={<ImageDemo />}
           show={show4}
           title="主标题"
           description="描述信息"
@@ -79,6 +80,7 @@ export default function App() {
         <Button onClick={() => setShow5((preshow) => !preshow)}>点击展示</Button>
         <SnackBar
           show={show5}
+          prefixImage={<ImageDemo />}
           suffixButton={
             <Image
               width={16}
@@ -94,7 +96,13 @@ export default function App() {
         <Br />
         <Desc>文字icon</Desc>
         <Button onClick={() => setShow6((preshow) => !preshow)}>点击展示</Button>
-        <SnackBar show={show6} suffixButton={<TextDemo />} title="主标题" description="描述信息"></SnackBar>
+        <SnackBar
+          prefixImage={<ImageDemo />}
+          show={show6}
+          suffixButton={<TextDemo />}
+          title="主标题"
+          description="描述信息"
+        ></SnackBar>
         <Br />
       </View>
     </PortalProvider>

package/src/components/Stepper/Stepper.tsx

@@ -70,7 +70,7 @@ const Stepper = (props: RedsStepper) => {
           <Text style={[styles.iconText]}>-</Text>
         </View>
       </TouchableWithoutFeedback>
-      <Text style={styles.text}>{_value}</Text>
+      <Text style={[styles.text, props.disable && styles.opacity]}>{_value}</Text>
       <TouchableWithoutFeedback onPress={() => handleNumber("add")}>
         <View style={[styles.icon, add]}>
           <Text style={[styles.iconText]}>+</Text>

package/src/components/Tag/Tag.tsx

@@ -32,53 +32,59 @@ const getTypeStyles = (themeColor: any) => ({
     borderColor: lightColor.Info,
   },
   ghost: {
-    backgroundColor: darkColor.Bg,
-    color: alwaysColor.White,
-    borderColor: alwaysColor.LightTitle,
+    color: themeColor.White,
+    borderColor: themeColor.White,
+    borderWidth: 0.5,
+    borderStyle: "solid",
+    backgroundColor: "transparent",
   },
 });
 
-const sizeStyles: { [key: string]: any } = {
-  mini: {
-    fontSize: typography.C3FontSize,
-    lineHeight: 16,
-    height: 16,
-    paddingHorizontal: 4,
-    paddingVertical: 0,
-    borderRadius: 4,
-  },
-  small: {
-    fontSize: typography.C3FontSize,
-    lineHeight: 20,
-    height: 20,
-    paddingHorizontal: 6,
-    paddingVertical: 0,
-    borderRadius: 4,
-  },
-  medium: {
-    fontSize: typography.C2FontSize,
-    lineHeight: 28,
-    height: 28,
-    paddingHorizontal: 10,
-    paddingVertical: 0,
-    borderRadius: 6,
-  },
-  large: {
-    fontSize: typography.B2FontSize,
-    lineHeight: 36,
-    height: 36,
-    paddingHorizontal: 16,
-    paddingVertical: 0,
-    borderRadius: 6,
-  },
-};
-
 const shapeStyles: { [key: string]: any } = {
   square: {},
   round: { borderRadius: 999 },
   mark: { borderRadius: 999, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },
 };
 
+const getSizeStyles = (icon: any, afterIcon: any, size: string) => {
+  const sizeStyles = {
+    mini: {
+      fontSize: typography.C3FontSize,
+      lineHeight: typography.C3LineHeight,
+      paddingVertical: 2,
+      paddingLeft: 2,
+      paddingRight: 2,
+      borderRadius: 4,
+    },
+    small: {
+      fontSize: typography.C3FontSize,
+      lineHeight: typography.C3LineHeight,
+      paddingVertical: 3,
+      paddingLeft: icon ? 4 : 6,
+      paddingRight: afterIcon ? 4 : 6,
+      borderRadius: 4,
+    },
+    medium: {
+      fontSize: typography.C2FontSize,
+      lineHeight: typography.C2LineHeight,
+      paddingVertical: 5,
+      paddingLeft: icon ? 8 : 10,
+      paddingRight: afterIcon ? 8 : 10,
+      borderRadius: 6,
+    },
+    large: {
+      fontSize: typography.B2FontSize,
+      lineHeight: typography.B2LineHeight,
+      paddingVertical: 8,
+      paddingLeft: icon ? 12 : 16,
+      paddingRight: afterIcon ? 12 : 16,
+      borderRadius: 6,
+    },
+  };
+  // @ts-ignore
+  return sizeStyles[size || "medium"];
+};
+
 const Tag: FunctionComponent<RedsTag> = memo(
   forwardRef((props: RedsTag, ref) => {
     const {
@@ -142,7 +148,7 @@ const Tag: FunctionComponent<RedsTag> = memo(
       }
 
       if (size) {
-        Object.assign(style, sizeStyles[size]);
+        Object.assign(style, getSizeStyles(icon, afterIcon, size));
       }
 
       if (borderRadius) {
@@ -158,10 +164,8 @@ const Tag: FunctionComponent<RedsTag> = memo(
       return {
         color: type ? typeStyles[type as keyof typeof typeStyles].color : undefined,
         includeFontPadding: false,
-        lineHeight: sizeStyles[size].lineHeight,
-        height: sizeStyles[size].height,
         textAlignVertical: "center" as "center",
-        paddingVertical: 0,
+        lineHeight: getSizeStyles(icon, afterIcon, size),
       };
     }, [type, size]);