@xhsreds/reds-rn-next 0.1.2 → 0.1.4

package/src/components/Alert/test/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,519 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Alert Component > applies the correct styles for vertical footer layout 1`] = `
+[
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "backgroundColor": "rgba(0, 0, 0, 0.4)",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "bottom": 0,
+        "flex": 1,
+        "justifyContent": "center",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+            "borderRadius": 8,
+            "boxShadow": "0 2px 16px rgba(0, 0, 0, 0.1)",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "width": 270,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "padding": 20,
+          }
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "flexDirection": "row",
+              "height": 56,
+              "justifyContent": "space-between",
+              "padding": 20,
+              "paddingTop": 0,
+              "width": "100%",
+            },
+            {
+              "alignItems": "center",
+              "flexDirection": "column-reverse",
+              "height": 100,
+              "justifyContent": "center",
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onMoveShouldSetResponder={[Function]}
+          onMoveShouldSetResponderCapture={[Function]}
+          onResponderEnd={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderReject={[Function]}
+          onResponderRelease={[Function]}
+          onResponderStart={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          onStartShouldSetResponderCapture={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "borderRadius": 1000,
+                "borderStyle": "solid",
+                "borderWidth": 0.5,
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "height": 36,
+                "minWidth": 82,
+                "paddingHorizontal": 20,
+                "paddingVertical": 0,
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderColor": "rgba(0, 0, 0, 0.62)",
+              },
+              {
+                "flex": 1,
+                "height": 36,
+                "margin": 0,
+                "marginTop": 10,
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "lineHeight": 20,
+                },
+                {
+                  "color": "rgba(0, 0, 0, 0.8)",
+                },
+              ]
+            }
+          >
+            Cancel
+          </Text>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onMoveShouldSetResponder={[Function]}
+          onMoveShouldSetResponderCapture={[Function]}
+          onResponderEnd={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderReject={[Function]}
+          onResponderRelease={[Function]}
+          onResponderStart={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          onStartShouldSetResponderCapture={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "borderRadius": 1000,
+                "borderStyle": "solid",
+                "borderWidth": 0.5,
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "height": 36,
+                "minWidth": 82,
+                "paddingHorizontal": 20,
+                "paddingVertical": 0,
+              },
+              {
+                "backgroundColor": "rgba(255, 36, 66, 1)",
+                "borderColor": "rgba(255, 36, 66, 1)",
+              },
+              {
+                "flex": 1,
+                "height": 36,
+                "margin": 0,
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "lineHeight": 20,
+                },
+                {
+                  "color": "rgba(255, 255, 255, 1)",
+                },
+              ]
+            }
+          >
+            Confirm
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>,
+]
+`;
+
+exports[`Alert Component > renders correctly with media cover 1`] = `
+[
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "backgroundColor": "rgba(0, 0, 0, 0.4)",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "bottom": 0,
+        "flex": 1,
+        "justifyContent": "center",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+            "borderRadius": 8,
+            "boxShadow": "0 2px 16px rgba(0, 0, 0, 0.1)",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "width": 270,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "borderRadius": 0,
+            "borderTopLeftRadius": 8,
+            "borderTopRightRadius": 8,
+            "height": 135,
+            "overflow": "hidden",
+            "width": "100%",
+          }
+        }
+      >
+        <Image
+          source={
+            {
+              "uri": "test-url",
+            }
+          }
+          style={
+            {
+              "height": "100%",
+              "resizeMode": "cover",
+              "width": "100%",
+            }
+          }
+        />
+      </View>
+      <View
+        style={
+          {
+            "padding": 20,
+          }
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "flexDirection": "row",
+              "height": 56,
+              "justifyContent": "space-between",
+              "padding": 20,
+              "paddingTop": 0,
+              "width": "100%",
+            },
+            {
+              "flexDirection": "row",
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onMoveShouldSetResponder={[Function]}
+          onMoveShouldSetResponderCapture={[Function]}
+          onResponderEnd={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderReject={[Function]}
+          onResponderRelease={[Function]}
+          onResponderStart={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          onStartShouldSetResponderCapture={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "borderRadius": 1000,
+                "borderStyle": "solid",
+                "borderWidth": 0.5,
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "height": 36,
+                "minWidth": 82,
+                "paddingHorizontal": 20,
+                "paddingVertical": 0,
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderColor": "rgba(0, 0, 0, 0.62)",
+              },
+              {
+                "flex": 1,
+                "height": 36,
+                "margin": 0,
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "lineHeight": 20,
+                },
+                {
+                  "color": "rgba(0, 0, 0, 0.8)",
+                },
+              ]
+            }
+          >
+            取消
+          </Text>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onMoveShouldSetResponder={[Function]}
+          onMoveShouldSetResponderCapture={[Function]}
+          onResponderEnd={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderReject={[Function]}
+          onResponderRelease={[Function]}
+          onResponderStart={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          onStartShouldSetResponderCapture={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "borderRadius": 1000,
+                "borderStyle": "solid",
+                "borderWidth": 0.5,
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "height": 36,
+                "minWidth": 82,
+                "paddingHorizontal": 20,
+                "paddingVertical": 0,
+              },
+              {
+                "backgroundColor": "rgba(255, 36, 66, 1)",
+                "borderColor": "rgba(255, 36, 66, 1)",
+              },
+              {
+                "flex": 1,
+                "height": 36,
+                "margin": 0,
+                "marginLeft": 10,
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "lineHeight": 20,
+                },
+                {
+                  "color": "rgba(255, 255, 255, 1)",
+                },
+              ]
+            }
+          >
+            确认
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>,
+]
+`;

package/src/components/Alert/test/index.bench.tsx

@@ -0,0 +1,13 @@
+import React, { useState } from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Alert } from "@xhs/reds-rn-next";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<Alert show={true}></Alert>);
+  });
+});

package/src/components/Alert/test/index.test.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { describe, it, expect, vi } from "vitest";
+import Alert from "../index";
+import { PortalProvider } from "../../Portal";
+
+describe("Alert Component", () => {
+  it("renders correctly when show is true", () => {
+    const { getByText } = render(
+      <PortalProvider>
+        <Alert show={true} title="Test Title" message="Test Message" />
+      </PortalProvider>,
+    );
+    expect(getByText("Test Title")).toBeTruthy();
+    expect(getByText("Test Message")).toBeTruthy();
+  });
+
+  it("does not render when show is false", () => {
+    const { queryByText } = render(
+      <PortalProvider>
+        <Alert show={false} title="Test Title" message="Test Message" />
+      </PortalProvider>,
+    );
+    expect(queryByText("Test Title")).toBeNull();
+    expect(queryByText("Test Message")).toBeNull();
+  });
+
+  it("triggers onConfirm event when confirm button is pressed", () => {
+    const mockOnConfirm = vi.fn();
+    const { getByText } = render(
+      <PortalProvider>
+        <Alert show={true} confirmText="Confirm" onConfirm={mockOnConfirm} />
+      </PortalProvider>,
+    );
+
+    fireEvent.press(getByText("Confirm"));
+
+    expect(mockOnConfirm).toHaveBeenCalled();
+  });
+
+  it("triggers onCancel event when cancel button is pressed", () => {
+    const mockOnCancel = vi.fn();
+    const { getByText } = render(
+      <PortalProvider>
+        <Alert show={true} cancelText="Cancel" onCancel={mockOnCancel} />
+      </PortalProvider>,
+    );
+
+    fireEvent.press(getByText("Cancel"));
+
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it("applies the correct styles for vertical footer layout", () => {
+    const { toJSON } = render(
+      <PortalProvider>
+        <Alert show={true} footerLayout="vertical" confirmText="Confirm" cancelText="Cancel" />
+      </PortalProvider>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Alert/test/paper.bench.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { ScrollView } from "react-native";
+import { Dialog, Portal, Text } from "react-native-paper";
+import { render } from "@testing-library/react-native";
+
+describe("render", () => {
+  redsBench("paper base", async () => {
+    const [visible, setVisible] = React.useState(true);
+    const hideDialog = () => setVisible(false);
+
+    render(
+      <Portal>
+        <Dialog visible={visible} onDismiss={hideDialog}>
+          <Dialog.ScrollArea>
+            <ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>
+              <Text>This is a scrollable area</Text>
+            </ScrollView>
+          </Dialog.ScrollArea>
+        </Dialog>
+      </Portal>,
+    );
+  });
+});

package/src/components/Avatar/test/__snapshots__/index.test.tsx.snap

@@ -32,6 +32,38 @@ exports[`Avatar Component > renders correctly with default props 1`] = `
 </View>
 `;
 
+exports[`Avatar Component > renders with correct animation when animated prop is true 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": 34,
+      "justifyContent": "center",
+      "width": 34,
+    }
+  }
+>
+  <View>
+    <Image
+      source={
+        {
+          "uri": "https://picasso-static.xiaohongshu.com/fe-platform/142addccc643b634416515dae65d49dabbac1e09.png",
+        }
+      }
+      style={
+        {
+          "borderRadius": 17,
+          "height": 34,
+          "width": 34,
+          "zIndex": 100,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
 exports[`Avatar Component > renders with correct outline color 1`] = `
 <View
   style={

package/src/components/Avatar/test/paper.bench.tsx

@@ -7,6 +7,6 @@ import { render } from "@testing-library/react-native";
 
 describe("render", () => {
   redsBench("avatar base", async () => {
-    render(<Avatar.Text size={48} label="A" />);
+    render(<Avatar.Icon size={24} icon="folder" />);
   });
 });