@xhsreds/reds-rn-next 0.0.23 → 0.1.0

package/src/components/Empty/styles.ts

@@ -0,0 +1,29 @@
+import { typography } from "@xhs/reds-token-next";
+import { StyleSheet } from "react-native";
+import { useThemeColor } from "../ConfigProvider";
+
+const createStyles = () => {
+  const themeColor = useThemeColor("Empty");
+  const styles = StyleSheet.create({
+    container: {
+      alignItems: "center",
+      paddingHorizontal: 48,
+      paddingVertical: 24,
+    },
+    description: {
+      marginTop: 16,
+    },
+    descriptionText: {
+      fontSize: typography.B2LooseFontSize,
+      fontWeight: typography.B2LooseFontWeight,
+      lineHeight: typography.B2LineHeight,
+      color: themeColor.Description,
+    },
+    action: {
+      marginTop: 20,
+    },
+  });
+  return styles;
+};
+
+export default createStyles;

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

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

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

@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest";
+import { render, fireEvent, userEvent } from "@testing-library/react-native";
+import "@testing-library/react-native/extend-expect";
+import { Pressable, Text, View } from "react-native";
+import Empty from "../index";
+
+describe("Empty", () => {
+  it("renders default title and image", () => {
+    const wrapper = render(<Empty />);
+    const titleElement = wrapper.getByText("暂无数据");
+    expect(titleElement).toBeTruthy();
+  });
+  it("action", () => {
+    const wrapper = render(
+      <Empty
+        action={
+          <Pressable>
+            <Text>按钮</Text>
+          </Pressable>
+        }
+      />,
+    );
+    const titleElement = wrapper.getByText("暂无数据");
+    expect(titleElement).toBeTruthy();
+  });
+});

package/src/components/Image/Image.tsx

@@ -0,0 +1,121 @@
+import React, { useState, forwardRef, memo, ForwardRefRenderFunction, useEffect } from "react";
+import {
+  View,
+  Image as RNImage,
+  GestureResponderEvent,
+  ImageProps,
+  TouchableOpacity,
+  ImageLoadEventData,
+  NativeSyntheticEvent,
+  ImageErrorEventData,
+  ImageProgressEventDataIOS,
+} from "react-native";
+import { RedsImage, ImageDefaultProps, IMAGE_STATUS, TErrorStyle, TLoadStyle } from "./interface/index";
+import styles from "./styles";
+import { useImage } from "./hook";
+import CircularProgress from "./CircularProgress";
+
+const Image = forwardRef<RNImage, RedsImage & Omit<ImageProps, keyof RedsImage>>(
+  ({ src, source: _source, width, height, borderRadius, errorStyle, loadStyle, style, ...props }, ref) => {
+    const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
+    const [progress, setProgress] = useState(0);
+
+    const { source, aveColor, blurSource } = useImage({
+      src,
+      source: _source,
+      errorStyle,
+      loadStyle,
+    });
+
+    const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
+      const {
+        nativeEvent: { total, loaded },
+      } = e;
+      if (total) {
+        setProgress(((loaded / total) * 100) | 0);
+      }
+      props.onProgress?.(e);
+    };
+    const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
+      props.onLoad?.(e);
+      setImageStatus(IMAGE_STATUS.LOADED);
+    };
+    const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+      props.onError?.(e);
+      setImageStatus(errorStyle === TErrorStyle.ERROR ? IMAGE_STATUS.LOADERROR : IMAGE_STATUS.RELOAD);
+    };
+    const onReload = (e: GestureResponderEvent) => {
+      setImageStatus(IMAGE_STATUS.HIDE);
+      props.onReload?.(e);
+      setTimeout(() => {
+        setImageStatus(IMAGE_STATUS.LOADING);
+      });
+    };
+
+    return (
+      <View style={{ borderRadius, height, width, ...(style as {}) }} ref={ref}>
+        {imageStatus !== IMAGE_STATUS.HIDE && (
+          <RNImage
+            {...props}
+            source={source}
+            onLoad={onLoad}
+            onProgress={onProgress}
+            onError={onError}
+            style={{
+              width,
+              height,
+              borderRadius,
+              opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
+            }}
+          ></RNImage>
+        )}
+        {imageStatus === IMAGE_STATUS.LOADING && (
+          <View
+            style={{
+              width,
+              height,
+              borderRadius,
+              ...styles.loadingContainer,
+              backgroundColor: loadStyle === TLoadStyle.AVE ? aveColor : styles.loadingContainer.backgroundColor,
+            }}
+          >
+            {loadStyle === TLoadStyle.BLUR && (
+              <RNImage
+                source={blurSource}
+                style={{
+                  width,
+                  height,
+                  borderRadius,
+                }}
+              ></RNImage>
+            )}
+            {loadStyle === TLoadStyle.LOADING && <CircularProgress progress={progress}></CircularProgress>}
+          </View>
+        )}
+        {(imageStatus === IMAGE_STATUS.LOADERROR || imageStatus === IMAGE_STATUS.RELOAD) && (
+          <TouchableOpacity
+            activeOpacity={1}
+            onPress={(e) => {
+              onReload(e);
+            }}
+            style={{ width, height, borderRadius, ...styles.loadingContainer }}
+          >
+            <RNImage
+              style={{ width: 40, height: 40 }}
+              source={{
+                uri:
+                  imageStatus === IMAGE_STATUS.RELOAD
+                    ? "https://picasso-static.xiaohongshu.com/fe-platform/06ae169b310c2926e541903b828486a80fcac404.png"
+                    : "https://picasso-static.xiaohongshu.com/fe-platform/76fee5bba4ce3bbf3e9ff5fe1935b737bb27625a.png",
+              }}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  },
+);
+
+Image.defaultProps = ImageDefaultProps;
+
+export default memo(Image);

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

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useState } from "react";
 import { View, Text, StyleSheet, FlatList, ScrollView, Image as RNImage } from "react-native";
-import { Image, TErrorStyle, TLoadStyle } from "@xhs/reds-rn-next";
+import { Image, ImageType } from "@xhs/reds-rn-next";
+const { TErrorStyle, TLoadStyle } = ImageType;
 
 const Desc = ({ children = "" }) => {
   return <Text>{children}</Text>;

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

@@ -10,19 +10,19 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性          | 描述                              | 类型                                 | 默认值             |
-| ------------- | --------------------------------- | ------------------------------------ | ------------------ |
-| src           | 图片路径                          | string                               |                    |
-| source        | 图片 source ，与原生 image 相同。 | ImageSourcePropType                  |                    |
-| width         | 图片宽度                          | number | DimensionValue         |                    |
-| height        | 图片高度                          | number | DimensionValue         |                    |
-| border-radius | 图片圆角                          | number | AnimatableNumericValue |                    |
-| load-style    | 加载风格                          | TLoadStyle                           | TLoadStyle.LOADING |
-| load-mode     | 加载方式                          | TLoadMode                            | TLoadMode.LAZY     |
-| error-style   | 失败时展示样式                    | TErrorStyle                          | TErrorStyle.ERROR  |
+| 属性         | 描述                              | 类型                                 | 默认值             |
+| ------------ | --------------------------------- | ------------------------------------ | ------------------ |
+| src          | 图片路径                          | string                               |                    |
+| source       | 图片 source ，与原生 image 相同。 | ImageSourcePropType                  |                    |
+| width        | 图片宽度                          | number | DimensionValue         |                    |
+| height       | 图片高度                          | number | DimensionValue         |                    |
+| borderRadius | 图片圆角                          | number | AnimatableNumericValue |                    |
+| loadStyle    | 加载风格                          | TLoadStyle                           | TLoadStyle.LOADING |
+| loadMode     | 加载方式                          | TLoadMode                            | TLoadMode.LAZY     |
+| errorStyle   | 失败时展示样式                    | TErrorStyle                          | TErrorStyle.ERROR  |
 
 ### Events
 
-| 事件   | 描述           | 类型                               | 默认值 |
-| ------ | -------------- | ---------------------------------- | ------ |
-| reload | 重新加载时触发 | (v: GestureResponderEvent) => void |        |
+| 事件     | 描述           | 类型                               | 默认值 |
+| -------- | -------------- | ---------------------------------- | ------ |
+| onReload | 重新加载时触发 | (v: GestureResponderEvent) => void |        |

package/src/components/Image/index.ts

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

package/src/components/Image/index.tsx

@@ -53,11 +53,10 @@ const Image = forwardRef<RNImage, RedsImage & Omit<ImageProps, keyof RedsImage>>
     };
 
     return (
-      <View style={{ borderRadius, height, width, ...(style as {}) }}>
+      <View style={{ borderRadius, height, width, ...(style as {}) }} ref={ref}>
         {imageStatus !== IMAGE_STATUS.HIDE && (
           <RNImage
             {...props}
-            ref={ref}
             source={source}
             onLoad={onLoad}
             onProgress={onProgress}

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

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState, forwardRef } from "react";
 import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
-import { Popover, Button, RedsPopover } from "@xhs/reds-rn-next";
+import { Popover, Button, PopoverType } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
   container: {
@@ -62,7 +62,7 @@ export default function App() {
 
       <Br />
 
-      <Popover content={placement} placement={placement as RedsPopover["placement"]} visible>
+      <Popover content={placement} placement={placement as PopoverType.RedsPopover["placement"]} visible>
         <Button>{"气泡位置"}</Button>
       </Popover>
     </View>

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

@@ -8,21 +8,21 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性                 | 描述                   | 类型                                                                                                | 默认值    |
-| -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------- | --------- |
-| visible              | 是否显示气泡           | boolean                                                                                             | undefined |
-| placement            | 气泡方向               | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top       |
-| content              | 弹出内容               | string                                                                                              |           |
-| opacity              | 遮罩透明度             | number                                                                                              | 0         |
-| mode                 | 主题色                 | "light" | "dark"                                                                               |           |
-| trigger              | 触发方式               | "click" | "touch"                                                                              | click     |
-| z-index              | 层级                   | number                                                                                              | 1000      |
-| close-on-click-again | 再次点击关闭           | boolean                                                                                             | true      |
-| children             | popover 作用的目标节点 | ReactNode                                                                                           |           |
+| 属性              | 描述                   | 类型                                                                                                | 默认值    |
+| ----------------- | ---------------------- | --------------------------------------------------------------------------------------------------- | --------- |
+| visible           | 是否显示气泡           | boolean                                                                                             | undefined |
+| placement         | 气泡方向               | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top       |
+| content           | 弹出内容               | string                                                                                              |           |
+| opacity           | 遮罩透明度             | number                                                                                              | 0         |
+| mode              | 主题色                 | "light" | "dark"                                                                               |           |
+| trigger           | 触发方式               | "click" | "touch"                                                                              | click     |
+| zIndex            | 层级                   | number                                                                                              | 1000      |
+| closeOnClickAgain | 再次点击关闭           | boolean                                                                                             | true      |
+| children          | popover 作用的目标节点 | ReactNode                                                                                           |           |
 
 ### Events
 
-| 事件           | 描述             | 类型                     | 默认值 |
-| -------------- | ---------------- | ------------------------ | ------ |
-| click-mask     | 点击遮罩层时触发 | (evnet: Event) => void   |        |
-| visible-change | 点击遮罩层时触发 | (value: boolean) => void |        |
+| 事件            | 描述             | 类型                     | 默认值 |
+| --------------- | ---------------- | ------------------------ | ------ |
+| onClickMask     | 点击遮罩层时触发 | (evnet: Event) => void   |        |
+| onVisibleChange | 点击遮罩层时触发 | (value: boolean) => void |        |

package/src/components/Popover/index.ts

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

package/src/components/Popover/styles.ts

@@ -0,0 +1,24 @@
+import { alwaysColor } from "@xhs/reds-token-next";
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  PopoverContainer: {
+    width: 40,
+    height: 24,
+    borderRadius: 15,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  thumb: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: alwaysColor.White,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    left: 0,
+  },
+});
+
+export default styles;

package/src/components/Result/Result.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { View, Text, Image } from "react-native";
+import { RedsResult, ResultDefaultProps } from "./interface/index";
+import createStyles from "./styles";
+import { defaultIcon } from "./hooks/useDefaultIcon";
+
+const Result = (props: RedsResult) => {
+  const { type, title, description, action, image } = { ...(ResultDefaultProps as RedsResult), ...props };
+  const styles = createStyles();
+  const defaultTitle = title || defaultIcon[type || "Success"]?.title;
+  const defaultImage = image || (
+    <Image style={{ height: 52, width: 52 }} source={{ uri: defaultIcon[type || "Success"]?.image }}></Image>
+  );
+
+  return (
+    <>
+      <View style={styles.container}>
+        <View>{defaultImage}</View>
+        <View style={styles.title}>
+          <Text style={styles.titleText}>{defaultTitle}</Text>
+        </View>
+        {description && (
+          <View style={styles.description}>
+            <Text style={styles.descriptionText}>{description}</Text>
+          </View>
+        )}
+        {action && <View style={styles.action}>{action}</View>}
+      </View>
+    </>
+  );
+};
+
+Result.defaultProps = ResultDefaultProps;
+
+export default Result;

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { View, Text, ScrollView, Image } from "react-native";
+import { Button, Result } from "@xhs/reds-rn-next";
+
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
+
+const ActionButton = () => {
+  return (
+    <View style={{ flexDirection: "row" }}>
+      <Button variant={"outline"}>次要操作</Button>
+      <Button variant={"outline"} type={"primary"} style={{ marginLeft: 12 }}>
+        主要操作
+      </Button>
+    </View>
+  );
+};
+
+const ImageCustom = () => {
+  return <Image source={{ uri: "https://img.yzcdn.cn/vant/cat.jpeg" }} style={{ height: 52, width: 52 }} />;
+};
+
+export default function App() {
+  return (
+    <ScrollView>
+      <Desc>基础用法</Desc>
+      <Result></Result>
+      <Result type={"Info"}></Result>
+      <Result type={"Warning"}></Result>
+      <Br />
+      <Desc>描述</Desc>
+      <Result description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"></Result>
+      <Result
+        type={"Info"}
+        description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"
+      ></Result>
+      <Result
+        type={"Warning"}
+        description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"
+      ></Result>
+      <Br />
+      <Desc>操作按钮</Desc>
+      <Result action={<ActionButton />}></Result>
+      <Result type={"Info"} action={<ActionButton />}></Result>
+      <Result type={"Warning"} action={<ActionButton />}></Result>
+      <Br />
+      <Desc>自定义</Desc>
+      <Result
+        title={"我是自定义标题"}
+        description={"我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"}
+        action={<ActionButton />}
+        image={<ImageCustom />}
+      ></Result>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,21 @@
+import BaseDemo from "!!raw-loader!../demo/index.tsx";
+
+## 演示
+
+### 基础用法
+
+::BaseDemo::
+
+## API
+
+### Props
+
+| 属性        | 描述         | 类型                                     | 默认值  |
+| ----------- | ------------ | ---------------------------------------- | ------- |
+| type        | 类型         | "Success" | "Warning" | "Info" | Success |
+| title       | 标题         | string                                   |         |
+| description | 描述         | string                                   |         |
+| action      | 底部操作按钮 | ReactNode                                |         |
+| image       | 图片         | ReactNode                                |         |
+
+### Events

package/src/components/Result/hooks/useDefaultIcon.ts

@@ -0,0 +1,21 @@
+import { Image } from "react-native";
+// @ts-nocheck
+import SuccessIcon from "./icons/success.png";
+import WarningIcon from "./icons/warning.png";
+import InfoIcon from "./icons/info.png";
+// @ts-nocheck
+
+export const defaultIcon = {
+  Success: {
+    title: "成功提示",
+    image: "https://picasso-static.xiaohongshu.com/fe-platform/c002a29a531d29939a0869bee6537710478a0d10.png",
+  },
+  Warning: {
+    title: "警告",
+    image: "https://picasso-static.xiaohongshu.com/fe-platform/63901d54ceaf53ce6c268139528b339e0c7ace38.png",
+  },
+  Info: {
+    title: "处理中",
+    image: "https://picasso-static.xiaohongshu.com/fe-platform/c403af64f3b3e5e187812d07eb1207add1d8558e.png",
+  },
+};

package/src/components/Result/index.ts

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

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

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+export interface RedsResult {
+  type?: "Success" | "Warning" | "Info";
+  title?: string;
+  description?: string;
+  action?: ReactNode;
+  image?: ReactNode;
+}
+
+export const ResultDefaultProps = {
+  type: "Success",
+  title: "",
+  description: "",
+};

package/src/components/Result/styles.ts

@@ -0,0 +1,38 @@
+import { typography } from "@xhs/reds-token-next";
+import { StyleSheet } from "react-native";
+import { useThemeColor } from "../ConfigProvider";
+
+const createStyles = () => {
+  const themeColor = useThemeColor("Result");
+  const styles = StyleSheet.create({
+    container: {
+      alignItems: "center",
+      paddingHorizontal: 48,
+      paddingVertical: 24,
+    },
+    title: {
+      marginTop: 12,
+    },
+    titleText: {
+      fontSize: typography.B1FontSize,
+      fontWeight: typography.B1FontWeight,
+      lineHeight: typography.B1LineHeight,
+      color: themeColor.Title,
+    },
+    description: {
+      marginTop: 8,
+    },
+    descriptionText: {
+      fontSize: typography.C2FontSize,
+      fontWeight: typography.C2FontWeight,
+      lineHeight: typography.C2LineHeight,
+      color: themeColor.Description,
+    },
+    action: {
+      marginTop: 24,
+    },
+  });
+  return styles;
+};
+
+export default createStyles;

package/src/components/Result/test/Demo.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { View, Text, ScrollView, Image, TouchableWithoutFeedback } from "react-native";
+import { Button } from "@xhs/reds-rn-next";
+import Result from "../Result";
+
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
+
+const ActionButton = () => {
+  return (
+    <View style={{ flexDirection: "row" }}>
+      <Button variant={"outline"}>次要操作</Button>
+      <Button variant={"outline"} type={"primary"} style={{ marginLeft: 12 }}>
+        主要操作
+      </Button>
+    </View>
+  );
+};
+
+const ImageCustom = () => {
+  return <Image source={{ uri: "https://img.yzcdn.cn/vant/cat.jpeg" }} style={{ height: 52, width: 52 }} />;
+};
+
+export default function Demo() {
+  const [title, setTitle] = useState("标题11");
+  const [type, setType] = useState<"Success" | "Info" | "Warning">("Success");
+  const [image, setImage] = useState(<></>);
+  const onPress = () => {
+    setTitle("标题22");
+    setType("Warning");
+    setImage(<Image source={{ uri: "https://example.com/new-image.png" }}></Image>);
+  };
+  return (
+    <ScrollView>
+      <TouchableWithoutFeedback testID="123" onPress={onPress}>
+        <Text>测试组件</Text>
+      </TouchableWithoutFeedback>
+      <Desc>基础用法</Desc>
+      {
+        // @ts-ignore
+        <Result type={type}></Result>
+      }
+      <Result type={"Info"}></Result>
+      <Result type={"Warning"}></Result>
+      <Br />
+      <Desc>描述</Desc>
+      <Result description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"></Result>
+      <Result
+        type={"Info"}
+        description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"
+      ></Result>
+      <Result
+        type={"Warning"}
+        description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"
+      ></Result>
+      <Br />
+      <Desc>操作按钮</Desc>
+      <Result action={<ActionButton />}></Result>
+      <Result type={"Info"} action={<ActionButton />}></Result>
+      <Result type={"Warning"} action={<ActionButton />}></Result>
+      <Br />
+      <Desc>自定义</Desc>
+      <Result
+        title={"test"}
+        description={"我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"}
+        action={<ActionButton />}
+        image={<ImageCustom />}
+      ></Result>
+      <Result
+        type={type}
+        title={title}
+        description={"我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"}
+        action={<ActionButton />}
+        image={image}
+      ></Result>
+    </ScrollView>
+  );
+}

package/src/components/Result/test/index.bench.tsx

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