@xhsreds/reds-rn-next 0.1.2 → 0.1.4

package/lib/types/components/Alert/styles.d.ts

@@ -0,0 +1,108 @@
+import { RedsAlert } from "./interface";
+export declare const style: (props: RedsAlert) => {
+    modalOverlay: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        backgroundColor: string;
+    };
+    centeredView: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    alertContainer: {
+        width: number;
+        backgroundColor: string;
+        borderRadius: number;
+        overflow: "hidden";
+        boxShadow: string;
+    };
+    alertContent: {
+        padding: number;
+    };
+    title: {
+        textAlign: "center";
+        marginBottom: number;
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        lineHeight: number;
+    };
+    message: {
+        maxHeight: number;
+        overflow: "hidden";
+        position: "relative";
+    };
+    messageText: {
+        fontSize: number;
+        color: string;
+        textAlign: "center";
+        lineHeight: number;
+        fontWeight: "400" | "500" | "600" | "700";
+    };
+    messageLeft: {
+        textAlign: "left";
+    };
+    scrollOverlay: {
+        width: "100%";
+        position: "absolute";
+        left: number;
+        right: number;
+        bottom: number;
+        height: number;
+    };
+    footer: {
+        width: "100%";
+        height: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        padding: number;
+        paddingTop: number;
+    };
+    footerText: {
+        borderTopWidth: number;
+        borderTopColor: string;
+        padding: number;
+        paddingBottom: number;
+        paddingTop: number;
+    };
+    footerHorizontal: {
+        flexDirection: "row";
+    };
+    footerVertical: {
+        flexDirection: "column-reverse";
+        justifyContent: "center";
+        alignItems: "center";
+        height: number;
+    };
+    button: {
+        flex: number;
+        width: "100%";
+        margin: number;
+        height: number;
+    };
+    dividerBox: {
+        marginTop: number;
+    };
+    confirmButton: {
+        flex: number;
+        margin: number;
+        marginLeft: number;
+        width: "100%";
+        height: number;
+    };
+    verButton: {
+        flex: number;
+        width: "100%";
+        margin: number;
+        marginTop: number;
+        height: number;
+    };
+};

package/lib/types/components/Alert/test/index.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Alert/test/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Alert/test/paper.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/FAB/test/paper.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Sheets/Sheets.d.ts

@@ -1,9 +1,25 @@
 import React from "react";
-import { RedsSheets } from "./interface/index";
+import { RedsSheets, SheetsMaskMode, SheetsType, SheetsIconType, SheetsActionType, SheetsSize } from "./interface/index";
 declare const Sheets: {
     (props: RedsSheets): React.JSX.Element;
     defaultProps: {
         label: string;
+        mask: boolean;
+        maskMode: SheetsMaskMode; /**
+         * Sheets容器高度动画
+         */
+        sheetsType: SheetsType;
+        cancel: boolean;
+        close: boolean;
+        cancelType: SheetsActionType;
+        closeType: SheetsActionType;
+        cancelText: string;
+        /**
+         * 底部操作区高度
+         */
+        closeText: string;
+        iconType: SheetsIconType;
+        size: SheetsSize;
         onCancel: () => void;
         onConfirm: () => void;
         visible: boolean;

package/lib/types/components/Sheets/interface/index.d.ts

@@ -1,6 +1,40 @@
 import { ReactNode } from "react";
+export declare const enum SheetsMaskMode {
+    light = "light",
+    dark = "dark"
+}
+export declare const enum SheetsType {
+    normal = "narmal",
+    dragable = "dragable",
+    action = "action"
+}
+export declare const enum SheetsActionType {
+    text = "text",
+    icon = "icon"
+}
+export declare const enum SheetsIconType {
+    bg = "bg",
+    normal = "normal"
+}
+export declare const enum SheetsSize {
+    auto = "auto",
+    half = "half",
+    full = "full",
+    threeQuater = "threeQuater"
+}
 export interface RedsSheets {
     label?: string;
+    mask?: boolean;
+    maskMode?: SheetsMaskMode;
+    sheetsType?: SheetsType;
+    cancel?: boolean;
+    close?: boolean;
+    cancelType?: SheetsActionType;
+    closeType?: SheetsActionType;
+    cancelText?: string;
+    closeText?: string;
+    iconType?: SheetsIconType;
+    size?: SheetsSize;
     onCancel: () => any;
     onConfirm: () => any;
     visible: boolean;
@@ -10,6 +44,17 @@ export interface RedsSheetsEvent {
 }
 export declare const SheetsDefaultProps: {
     label: string;
+    mask: boolean;
+    maskMode: SheetsMaskMode;
+    sheetsType: SheetsType;
+    cancel: boolean;
+    close: boolean;
+    cancelType: SheetsActionType;
+    closeType: SheetsActionType;
+    cancelText: string;
+    closeText: string;
+    iconType: SheetsIconType;
+    size: SheetsSize;
     onCancel: () => void;
     onConfirm: () => void;
     visible: boolean;

package/lib/types/components/Sheets/styles.d.ts

@@ -1,8 +1,5 @@
 declare const styles: {
-    container: {
-        width: "100%";
-        height: "100%";
-        backgroundColor: string;
+    wrapper: {
         position: "absolute";
         bottom: number;
         left: number;
@@ -12,7 +9,6 @@ declare const styles: {
     mask: {
         width: "100%";
         height: "100%";
-        backgroundColor: string;
         position: "absolute";
         bottom: number;
         left: number;
@@ -20,14 +16,12 @@ declare const styles: {
         top: number;
     };
     picker: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
         position: "absolute";
         bottom: number;
         left: number;
         right: number;
-        paddingTop: number;
-        paddingBottom: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
     };
     labelContainer: {
         display: "flex";
@@ -52,5 +46,40 @@ declare const styles: {
         fontSize: number;
         fontWeight: "400";
     };
+    iconBg: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    dragableContainer: {
+        width: "100%";
+        height: number;
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    dragable: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    block: {
+        width: number;
+        height: number;
+    };
+    actionContainer: {
+        display: "flex";
+        justifyContent: "space-between";
+        alignItems: "center";
+        flexDirection: "row";
+        width: "100%";
+    };
+    action: {
+        flex: number;
+        marginHorizontal: number;
+    };
 };
 export default styles;

package/lib/types/components/Sheets/test/index.test.d.ts

@@ -1 +1 @@
-import "@testing-library/react-native/extend-expect";
+export {};

package/lib/types/components/Silder/Silder.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { RedsSilder } from "./interface/index";
+declare const Silder: {
+    ({ value, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSilder): React.JSX.Element;
+    defaultProps: {
+        value: undefined;
+        defaultValue: boolean;
+        disabled: boolean;
+        trackOnColor: string;
+        trackOffColor: string;
+    };
+};
+export default Silder;

package/lib/types/components/Silder/demo/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function App(): React.JSX.Element;

package/lib/types/components/Silder/index.d.ts

@@ -0,0 +1,4 @@
+import Silder from "./Silder";
+import * as SilderType from "./interface";
+export default Silder;
+export { Silder, SilderType };

package/lib/types/components/Silder/interface/index.d.ts

@@ -0,0 +1,19 @@
+import { GestureResponderEvent } from "react-native";
+export interface RedsSilder {
+    value?: boolean;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    trackOnColor?: string;
+    trackOffColor?: string;
+    onChange?: (value: boolean) => any;
+    onClick?: (value: GestureResponderEvent) => any;
+}
+export interface RedsSilderEvent {
+}
+export declare const SilderDefaultProps: {
+    value: undefined;
+    defaultValue: boolean;
+    disabled: boolean;
+    trackOnColor: string;
+    trackOffColor: string;
+};

package/lib/types/components/Silder/styles.d.ts

@@ -0,0 +1,20 @@
+declare const styles: {
+    SilderContainer: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    thumb: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "absolute";
+        left: number;
+    };
+};
+export default styles;

package/lib/types/components/Silder/test/index.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Silder/test/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/react-native/extend-expect";

package/lib/types/index.d.ts

@@ -1,6 +1,12 @@
+declare global {
+    var GLOBAL: any;
+}
+export * from "./components/ActionSheets";
+export * from "./components/Silder";
 export * from "./components/Sheets";
 export * from "./components/PickerView";
 export * from "./components/Picker";
+export * from "./components/Alert";
 export * from "./components/FAB";
 export * from "./components/Toast";
 export * from "./components/DropDown";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
     "@floating-ui/react-native": "~0.10.6",
     "dayjs": "^1.10.7",
-    "@xhsreds/reds-token-next": "0.1.1"
+    "@xhsreds/reds-token-next": "0.1.3"
   },
   "peerDependencies": {
     "@xhs/reder-icon-svg": "~1.0.1",
@@ -32,7 +32,6 @@
   },
   "scripts": {
     "test": "vitest --coverage",
-    "test:update-snapshots": "vitest --update",
     "bench": "vitest bench --outputJson benchmarks/out.json",
     "clear": "rm -rf ./node_modules && rm -rf ./lib",
     "build": "rm -rf ./lib/* &&  rollup -c  && npm run build:types",

package/src/components/ActionSheets/ActionSheets.tsx

@@ -0,0 +1,66 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { View, TouchableWithoutFeedback, Text } from "react-native";
+import { RedsActionSheets, ActionSheetsDefaultProps } from "./interface/index";
+import styles from "./styles";
+import { useThemeColor } from "../ConfigProvider";
+import Sheets, { SheetsType } from "../Sheets";
+import { ActionType } from "./interface";
+
+const ActionSheets = (props: RedsActionSheets) => {
+  const themeColor = useThemeColor();
+
+  const getActionStyles = (type: ActionType) => {
+    if (type === ActionType.invalid) {
+      return [styles.actionText, { color: themeColor.Disabled }];
+    } else if (type === ActionType.primary) {
+      return [styles.actionText, { color: themeColor.Primary }];
+    } else {
+      return styles.actionText;
+    }
+  };
+
+  const handleClick = (value: string) => {
+    props?.onChange?.(value);
+    props?.onClose?.();
+  };
+
+  const handleClose = () => {
+    props?.onClose?.();
+  };
+
+  return (
+    <Sheets
+      visible={props.visible}
+      cancel={false}
+      close={false}
+      sheetsType={SheetsType.SheetsType.normal}
+      onCancel={handleClose}
+    >
+      <View style={[styles.ActionSheetsContainer, { backgroundColor: themeColor.Bg1 }]}>
+        {props.description ? (
+          <View style={[styles.description, { backgroundColor: themeColor.Bg2 }]}>
+            <Text style={styles.descriptionText}>{props.description}</Text>
+          </View>
+        ) : (
+          <></>
+        )}
+        {props?.data?.map((item) => (
+          <TouchableWithoutFeedback onPress={() => handleClick(item.value)}>
+            <View style={[styles.action, { backgroundColor: themeColor.Bg2 }]}>
+              <Text style={getActionStyles(item.type as ActionType)}>{item.label}</Text>
+            </View>
+          </TouchableWithoutFeedback>
+        ))}
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View style={[styles.cancel, { backgroundColor: themeColor.Bg2 }]}>
+            <Text style={{ color: themeColor.Title }}>取消</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+    </Sheets>
+  );
+};
+
+ActionSheets.defaultProps = ActionSheetsDefaultProps;
+
+export default ActionSheets;

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

@@ -0,0 +1,65 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import { ActionSheets, Button, ActionSheetsType } from "@xhs/reds-rn-next";
+
+export default function App() {
+  const [visible1, setVisible1] = useState(false);
+  const [visible2, setVisible2] = useState(false);
+  const list = [
+    {
+      label: "操作",
+      value: "1",
+    },
+    {
+      label: "操作",
+      value: "2",
+    },
+    {
+      label: "操作",
+      value: "3",
+    },
+    {
+      label: "操作",
+      value: "4",
+    },
+    {
+      label: "操作",
+      value: "5",
+    },
+  ];
+
+  const list1 = [
+    {
+      label: "操作",
+      value: "1",
+    },
+    {
+      label: "失效操作",
+      value: "2",
+      type: ActionSheetsType.ActionType.invalid,
+    },
+    {
+      label: "警告操作",
+      value: "3",
+      type: ActionSheetsType.ActionType.primary,
+    },
+  ];
+
+  const handleChange = (value: string) => {
+    console.log("handleChange", value);
+  };
+  return (
+    <View>
+      <Button onClick={() => setVisible1(true)}>有描述的ActionSheet</Button>
+      <ActionSheets
+        visible={visible1}
+        data={list}
+        description={"一段描述"}
+        onClose={() => setVisible1(false)}
+        onChange={handleChange}
+      />
+      <Button onClick={() => setVisible2(true)}>不同状态的ActionSheet</Button>
+      <ActionSheets visible={visible2} data={list1} onClose={() => setVisible2(false)} onChange={handleChange} />
+    </View>
+  );
+}

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

@@ -0,0 +1,24 @@
+import BaseDemo from "!!raw-loader!../demo/index.tsx";
+
+## 演示
+
+### 基础用法
+
+::BaseDemo::
+
+## API
+
+### Props
+
+| 属性        | 描述         | 类型         | 默认值 |
+| ----------- | ------------ | ------------ | ------ |
+| data        | 列表数据     | ActionItem[] | `[]`   |
+| description | 描述         | string       |        |
+| visible     | 是否展示列表 | boolean      | false  |
+
+### Events
+
+| 事件     | 描述       | 类型                   | 默认值 |
+| -------- | ---------- | ---------------------- | ------ |
+| onClose  | 关闭时触发 | () => any              |        |
+| onChange | 点击时触发 | (value: string) => any |        |

package/src/components/ActionSheets/index.ts

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

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

@@ -0,0 +1,27 @@
+import { GestureResponderEvent } from "react-native";
+import { lightColor } from "@xhs/reds-token-next";
+
+export interface ActionItem {
+  label: string;
+  value: string;
+  type?: ActionType;
+}
+
+export const enum ActionType {
+  normal = "normal",
+  invalid = "invalid",
+  primary = "primary",
+}
+export interface RedsActionSheets {
+  data: ActionItem[];
+  description?: string;
+  visible: boolean;
+  onClose: () => any;
+  onChange: (value: string) => any;
+}
+
+export interface RedsActionSheetsEvent {}
+export const ActionSheetsDefaultProps = {
+  data: [],
+  visible: false,
+};

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