@xhsreds/reds-rn-next 0.1.2 → 0.1.4

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/Alert/Alert.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import {
+  View,
+  Text,
+  Modal,
+  Image,
+  ScrollView,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  GestureResponderEvent,
+  Animated,
+} from "react-native";
+import { RedsAlert, AlertDefaultProps } from "./interface";
+import { Button, Divider, Portal } from "../../index";
+import { style } from "./styles";
+
+// const scrollViewMask = {
+//   default: "https://picasso-static.xiaohongshu.com/fe-platform/d3fab8f89c0d2daa69ecaa87580c8ff42f330a80.png",
+//   dark: "https://picasso-static.xiaohongshu.com/fe-platform/953a4a587c93dadda6f4ded4f732c50cf703ac99.png",
+// };
+const Alert: React.FC<RedsAlert> = (props) => {
+  const finalProps = { ...AlertDefaultProps, ...props };
+  const {
+    show,
+    title,
+    message,
+    confirmText,
+    cancelText,
+    onConfirm,
+    onCancel,
+    onOpen,
+    onClose,
+    align,
+    // showScrollOverlay,
+    footerLayout,
+    showConfirmButton,
+    showCancelButton,
+    mask,
+    footerType,
+    header,
+    footer,
+    children,
+  } = finalProps;
+
+  const styles = style(props);
+  // const [hasScrollToBottom, setHasScrollToBottom] = useState(true);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (show && onOpen) onOpen();
+    if (!show && onClose) onClose();
+  }, [show]);
+
+  const handleConfirm = (e: GestureResponderEvent) => {
+    if (onConfirm) onConfirm(e);
+  };
+
+  const handleCancel = (e: GestureResponderEvent) => {
+    if (onCancel) onCancel(e);
+  };
+
+  // const handleScrollView = useCallback(
+  //   (e: any) => {
+  //     const offsetY = e.nativeEvent.contentOffset.y;
+  //     const contentSizeHeight = e.nativeEvent.contentSize.height;
+  //     var containerScrollHeight = e.nativeEvent.layoutMeasurement.height;
+  //     if (offsetY + containerScrollHeight + 30 >= contentSizeHeight) {
+  //       if (hasScrollToBottom) setHasScrollToBottom(false);
+  //     } else {
+  //       if (!hasScrollToBottom) setHasScrollToBottom(true);
+  //     }
+  //   },
+  //   [hasScrollToBottom],
+  // );
+
+  // const [canScroll, setCanScroll] = useState(false);
+
+  // const handleContentSizeChange = (contentWidth: number, contentHeight: number) => {
+  //   if (contentHeight > 135) {
+  //     setCanScroll(true);
+  //   } else {
+  //     setCanScroll(false);
+  //   }
+  // };
+
+  return show ? (
+    <Portal>
+      {mask && (
+        <TouchableWithoutFeedback>
+          <View style={styles.modalOverlay} />
+        </TouchableWithoutFeedback>
+      )}
+      <Animated.View
+        style={[
+          styles.centeredView,
+          {
+            transform: [
+              {
+                scale: fadeAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [1, 1],
+                }),
+              },
+            ],
+          },
+        ]}
+      >
+        <View style={[styles.alertContainer]}>
+          {header}
+          <View style={styles.alertContent}>
+            <Text style={styles.title}>{title}</Text>
+            {message ? (
+              <ScrollView
+                // onContentSizeChange={handleContentSizeChange}
+                // onScroll={handleScrollView}
+                style={[styles.message]}
+                scrollEventThrottle={16}
+              >
+                <Text style={[styles.messageText, align === "left" && styles.messageLeft]}>{message}</Text>
+              </ScrollView>
+            ) : (
+              children
+            )}
+            {/* {showScrollOverlay && hasScrollToBottom && canScroll ? (
+              <Image source={{ uri: scrollViewMask.default }} style={styles.scrollOverlay} />
+            ) : null} */}
+          </View>
+          {footer ? (
+            footer
+          ) : (
+            <View
+              style={[
+                styles.footer,
+                footerLayout === "vertical" ? styles.footerVertical : styles.footerHorizontal,
+                footerType === "text" && styles.footerText,
+              ]}
+            >
+              {showCancelButton && (
+                <Button
+                  variant={footerType === "text" ? "text" : "outline"}
+                  onClick={handleCancel}
+                  style={footerLayout === "vertical" ? styles.verButton : styles.button}
+                >
+                  {cancelText}
+                </Button>
+              )}
+              {footerType === "text" && showCancelButton && footerLayout !== "vertical" && (
+                <View style={styles.dividerBox}>
+                  <Divider direction={"vertical"} size={24} />
+                </View>
+              )}
+              {showConfirmButton && (
+                <Button
+                  type="primary"
+                  variant={footerType === "text" ? "text" : "fill"}
+                  onClick={handleConfirm}
+                  style={footerType === "text" || footerLayout === "vertical" ? styles.button : styles.confirmButton}
+                >
+                  {confirmText}
+                </Button>
+              )}
+            </View>
+          )}
+        </View>
+      </Animated.View>
+    </Portal>
+  ) : null;
+};
+
+export default Alert;

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

@@ -0,0 +1,234 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, GestureResponderEvent, ScrollView, Image } from "react-native";
+import { Alert, PortalProvider } from "@xhs/reds-rn-next";
+import { Button, Icon, useThemeColor } from "@xhs/reds-rn-next";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+    marginBottom: 800,
+  },
+  buttonContainer: {
+    marginVertical: 10,
+    width: "100%",
+    alignItems: "center",
+  },
+  footer: {
+    flex: 1,
+    // padding: 20,
+    // paddingTop: 0,
+    // flexDirection: "column-reverse",
+    // height: 100,
+  },
+});
+
+export default function App() {
+  const [alertVisible, setAlertVisible] = useState(false);
+  const [footerType, setFooterType] = useState<"button" | "text">("button");
+  const [showCancelButton, setShowCancelButton] = useState(true);
+
+  const [alertTitle, setAlertTitle] = useState<string | undefined>("提示");
+  const [alertMessage, setAlertMessage] = useState<string | undefined>(
+    "这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容",
+  );
+  const [align, setAlign] = useState<"left" | "center">("center");
+  const [footerLayout, setFooterLayout] = useState<"horizontal" | "vertical">("horizontal");
+  const themeColor = useThemeColor("Icon");
+  const [mediaSrc, setMediaSrc] = useState<string>("");
+  const [footer, setFooter] = useState<React.ReactNode | undefined>(undefined);
+  const [header, setHeader] = useState<React.ReactNode | undefined>(undefined);
+  const [customMessage, setCustomMessage] = useState(false);
+
+  const showAlert = () => {
+    setAlertVisible(true);
+  };
+
+  const hideAlert = () => {
+    setAlertVisible(false);
+
+    // 重置状态
+    setFooterType("button");
+    setFooterLayout("horizontal");
+    setAlign("center");
+    setAlertTitle("提示");
+    setAlertMessage("这是一个消息内容");
+    setShowCancelButton(true);
+    setFooter(undefined);
+    setHeader(undefined);
+    setCustomMessage(false);
+  };
+
+  const handleConfirm = (e: GestureResponderEvent) => {
+    console.log("确认按钮点击", e);
+    hideAlert();
+  };
+
+  const handleCancel = (e: GestureResponderEvent) => {
+    console.log("取消按钮点击", e);
+    hideAlert();
+  };
+
+  const handleOpen = () => {
+    console.log("Alert 打开");
+  };
+
+  const handleClose = () => {
+    console.log("Alert 关闭");
+  };
+
+  const changeFoolterType = () => {
+    setFooterType("text");
+  };
+
+  const renderCusFooter = () => {
+    return (
+      <View style={{ padding: 20 }}>
+        <Button onClick={handleCancel} type="primary">
+          自定义footer
+        </Button>
+      </View>
+    );
+  };
+  const renderCusHeader = () => {
+    return (
+      <View style={{}}>
+        <Image
+          source={{ uri: "https://fe-platform.xhscdn.com/platform/104101l0316gv8eebgm06cj00vk900000000000eiv941q" }}
+          style={{ width: 270, height: 100 }}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <PortalProvider>
+      <ScrollView>
+        <View style={styles.container}>
+          <View style={styles.buttonContainer}>
+            <Button onClick={showAlert} type="primary" variant="fill">
+              显示基础Alert
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("提示");
+                setAlertMessage("不显示取消按钮的alert");
+                setFooterLayout("horizontal");
+                setShowCancelButton(false);
+                showAlert();
+              }}
+              type="primary"
+              variant="outline"
+            >
+              不显示取消按钮的alert
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("标题");
+                setAlertMessage("文本按钮样式");
+                setFooterLayout("horizontal");
+                changeFoolterType();
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              文本按钮样式
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("提示");
+                setAlertMessage(
+                  "欢迎来到小红书！ 请您充分阅读和理解《用户协议》和《隐私政策》，以及本提示的全部内容。点击“同意”按钮即代表您已同意前述协议全部条款以及以下约定。 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权",
+                );
+                setFooterLayout("horizontal");
+                setAlign("left");
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              内容可滚动
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("标题");
+                setAlertMessage("文本");
+                setFooterLayout("vertical");
+                changeFoolterType();
+                setFooter(renderCusFooter());
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              自定义footer
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setHeader(renderCusHeader());
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              自定义header
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setCustomMessage(true);
+                setAlertMessage("");
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              自定义message
+            </Button>
+          </View>
+
+          <Alert
+            show={alertVisible}
+            title={alertTitle}
+            message={alertMessage}
+            align={align}
+            confirmText="确认"
+            cancelText="取消"
+            onConfirm={handleConfirm}
+            onCancel={handleCancel}
+            onOpen={handleOpen}
+            onClose={handleClose}
+            footerLayout={footerLayout}
+            showConfirmButton
+            showCancelButton={showCancelButton}
+            footerType={footerType}
+            footer={footer}
+            header={header}
+          >
+            {customMessage && <Text>这是一个自定义message</Text>}
+          </Alert>
+        </View>
+      </ScrollView>
+    </PortalProvider>
+  );
+}

package/src/components/Alert/doc/index.mdx

@@ -0,0 +1,37 @@
+import BaseDemo from "!!raw-loader!../demo/index.tsx";
+
+## 演示
+
+### 基础用法
+
+::BaseDemo::
+
+## API
+
+### Props
+
+| 属性              | 描述                                   | 类型                           | 默认值     |
+| ----------------- | -------------------------------------- | ------------------------------ | ---------- |
+| show              | 是否显示弹出框                         | boolean                        | false      |
+| title             | 标题 string                            | string                         |            |
+| message           | 文本内容                               | string                         |            |
+| align             | 内容对齐方式                           | "left" | "center"         | center     |
+| footerLayout      | 底部按钮区域布局方式，水平还是竖直方向 | "horizontal" | "vertical" | horizontal |
+| showConfirmButton | 是否展示确认按钮                       | boolean                        | true       |
+| showCancelButton  | 是否展示取消按钮                       | boolean                        | true       |
+| confirmText       | 确认按钮文案                           | string                         | 确认       |
+| cancelText        | 取消按钮文案                           | string                         | 取消       |
+| mask              | 是否展示遮罩层                         | boolean                        | true       |
+| footerType        | 底部按钮样式                           | "text" | "button"         | button     |
+| children          | children                               | React.ReactNode                |            |
+| footer            | 自定义底部按钮区域                     | React.ReactNode                |            |
+| header            | 顶部插槽                               | React.ReactNode                |            |
+
+### Events
+
+| 事件      | 描述               | 类型                                   | 默认值 |
+| --------- | ------------------ | -------------------------------------- | ------ |
+| onConfirm | 点击确认按钮时触发 | (value: GestureResponderEvent) => void |        |
+| onCancel  | 点击取消按钮时触发 | (value: GestureResponderEvent) => void |        |
+| onOpen    | 打开弹窗时触发     | () => void                             |        |
+| onClose   | 关闭弹窗时触发     | () => void                             |        |

package/src/components/Alert/index.ts

@@ -0,0 +1,5 @@
+import Alert from "./Alert";
+import * as AlertType from "./interface";
+
+export default Alert;
+export { Alert, AlertType };

package/src/components/Alert/interface/index.ts

@@ -0,0 +1,35 @@
+import { GestureResponderEvent } from "react-native";
+import { lightColor } from "@xhs/reds-token-next";
+export interface RedsAlert {
+  show: boolean;
+  title?: string;
+  message?: string;
+  align?: "left" | "center";
+  footerLayout?: "horizontal" | "vertical";
+  showConfirmButton?: boolean;
+  showCancelButton?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+  mask?: boolean;
+  footerType?: "text" | "button";
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  header?: React.ReactNode;
+  onConfirm?: (value: GestureResponderEvent) => void;
+  onCancel?: (value: GestureResponderEvent) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+export interface RedsAlertEvent {}
+export const AlertDefaultProps = {
+  show: false,
+  align: "center",
+  footerLayout: "horizontal",
+  showConfirmButton: true,
+  showCancelButton: true,
+  confirmText: "确认",
+  cancelText: "取消",
+  mask: true,
+  footerType: "button",
+};

package/src/components/Alert/styles.ts

@@ -0,0 +1,116 @@
+import { StyleSheet } from "react-native";
+import { typography, alwaysColor } from "@xhs/reds-token-next";
+import { useThemeColor } from "../ConfigProvider";
+import { RedsAlert } from "./interface";
+
+export const style = (props: RedsAlert) => {
+  const themeColor = useThemeColor("Button");
+  const styles = StyleSheet.create({
+    modalOverlay: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: alwaysColor.MaskBg,
+    },
+    centeredView: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    alertContainer: {
+      width: 270,
+      backgroundColor: themeColor.White,
+      borderRadius: 8,
+      overflow: "hidden",
+      boxShadow: "0 2px 16px rgba(0, 0, 0, 0.1)",
+    },
+    alertContent: {
+      padding: 20,
+    },
+    title: {
+      textAlign: "center",
+      marginBottom: 8,
+      fontSize: typography.T2FontSize,
+      fontWeight: typography.T2FontWeight,
+      lineHeight: typography.T2LineHeight,
+    },
+    message: {
+      maxHeight: 126,
+      overflow: "hidden",
+      position: "relative",
+    },
+    messageText: {
+      fontSize: typography.C2FontSize,
+      color: themeColor.Paragraph,
+      textAlign: "center",
+      lineHeight: typography.C2LineHeight,
+      fontWeight: typography.C2FontWeight,
+    },
+    messageLeft: {
+      textAlign: "left",
+    },
+    scrollOverlay: {
+      width: "100%",
+      position: "absolute",
+      left: 20,
+      right: 0,
+      bottom: 20,
+      height: 40,
+    },
+    footer: {
+      width: "100%",
+      height: 56,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      padding: 20,
+      paddingTop: 0,
+    },
+    footerText: {
+      borderTopWidth: 0.5,
+      borderTopColor: themeColor.Separator,
+      padding: 20,
+      paddingBottom: 6,
+      paddingTop: 6,
+    },
+    footerHorizontal: {
+      flexDirection: "row",
+    },
+    footerVertical: {
+      flexDirection: "column-reverse",
+      justifyContent: "center",
+      alignItems: "center",
+      height: 100,
+    },
+    button: {
+      flex: 1,
+      width: "100%",
+      margin: 0,
+      height: 36,
+    },
+    dividerBox: {
+      marginTop: 5,
+    },
+    confirmButton: {
+      flex: 1,
+      margin: 0,
+      marginLeft: 10,
+      width: "100%",
+      height: 36,
+    },
+    verButton: {
+      flex: 1,
+      width: "100%",
+      margin: 0,
+      marginTop: 10,
+      height: 36,
+    },
+  });
+  return styles;
+};