@xhsreds/reds-rn-next 0.1.3 → 0.1.4

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;
+};

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>,
+]
+`;