@xhsreds/reds-rn-next 0.1.5 → 0.1.6

package/lib/types/components/Switch/test/spectrum.bench.d.ts

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

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

@@ -6,6 +6,7 @@ declare const TabBar: {
     defaultProps: {
         list: DataType[];
         type: string;
+        value: undefined;
         badge: boolean;
     };
 };

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

@@ -3,7 +3,8 @@ export interface RedsTabBar {
     list: DataType[];
     customTabBar?: DataType;
     type: "text" | "icon";
-    activeTab: string;
+    active: string;
+    value?: boolean;
     badge?: boolean;
     containerStyles?: any;
     onChange?: (value: string) => any;
@@ -30,5 +31,6 @@ export interface RedsTabBarEvent {
 export declare const TabBarDefaultProps: {
     list: DataType[];
     type: string;
+    value: undefined;
     badge: boolean;
 };

package/lib/types/components/Tag/test/spectrum.bench.d.ts

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

package/lib/types/components/Toast/test/spectrum.bench.d.ts

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
     "@floating-ui/react-native": "~0.10.6",
     "dayjs": "^1.10.7",
-    "@xhsreds/reds-token-next": "0.1.4"
+    "@xhsreds/reds-token-next": "0.1.5"
   },
   "peerDependencies": {
     "@xhs/reder-icon-svg": "~1.0.1",
@@ -15,9 +15,10 @@
     "react-native-svg": "*"
   },
   "devDependencies": {
-    "react-native": "0.72.5",
     "react": "~18.2.0",
-    "react-native-svg": "~15.4.0"
+    "react-native": "0.72.5",
+    "react-native-svg": "~15.4.0",
+    "@xhs/spectrum": "1.2.4-feat-support-0.72-alpha.23"
   },
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",

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

@@ -1,5 +1,7 @@
 import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
+ActionSheets size属性继承自sheets组件 容器高度由sheets内部容器高度撑开
+
 ## 演示
 
 ### 基础用法
@@ -10,11 +12,11 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性        | 描述         | 类型         | 默认值 |
-| ----------- | ------------ | ------------ | ------ |
-| data        | 列表数据     | ActionItem[] | `[]`   |
-| description | 描述         | string       |        |
-| visible     | 是否展示列表 | boolean      | false  |
+| 属性        | 描述                 | 类型         | 默认值 |
+| ----------- | -------------------- | ------------ | ------ |
+| data        | ActionSheets列表数据 | ActionItem[] | `[]`   |
+| description | 描述                 | string       |        |
+| visible     | 是否展示列表         | boolean      | false  |
 
 ### Events
 

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { ActionSheet2 } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    ActionSheet2.show({
+      options: [{ text: "操作按钮" }, { text: "操作按钮" }, { text: "操作按钮" }],
+    });
+  });
+});

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Avatar } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<Avatar type={"default"} size={48} style={{ marginHorizontal: 20 }} />);
+  });
+});

package/src/components/AvatarGroup/test/spectrum.bench.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { AvatarGroup } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  const imgs = [
+    {
+      uri: "https://picasso-static.xiaohongshu.com/fe-platform/81bb94fcff424f3ca02d620e7460d5a8315b0158.png",
+    },
+    {
+      uri: "https://picasso-static.xiaohongshu.com/fe-platform/81bb94fcff424f3ca02d620e7460d5a8315b0158.png",
+    },
+    {
+      uri: "https://picasso-static.xiaohongshu.com/fe-platform/81bb94fcff424f3ca02d620e7460d5a8315b0158.png",
+    },
+    {
+      uri: "https://picasso-static.xiaohongshu.com/fe-platform/81bb94fcff424f3ca02d620e7460d5a8315b0158.png",
+    },
+    {
+      uri: "https://picasso-static.xiaohongshu.com/fe-platform/81bb94fcff424f3ca02d620e7460d5a8315b0158.png",
+    },
+  ];
+  redsBench("base", async () => {
+    render(<AvatarGroup num={5} size={28} style={{ marginVertical: 8 }} src={imgs}></AvatarGroup>);
+  });
+});

package/src/components/Badge/test/spectrum.bench.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Badge } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<Badge mt={-4} mr={-4} />);
+  });
+});

package/src/components/BottomBar/test/spectrum.bench.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { BottomBar } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+const handleClick = () => {
+  console.log("按钮点击");
+};
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<BottomBar text="按钮" onPress={handleClick} />);
+  });
+});

package/src/components/Button/test/spectrum.bench.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Button } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<Button>主按钮</Button>);
+  });
+});

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -1,36 +1,20 @@
-import { ConfigProviderProps } from "./interface";
+import { ConfigProviderProps, RedsConfigProvider } from "./interface";
 import { configCache } from "./hooks/ConfigCache/ConfigCache";
 import { ConfigProviderContext, IConfigProviderContext } from "./hooks/ConfigContext/ConfigContext";
-import React from "react";
+import React, { ReactNode } from "react";
 
-const ConfigProvider: React.FC<ConfigProviderProps> = (props: ConfigProviderProps) => {
-  const {
-    id = "root",
-    theme = {
-      colorMode: "light",
-      inherit: true,
-    },
-    parentId = "root",
-    children,
-  } = props;
+const ConfigProvider: React.FC<RedsConfigProvider> = (props: RedsConfigProvider) => {
+  const { id = "root", token = {}, parentId = "root", colorMode = "light", children, inherit = true } = props;
 
   const themeCache = {
-    colorMode: theme.colorMode || "light",
+    colorMode: colorMode || "light",
     token: {
-      lightColor: {
-        ...theme.token?.lightColor,
-      },
-      darkColor: {
-        ...theme.token?.darkColor,
-      },
-      alwaysColor: {
-        ...theme.token?.alwaysColor,
-      },
-      components: {
-        ...theme.token?.components,
-      },
+      lightColor: token?.lightColor ?? {},
+      darkColor: token?.darkColor ?? {},
+      alwaysColor: token?.alwaysColor ?? {},
+      components: token?.components ?? {},
     },
-    inherit: theme.inherit,
+    inherit: inherit,
   };
 
   configCache.addNewConfigCache({

package/src/components/ConfigProvider/demo/base.tsx

@@ -40,10 +40,10 @@ export default () => {
   // 主题定制
   const [colorMode2, setColorMode2] = useState<ColorMode>("light");
   const [infoLightColor, setInfoLightColor] = useState<string>("red");
-  const [infoDarkColor, setInfoDarkColor] = useState<string>("black");
+  const [infoDarkColor, setInfoDarkColor] = useState<string>("yellow");
   const changeInfoToken = () => {
     setInfoLightColor((preInfoLightColor) => (preInfoLightColor === "red" ? "blue" : "red"));
-    setInfoDarkColor((preInfoDarkColor) => (preInfoDarkColor === "black" ? "white" : "black"));
+    setInfoDarkColor((preInfoDarkColor) => (preInfoDarkColor === "yellow" ? "white" : "yellow"));
   };
   const changeColorMode2 = () => {
     setColorMode2((preColorMode) => (preColorMode === "light" ? "dark" : "light"));
@@ -66,12 +66,7 @@ export default () => {
       <TouchableOpacity onPress={changeColorMode}>
         <Text>切换主题</Text>
       </TouchableOpacity>
-      <ConfigProvider
-        id="1"
-        theme={{
-          colorMode: colorMode,
-        }}
-      >
+      <ConfigProvider id="1" colorMode={colorMode}>
         <App />
       </ConfigProvider>
       <TouchableOpacity onPress={changeColorMode2}>
@@ -82,15 +77,13 @@ export default () => {
       </TouchableOpacity>
       <ConfigProvider
         id="2"
-        theme={{
-          colorMode: colorMode2,
-          token: {
-            lightColor: {
-              Info: infoLightColor,
-            },
-            darkColor: {
-              Info: infoDarkColor,
-            },
+        colorMode={colorMode2}
+        token={{
+          lightColor: {
+            Info: infoLightColor,
+          },
+          darkColor: {
+            Info: infoDarkColor,
           },
         }}
       >
@@ -104,17 +97,15 @@ export default () => {
       </TouchableOpacity>
       <ConfigProvider
         id="3"
-        theme={{
-          colorMode: colorMode3,
-          token: {
-            components: {
-              Button: {
-                lightColor: {
-                  Info: infoLightColor3,
-                },
-                darkColor: {
-                  Info: infoDarkColor3,
-                },
+        colorMode={colorMode3}
+        token={{
+          components: {
+            Button: {
+              lightColor: {
+                Info: infoLightColor3,
+              },
+              darkColor: {
+                Info: infoDarkColor3,
               },
             },
           },

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

@@ -10,13 +10,13 @@ import BaseDemo from "!!raw-loader!../demo/base.tsx";
 
 ### Props
 
-| 属性      | 描述                            | 类型         | 默认值                                                                                           |
-| --------- | ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------ |
-| id        | 主题 ID                         | string       | root                                                                                             |
-| parentId  | 父级主题 ID                     | string       | root                                                                                             |
-| theme     | 主题定制                        | IThemeConfig | `{"colorMode":"light","inherit":true,"token":{"lightColor":{},"darkColor":{},"alwaysColor":{}}}` |
-| colorMode | IThemeConfig colorMode 主题模式 | string       | light                                                                                            |
-| inherit   | IThemeConfig inherit Token 继承 | boolean      | true                                                                                             |
-| token     | IThemeConfig token Token 定制   | Object       | `{}`                                                                                             |
+| 属性      | 描述                            | 类型        | 默认值 |
+| --------- | ------------------------------- | ----------- | ------ |
+| id        | 主题 ID                         | string      | root   |
+| parentId  | 父级主题 ID                     | string      | root   |
+| colorMode | IThemeConfig colorMode 主题模式 | string      | light  |
+| inherit   | IThemeConfig inherit Token 继承 | boolean     | true   |
+| token     | IThemeConfig token Token 定制   | IThemeToken |        |
+| children  | 主题包裹组件                    | ReactNode   |        |
 
 ### Events

package/src/components/ConfigProvider/hooks/ConfigCache/interface.ts

@@ -8,7 +8,7 @@ export type TypographyToken = keyof typeof typography;
 
 export type ThemeColor = { [key in LightToken | DarkToken]: ValueOf<typeof lightColor | typeof darkColor> };
 
-export type ColorMode = "light" | "dark";
+export type ColorMode = "light" | "dark" | string;
 export type Component =
   | "Button"
   | "Popover"

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

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 type ColorMode = "light" | "dark";
 type Component = "Button" | "Popover" | "Text" | "Tag" | "Switch" | "Toast";
 
@@ -26,45 +27,36 @@ export interface ConfigProviderProps {
   theme?: IThemeConfig;
   parentId?: string;
 }
+export interface IThemeToken {
+  lightColor?: Record<string, string>;
+  darkColor?: Record<string, string>;
+  alwaysColor?: Record<string, string>;
+  components?: ComponentsToken;
+}
 export interface RedsConfigProvider {
   id?: string;
   parentId?: string;
-  theme?: IThemeConfig;
   colorMode?: string;
   inherit?: boolean;
-  token: Object;
+  token?: IThemeToken;
+  children?: ReactNode;
 }
 
 export interface RedsConfigProviderEvent {}
 export const defaultProps: RedsConfigProvider = {
   id: "root",
   parentId: "root",
-  theme: {
-    colorMode: "light",
-    inherit: true,
-    token: {
-      lightColor: {},
-      darkColor: {},
-      alwaysColor: {},
-    },
+  token: {
+    lightColor: {},
+    darkColor: {},
+    alwaysColor: {},
   },
   colorMode: "light",
   inherit: true,
-  token: {},
 };
 export const ConfigProviderDefaultProps = {
   id: "root",
   parentId: "root",
-  theme: {
-    colorMode: "light",
-    inherit: true,
-    token: {
-      lightColor: {},
-      darkColor: {},
-      alwaysColor: {},
-    },
-  },
   colorMode: "light",
   inherit: true,
-  token: {},
 };

package/src/components/ConfigProvider/test/base.tsx

@@ -73,11 +73,7 @@ export default () => {
       <TouchableOpacity testID={"themeChangeButton"} onPress={changeColorMode}>
         <Text>切换主题</Text>
       </TouchableOpacity>
-      <ConfigProvider
-        theme={{
-          colorMode: colorMode,
-        }}
-      >
+      <ConfigProvider colorMode={colorMode}>
         <App />
       </ConfigProvider>
       <TouchableOpacity testID={"themeChangeCustomButton"} onPress={changeColorMode2}>
@@ -87,15 +83,13 @@ export default () => {
         <Text>主题定制</Text>
       </TouchableOpacity>
       <ConfigProvider
-        theme={{
-          colorMode: colorMode2,
-          token: {
-            lightColor: {
-              Info: infoLightColor,
-            },
-            darkColor: {
-              Info: infoDarkColor,
-            },
+        colorMode={colorMode2}
+        token={{
+          lightColor: {
+            Info: infoLightColor,
+          },
+          darkColor: {
+            Info: infoDarkColor,
           },
         }}
       >
@@ -108,17 +102,15 @@ export default () => {
         <Text>组件级主题切换</Text>
       </TouchableOpacity>
       <ConfigProvider
-        theme={{
-          colorMode: colorMode3,
-          token: {
-            components: {
-              Button: {
-                lightColor: {
-                  Info: infoLightColor3,
-                },
-                darkColor: {
-                  Info: infoDarkColor3,
-                },
+        colorMode={colorMode3}
+        token={{
+          components: {
+            Button: {
+              lightColor: {
+                Info: infoLightColor3,
+              },
+              darkColor: {
+                Info: infoDarkColor3,
               },
             },
           },