@xhsreds/reds-rn-next 0.1.2 → 0.1.3

package/src/components/ActionSheets/styles.ts

@@ -0,0 +1,54 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  ActionSheetsContainer: {
+    width: "100%",
+    overflowY: "scroll",
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+  },
+  description: {
+    height: 42,
+    boxSizing: "border-box",
+    paddingLeft: 24,
+    paddingRight: 24,
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+  },
+  descriptionText: {
+    fontSize: 12,
+    fontWeight: "400",
+  },
+  action: {
+    height: 56,
+    width: "100%",
+    paddingLeft: 24,
+    paddingRight: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  actionText: {
+    fontSize: 16,
+    fontWeight: "400",
+  },
+  cancel: {
+    height: 56,
+    width: "100%",
+    paddingLeft: 24,
+    paddingRight: 24,
+    boxSizing: "border-box",
+    fontSize: 16,
+    fontWeight: 400,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 12,
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import ActionSheets from "..";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<ActionSheets data={[]} visible={true} onChange={() => {}} onClose={() => {}}></ActionSheets>);
+  });
+});

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

@@ -0,0 +1,81 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { describe, it, expect, vi } from "vitest";
+import ActionSheets from "../ActionSheets";
+import { ActionType } from "../interface";
+
+describe("<ActionSheets />", () => {
+  const themeColorMock = {
+    Disabled: "gray",
+    Primary: "blue",
+    Bg1: "white",
+    Bg2: "lightgray",
+    Title: "black",
+  };
+
+  vi.mock("../ConfigProvider", () => ({
+    useThemeColor: () => themeColorMock,
+  }));
+
+  it("renders correctly with description and data", () => {
+    const data = [
+      { label: "Option 1", value: "1", type: ActionType.primary },
+      { label: "Option 2", value: "2", type: ActionType.invalid },
+    ];
+    const { getByText } = render(
+      <ActionSheets visible={true} description="Description text" data={data} onChange={() => {}} onClose={() => {}} />,
+    );
+
+    expect(getByText("Description text")).toBeTruthy();
+    expect(getByText("Option 1")).toBeTruthy();
+    expect(getByText("Option 2")).toBeTruthy();
+    expect(getByText("取消")).toBeTruthy();
+  });
+
+  it("triggers onChange and onClose on item click", () => {
+    const handleChange = vi.fn();
+    const handleClose = vi.fn();
+
+    const data = [{ label: "Option 1", value: "1", type: ActionType.primary }];
+
+    const { getByText } = render(
+      <ActionSheets visible={true} data={data} onChange={handleChange} onClose={handleClose} />,
+    );
+
+    fireEvent.press(getByText("Option 1"));
+
+    expect(handleChange).toHaveBeenCalledWith("1");
+    expect(handleClose).toHaveBeenCalled();
+  });
+
+  it("triggers onClose when cancel is pressed", () => {
+    const handleClose = vi.fn();
+
+    const { getByText } = render(<ActionSheets visible={true} data={[]} onClose={handleClose} onChange={() => {}} />);
+
+    fireEvent.press(getByText("取消"));
+
+    expect(handleClose).toHaveBeenCalled();
+  });
+
+  it("renders correctly without description", () => {
+    const { queryByText } = render(<ActionSheets visible={true} data={[]} onChange={() => {}} onClose={() => {}} />);
+
+    expect(queryByText("Description text")).toBeNull();
+  });
+
+  it("renders with correct styles based on action type", () => {
+    const data = [
+      { label: "Primary Option", value: "1", type: ActionType.primary },
+      { label: "Invalid Option", value: "2", type: ActionType.invalid },
+    ];
+
+    const { getByText } = render(<ActionSheets visible={true} data={data} onChange={() => {}} onClose={() => {}} />);
+
+    const primaryOption = getByText("Primary Option");
+    const invalidOption = getByText("Invalid Option");
+
+    expect(primaryOption.props.style).toContainEqual({ color: themeColorMock.Primary });
+    expect(invalidOption.props.style).toContainEqual({ color: themeColorMock.Disabled });
+  });
+});

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Modal } from "react-native-paper";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("paper render", () => {
+  redsBench("base", async () => {
+    render(
+      <Modal visible={true}>
+        <Text>Example Modal. Click outside this area to dismiss.</Text>
+      </Modal>,
+    );
+  });
+});

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

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

@@ -46,7 +46,6 @@ exports[`Button Component > applies the correct styles for shape circle 1`] = `
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
     ]
   }
 >
@@ -115,7 +114,6 @@ exports[`Button Component > applies the correct styles for shape circle left ico
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
     ]
   }
 >
@@ -260,7 +258,6 @@ exports[`Button Component > applies the correct styles for shape circle right ic
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
     ]
   }
 >
@@ -407,7 +404,6 @@ exports[`Button Component > applies the correct styles for shape ghost 1`] = `
         "backgroundColor": "rgba(255, 255, 255, 0.08)",
         "borderColor": "rgba(0, 0, 0, 0.62)",
       },
-      {},
     ]
   }
 >
@@ -478,7 +474,6 @@ exports[`Button Component > applies the correct styles for shape outline 1`] = `
         "backgroundColor": "transparent",
         "borderColor": "rgba(0, 0, 0, 0.62)",
       },
-      {},
     ]
   }
 >
@@ -549,7 +544,6 @@ exports[`Button Component > applies the correct styles for shape text 1`] = `
         "backgroundColor": "transparent",
         "borderColor": "transparent",
       },
-      {},
     ]
   }
 >
@@ -620,7 +614,6 @@ exports[`Button Component > applies the correct styles for size 1`] = `
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
     ]
   }
 >
@@ -691,7 +684,6 @@ exports[`Button Component > applies the correct styles for variant fill 1`] = `
         "backgroundColor": "rgba(255, 36, 66, 1)",
         "borderColor": "rgba(255, 36, 66, 1)",
       },
-      {},
     ]
   }
 >
@@ -761,7 +753,6 @@ exports[`Button Component > applies the correct styles when block is true 1`] =
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
       {
         "width": "100%",
       },
@@ -834,7 +825,6 @@ exports[`Button Component > applies the correct styles when disabled is true 1`]
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
       {
         "opacity": 0.3,
       },