@xhsreds/reds-rn-next 0.1.5 → 0.1.6

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

@@ -33,10 +33,8 @@ describe("ConfigProvider", () => {
   it(":themeChange", async () => {
     const wrapper = render(
       <TestConfigProvider
-        theme={{
-          colorMode: "light",
-          inherit: true,
-        }}
+        colorMode="light"
+        inherit={true}
         id={"root"}
         parentId={"root"}
         children={"123"}
@@ -44,8 +42,8 @@ describe("ConfigProvider", () => {
     );
     expect(wrapper.UNSAFE_root.props.id).toBe("root");
     expect(wrapper.UNSAFE_root.props.parentId).toBe("root");
-    expect(wrapper.UNSAFE_root.props.theme.colorMode).toBe("light");
-    expect(wrapper.UNSAFE_root.props.theme.inherit).toBe(true);
+    expect(wrapper.UNSAFE_root.props.colorMode).toBe("light");
+    expect(wrapper.UNSAFE_root.props.inherit).toBe(true);
   });
   it(":useThemeColor", async () => {
     const TextTest = () => {
@@ -59,14 +57,14 @@ describe("ConfigProvider", () => {
       return <Text style={{ color: themeColor.Bg }}>123</Text>;
     };
     const wrapper = render(
-      <TestConfigProvider theme={{ colorMode: "light" }} id={"root"} parentId={"root"}>
+      <TestConfigProvider colorMode="light" id={"root"} parentId={"root"}>
         <TextTest></TextTest>
       </TestConfigProvider>,
     );
     const textTest = wrapper.getByText("123").props.style;
     expect(textTest.color).toBe(lightColor.Info);
     const darkwrapper = render(
-      <TestConfigProvider theme={{ colorMode: "dark" }} id={"root"} parentId={"root"}>
+      <TestConfigProvider colorMode="dark" id={"root"} parentId={"root"}>
         <TextTest></TextTest>
       </TestConfigProvider>,
     );
@@ -74,17 +72,15 @@ describe("ConfigProvider", () => {
     expect(darkTextTest.color).toBe(darkColor.Info);
     const darkwrapperText = render(
       <TestConfigProvider
-        theme={{
-          colorMode: "dark",
-          token: {
-            components: {
-              Button: {
-                lightColor: {
-                  Info: "red",
-                },
-                darkColor: {
-                  Info: "red",
-                },
+        colorMode="dark"
+        token={{
+          components: {
+            Button: {
+              lightColor: {
+                Info: "red",
+              },
+              darkColor: {
+                Info: "red",
               },
             },
           },
@@ -99,17 +95,15 @@ describe("ConfigProvider", () => {
     expect(darkTextTestText.color).toBe("red");
     const lightwrapperText = render(
       <TestConfigProvider
-        theme={{
-          colorMode: "light",
-          token: {
-            components: {
-              Button: {
-                lightColor: {
-                  Info: "red",
-                },
-                darkColor: {
-                  Info: "red",
-                },
+        colorMode="light"
+        token={{
+          components: {
+            Button: {
+              lightColor: {
+                Info: "red",
+              },
+              darkColor: {
+                Info: "red",
               },
             },
           },
@@ -125,15 +119,13 @@ describe("ConfigProvider", () => {
 
     const wrapperText = render(
       <TestConfigProvider
-        theme={{
-          colorMode: "light",
-          token: {
-            lightColor: {
-              Bg: "blue",
-            },
-            darkColor: {
-              Bg: "green",
-            },
+        colorMode="light"
+        token={{
+          lightColor: {
+            Bg: "blue",
+          },
+          darkColor: {
+            Bg: "green",
           },
         }}
       >
@@ -152,15 +144,13 @@ describe("ConfigProvider", () => {
     };
     const wrapperText = render(
       <TestConfigProvider
-        theme={{
-          colorMode: "dark",
-          token: {
-            lightColor: {
-              Bg: "blue",
-            },
-            darkColor: {
-              Bg: "green",
-            },
+        colorMode="dark"
+        token={{
+          lightColor: {
+            Bg: "blue",
+          },
+          darkColor: {
+            Bg: "green",
           },
         }}
       >
@@ -181,36 +171,34 @@ describe("ConfigProvider", () => {
       <TestConfigProvider
         id="123"
         parentId="456"
-        theme={{
-          colorMode: "dark",
-          token: {
-            lightColor: {
-              Bg: "blue",
-              Info: "red",
-            },
-            darkColor: {
-              Bg: "green",
-              Primary: "blue",
-            },
-            alwaysColor: {
-              Bg: "red",
-            },
-            components: {
-              Button: {
-                lightColor: {
-                  Info: "red",
-                },
-                darkColor: {
-                  Info: "red",
-                },
-                alwaysColor: {
-                  Bg: "red",
-                },
+        colorMode="dark"
+        token={{
+          lightColor: {
+            Bg: "blue",
+            Info: "red",
+          },
+          darkColor: {
+            Bg: "green",
+            Primary: "blue",
+          },
+          alwaysColor: {
+            Bg: "red",
+          },
+          components: {
+            Button: {
+              lightColor: {
+                Info: "red",
+              },
+              darkColor: {
+                Info: "red",
+              },
+              alwaysColor: {
+                Bg: "red",
               },
             },
           },
-          inherit: false,
         }}
+        inherit={false}
       >
         <TextTest2></TextTest2>
       </TestConfigProvider>,

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

@@ -20,11 +20,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | startYear   | 选择器的最小可选时间，默认为当前时间-10年 | number                 |                             |
 | endYear     | 选择器的最大可选时间，默认为当前时间+10年 | number                 |                             |
 | title       | 标题                                      | string                 |                             |
-| formatter   | 格式化时间格式                            | (value: string) => any | (value: string) => {        |
-
-    return value;
-
-} |
+| formatter   | 格式化时间格式                            | (value: string) => any | (value: string) => value    |
 
 ### Events
 

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

@@ -28,9 +28,7 @@ export interface RedsDatePickerEvent {}
 export const DatePickerDefaultProps = {
   visible: false,
   mode: DatePickerMode.YearMonthDay,
-  formatter: (value: string) => {
-    return value;
-  },
+  formatter: (value: string) => value,
   onChange: (value: string) => {},
   onCancel: () => {},
   onConfirm: (value: string) => {},

package/src/components/Divider/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 { TextDivision } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<TextDivision type="Primary">无更多内容，猜你喜欢以下结果</TextDivision>);
+  });
+});

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

@@ -1,5 +1,44 @@
 import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
+### DropDownItem 属性用法
+
+| 属性           | 描述               | 类型                    | 默认值                   |
+| -------------- | ------------------ | ----------------------- | ------------------------ | -------- | --- |
+| type           | 下拉菜单类型       | DROPDOWNITEMTYPE        | DROPDOWNITEMTYPE.RADIO   |
+| value          | 选项               | string                  | string[]                 | number[] | -   |
+| defaultValue   | 默认选项           | string                  | string[]                 | number[] | -   |
+| optionColumns  | 多选项列数         | MULTIPLEOPTIONCOLUMN    | MULTIPLEOPTIONCOLUMN.TWO |
+| options        | 列表数据           | SelectItem[]            | []                       |
+| onChange       | 当值发生变化时触发 | (value: string) => any; | -                        |
+| label          | 表单标签           | string                  | -                        |
+| minPlaceHolder | 多选项列数         | string                  | "最小值"                 |
+| maxPlaceHolder | 多选项列数         | string                  | "最大值"                 |
+| onClose        | 关闭弹窗           | () => void;             | -                        |
+
+### DROPDOWNITEMTYPE 用法
+
+| 属性                           | 描述                     |
+| ------------------------------ | ------------------------ |
+| DROPDOWNITEMTYPE.RADIO         | 单选类型                 |
+| DROPDOWNITEMTYPE.MULTIPLE      | 多选类型                 |
+| DROPDOWNITEMTYPE.INPUT         | 录入类型                 |
+| DROPDOWNITEMTYPE.MORE_MULTIPLE | 单选、多选、录入组合形式 |
+
+### MULTIPLEOPTIONCOLUMN 用法
+
+| 属性                       | 描述 |
+| -------------------------- | ---- |
+| MULTIPLEOPTIONCOLUMN.TWO   | 双列 |
+| MULTIPLEOPTIONCOLUMN.THREE | 三列 |
+| MULTIPLEOPTIONCOLUMN.FOUR  | 四列 |
+
+### SelectItem 用法
+
+| 属性  | 描述 |
+| ----- | ---- |
+| value | 值   |
+| key   | 标识 |
+
 ## 演示
 
 ### 基础用法

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { EmptyStates, Button } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(
+      <EmptyStates status="404">
+        <Button size="Large" type="Outlined">
+          点击刷新
+        </Button>
+      </EmptyStates>,
+    );
+  });
+});

package/src/components/Icon/Icon.tsx

@@ -2,10 +2,12 @@ import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, TouchableOpacity } from "react-native";
 import { SvgXml } from "react-native-svg";
 import { RedsIcon, IconDefaultProps } from "./interface/index";
-
+import { useThemeColor } from "../ConfigProvider";
 const Icon: React.FC<RedsIcon> = (props) => {
   const { size, fill, onClick, icon } = props || {};
 
+  const themeColor = useThemeColor();
+
   /** icon点击事件 */
   const toggleIcon = useCallback(
     (e: GestureResponderEvent) => {
@@ -16,7 +18,7 @@ const Icon: React.FC<RedsIcon> = (props) => {
 
   /** icon svg 数据 */
   const iconSvg = useMemo(() => {
-    return icon ? (fill ? icon({ size: size!, fill: fill! }) : icon({ size: size! })) : "";
+    return icon ? icon({ size: size!, fill: fill! || themeColor.Fill1 }) : "";
   }, [icon, size, fill]);
 
   return (

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Image } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text, StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    backgroundColor: "#fff",
+    flex: 1,
+  },
+  image: {
+    width: 200,
+    height: 200,
+  },
+});
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(
+      <Image
+        style={styles.image}
+        source={{
+          uri: "https://growth-img.xhscdn.com/ditto/0202cs0o3t4t56f4817641363j5jt6t6122k0ojif30viggdc",
+        }}
+        enableFormat={false}
+      />,
+    );
+  });
+});

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

@@ -0,0 +1,15 @@
+import React, { useCallback } from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { List } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text, StyleSheet } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    const data = [] as any;
+    const renderItem = useCallback(() => null, []);
+    render(<List data={data} renderItem={renderItem} />);
+  });
+});

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

@@ -0,0 +1,13 @@
+import React, { useCallback } from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { NavigationBar } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text, StyleSheet } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<NavigationBar title="标题" />);
+  });
+});

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {});
+});

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

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

package/src/components/PullRefresh/PullRefresh.tsx

@@ -249,7 +249,7 @@ export default function PullRefresh(props: RedsPullRefresh) {
   }, [pan, scrollContent]);
 
   return (
-    <View style={[styles.container, props.refreshLayoutStyle]} {...panResponder.panHandlers} testID="refresh-container">
+    <View style={[styles.container, props.style]} {...panResponder.panHandlers} testID="refresh-container">
       <Animated.View
         // @ts-expect-error
         ref={animatedViewRef}
@@ -261,7 +261,7 @@ export default function PullRefresh(props: RedsPullRefresh) {
             height: props.pullAnimHeight,
             transform: [{ translateY: pan }],
           },
-          props.refreshControlStyle,
+          props.controlStyle,
         ]}
       >
         {/* @ts-ignore */}

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

@@ -15,7 +15,7 @@ export default function PullRefreshDemo() {
       pullAnimHeight={40}
       minPullDistance={50}
       isRefreshing={isRefreshing}
-      refreshLayoutStyle={{ height: 40, backgroundColor: "pink" }}
+      style={{ height: 40, backgroundColor: "pink" }}
     >
       <ScrollView>
         <View style={styles.container}>

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

@@ -10,15 +10,15 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性                | 描述                   | 类型            | 默认值    |
-| ------------------- | ---------------------- | --------------- | --------- |
-| children            | 下拉刷新容器的内容     | React.ReactNode | undefined |
-| pullAnimHeight      | 下拉刷新组件高度       | number          | 0         |
-| minPullDistance     | 触发下拉刷新的最小距离 | number          | 20        |
-| msHoldingTime       | 下拉完成后的停留时间   | number          | 1000      |
-| onRequest           | 下拉执行的请求函数     | () => void      |           |
-| isRefreshing        | 是否是加载数据中       | boolean         | false     |
-| refreshLayoutStyle  | 容器样式               | ViewStyle       |           |
-| refreshControlStyle | rn refreshControl样式  | ViewStyle       |           |
+| 属性            | 描述                   | 类型            | 默认值    |
+| --------------- | ---------------------- | --------------- | --------- |
+| children        | 下拉刷新容器的内容     | React.ReactNode | undefined |
+| pullAnimHeight  | 下拉刷新组件高度       | number          | 0         |
+| minPullDistance | 触发下拉刷新的最小距离 | number          | 20        |
+| msHoldingTime   | 下拉完成后的停留时间   | number          | 1000      |
+| onRequest       | 下拉执行的请求函数     | () => void      |           |
+| isRefreshing    | 是否是加载数据中       | boolean         | false     |
+| style           | 容器样式               | ViewStyle       |           |
+| controlStyle    | refreshControl样式     | ViewStyle       |           |
 
 ### Events

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

@@ -6,8 +6,8 @@ export interface RedsPullRefresh {
   msHoldingTime?: number;
   onRequest?: () => void;
   isRefreshing: boolean;
-  refreshLayoutStyle?: ViewStyle;
-  refreshControlStyle?: ViewStyle;
+  style?: ViewStyle;
+  controlStyle?: ViewStyle;
 }
 
 export interface RedsPullRefreshEvent {}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Sheets } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(
+      <Sheets visible>
+        <Text>内容</Text>
+      </Sheets>,
+    );
+  });
+});

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

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Slider } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  let value = 50;
+
+  const onChange = (newvalue: number) => {
+    value = newvalue;
+  };
+  redsBench("base", async () => {
+    render(<Slider value={value} onChange={onChange} />);
+  });
+});

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Skeleton } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text, Dimensions } from "react-native";
+
+const { width: deviceWidth } = Dimensions.get("window");
+
+const cardWidth = (deviceWidth - 3 * 5) / 2;
+const cardHeight = (cardWidth * 238) / 180;
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(
+      <>
+        <Skeleton width={cardWidth} height={cardHeight} />
+        <Skeleton width={160} height={12} style={{ marginLeft: 10, marginTop: 10 }} />
+        <Skeleton width={160} height={12} style={{ marginLeft: 10, marginTop: 10 }} />
+        <Skeleton width={80} height={12} style={{ marginLeft: 10, marginTop: 36 }} />
+      </>,
+    );
+  });
+});

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

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { Switch } from "@xhs/spectrum";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text, Dimensions } from "react-native";
+
+describe("render", () => {
+  const switchValue = true;
+  redsBench("base", async () => {
+    render(<Switch value={switchValue} onChange={(value) => value} />);
+  });
+});

package/src/components/TabBar/TabBar.tsx

@@ -34,10 +34,10 @@ const TabBar = (props: RedsTabBar) => {
    */
   const getTextClass = (item: DataType) => {
     return item?.iconProps?.icon
-      ? props.activeTab === item.key
+      ? props.active === item.key
         ? styles.activeIconText
         : styles.iconText
-      : props.activeTab === item.key
+      : props.active === item.key
         ? styles.activeText
         : styles.text;
   };
@@ -48,7 +48,7 @@ const TabBar = (props: RedsTabBar) => {
    */
   const getTextColor = (item: DataType) => {
     return {
-      color: props.activeTab === item.key ? item.activeColor || "rgba(0,0,0)" : item.normalColor || "rgba(0,0,0,0.45)",
+      color: props.active === item.key ? item.activeColor || "rgba(0,0,0)" : item.normalColor || "rgba(0,0,0,0.45)",
     };
   };
 
@@ -56,7 +56,7 @@ const TabBar = (props: RedsTabBar) => {
    * 计算Icon颜色
    */
   const getIconColor = (item: DataType) => {
-    return (props.activeTab === item.key ? item.activeColor : item.normalColor) || item?.iconProps?.fill;
+    return (props.active === item.key ? item.activeColor : item.normalColor) || item?.iconProps?.fill;
   };
 
   /**

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

@@ -196,7 +196,7 @@ export default function App() {
       <Desc>text类型</Desc>
       <TabBar
         list={data}
-        activeTab={activeTab1}
+        active={activeTab1}
         onChange={(key) => {
           setActiveTab1(key);
         }}
@@ -207,7 +207,7 @@ export default function App() {
       <Desc>icon类型</Desc>
       <TabBar
         list={iconData}
-        activeTab={activeTab2}
+        active={activeTab2}
         onChange={(key) => {
           setActiveTab2(key);
         }}
@@ -218,7 +218,7 @@ export default function App() {
       <Desc>text + badge 类型</Desc>
       <TabBar
         list={badgeData}
-        activeTab={activeTab3}
+        active={activeTab3}
         onChange={(key) => {
           setActiveTab3(key);
         }}
@@ -230,7 +230,7 @@ export default function App() {
       <Desc>icon + badge 类型</Desc>
       <TabBar
         list={badgeIconData}
-        activeTab={activeTab4}
+        active={activeTab4}
         onChange={(key) => {
           setActiveTab4(key);
         }}
@@ -242,7 +242,7 @@ export default function App() {
       <Desc>自定义类型</Desc>
       <TabBar
         list={iconData}
-        activeTab={activeTab5}
+        active={activeTab5}
         onChange={(key) => {
           setActiveTab5(key);
         }}
@@ -262,7 +262,7 @@ export default function App() {
       <Desc>自定义文字类型</Desc>
       <TabBar
         list={customTextData}
-        activeTab={activeTab6}
+        active={activeTab6}
         onChange={(key) => {
           setActiveTab6(key);
         }}