@xhsreds/reds-rn-next 0.0.23 → 0.1.0

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,72 @@
+import React, { useRef, useEffect, useCallback, useLayoutEffect } from "react";
+import { RedsCollapse, CollapseDefaultProps } from "./interface/index";
+import { CollapseContext } from "./hooks/useCollapseContext";
+
+const Collapse = (props: RedsCollapse) => {
+  const {
+    activeValue,
+    accordion,
+    defaultActiveValue,
+    onChange,
+    children = null,
+  } = {
+    ...(CollapseDefaultProps as RedsCollapse),
+    ...props,
+  } as RedsCollapse;
+  const activeValueInnel = useRef<Array<string | number>>([]);
+  // 新增某个 active key
+  const addActiveValue = useCallback(
+    (key: string | number) => {
+      if (accordion) {
+        activeValueInnel.current = [key];
+      } else {
+        if (!activeValueInnel.current.includes(key)) activeValueInnel.current = [...activeValueInnel.current, key];
+      }
+    },
+    [accordion],
+  );
+
+  // 移除某个 active key
+  const removeActiveValue = useCallback(
+    (key: string | number) => {
+      if (accordion) {
+        activeValueInnel.current = [];
+      } else {
+        if (activeValueInnel.current.includes(key))
+          activeValueInnel.current = activeValueInnel.current.filter((item) => item !== key);
+      }
+    },
+    [accordion],
+  );
+
+  // 是否展开
+  const isActiveValue = useCallback(
+    (key: string | number) => activeValueInnel.current.includes(key),
+    [activeValue, defaultActiveValue],
+  );
+
+  // 默认值
+  useLayoutEffect(() => {
+    activeValueInnel.current = activeValue || [];
+    if (defaultActiveValue?.length) {
+      activeValueInnel.current = defaultActiveValue;
+    }
+  }, [activeValue, defaultActiveValue]);
+
+  // 触发onChange
+  useEffect(() => {
+    if (onChange) {
+      onChange(activeValueInnel.current);
+    }
+  }, [activeValueInnel, onChange]);
+
+  return (
+    <CollapseContext.Provider value={{ addActiveValue, removeActiveValue, isActiveValue }}>
+      {children}
+    </CollapseContext.Provider>
+  );
+};
+
+Collapse.defaultProps = { ...(CollapseDefaultProps as RedsCollapse) };
+
+export default Collapse;

package/src/components/Collapse/Item/Item.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useRef, useEffect } from "react";
+import { View, Text, TouchableWithoutFeedback, Animated, Easing, LayoutChangeEvent } from "react-native";
+import { IItem, ItemDefaultProps } from "./interface/index";
+import createStyles from "./styles";
+import { CollapseContext } from "../hooks/useCollapseContext";
+
+const Item = ({ value, title, lazyRender, children, onClick }: IItem) => {
+  const styles = createStyles();
+  const { addActiveValue, isActiveValue, removeActiveValue } = React.useContext(CollapseContext);
+  const [visible, setVisible] = useState(false);
+
+  const [shouldMount, setShouldMount] = useState(!lazyRender);
+  const firstRender = useRef(false);
+
+  const [contentHeight, setContentHeight] = useState(0);
+  const [getContentHeight, setGetContentHeight] = useState(true);
+  const heightAnimation = useRef(new Animated.Value(0)).current;
+
+  const setFirstRenderTag = () => {
+    firstRender.current = true;
+    setShouldMount(true);
+  };
+
+  useEffect(() => {
+    if (!getContentHeight) {
+      setGetContentHeight(true);
+    }
+  }, [children]);
+
+  useEffect(() => {
+    const isActive = isActiveValue?.(value);
+    setVisible(isActive || false);
+    if (!firstRender.current && isActive) {
+      setFirstRenderTag();
+    }
+  }, [isActiveValue]);
+
+  useEffect(() => {
+    Animated.timing(heightAnimation, {
+      toValue: visible ? contentHeight : 0,
+      duration: 100,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start();
+  }, [visible, contentHeight]);
+
+  const onPress = () => {
+    if (isActiveValue?.(value)) {
+      removeActiveValue?.(value);
+    } else {
+      if (!firstRender.current) {
+        setFirstRenderTag();
+      }
+      addActiveValue?.(value);
+    }
+    setVisible(isActiveValue?.(value) || false);
+    onClick?.(value);
+  };
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    setContentHeight(event?.nativeEvent?.layout?.height || 0);
+    setGetContentHeight(false);
+  };
+
+  return (
+    <View>
+      <TouchableWithoutFeedback onPress={onPress} testID={`reds-collapse-item-title-${value}`}>
+        <View style={styles.header}>
+          <Text style={styles.title}>{title}</Text>
+        </View>
+      </TouchableWithoutFeedback>
+      {shouldMount && (
+        <Animated.View
+          testID={`reds-collapse-item-content-${value}`}
+          style={{
+            height: heightAnimation,
+          }}
+        >
+          {children}
+        </Animated.View>
+      )}
+      {getContentHeight && (
+        <Animated.View
+          testID={`r2eds-collapse-item-content-${value}`}
+          onLayout={handleLayout}
+          style={{
+            position: "absolute",
+            top: -99999,
+            height: "auto",
+            minHeight: "auto",
+            maxHeight: "auto",
+          }}
+        >
+          {children}
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+Item.defaultProps = ItemDefaultProps;
+
+export default Item;

package/src/components/Collapse/Item/interface/index.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+export interface IItem {
+  value: string | number;
+  title?: string;
+  lazyRender?: boolean;
+  children: ReactNode;
+  onClick?: (value: string | number) => void;
+}
+
+export interface IItemEvent {
+  (e: "change", value: string | number): any;
+}
+
+export const ItemDefaultProps: IItem = {
+  value: "",
+  title: "",
+  lazyRender: true,
+  children: null,
+  onClick: () => {},
+};

package/src/components/Collapse/Item/styles.ts

@@ -0,0 +1,27 @@
+import { typography } from "@xhs/reds-token-next";
+import { StyleSheet } from "react-native";
+import { useThemeColor } from "../../ConfigProvider/hooks/themeToken/useThemeToken";
+
+const createStyles = () => {
+  const themeColor = useThemeColor();
+  return StyleSheet.create({
+    header: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+    },
+    title: {
+      color: themeColor.Title,
+      fontSize: typography.B1FontSize,
+      fontWeight: typography.B1FontWeight,
+      lineHeight: typography.B1LineHeight,
+    },
+    content: {
+      paddingTop: 0,
+      paddingBottom: 12,
+      paddingLeft: 16,
+      paddingRight: 16,
+    },
+  });
+};
+
+export default createStyles;

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

@@ -0,0 +1,60 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import Collapse from "../Collapse";
+import CollapseItem from "../Item/Item";
+
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
+
+export default function App() {
+  const handleClick = (value: string | number) => {
+    console.log("Collapse clicked", value);
+  };
+  const handleClick2 = (value: string | number) => {
+    console.log("Collapse clicked", value);
+  };
+  const handleChange = (activeValue: (string | number)[]) => {
+    console.log("Collapse value changed to", activeValue);
+  };
+  return (
+    <View>
+      <Desc>基础用法</Desc>
+      <Collapse onChange={handleChange}>
+        <CollapseItem title="标题1" value={"1"} onClick={handleClick}>
+          <Text>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题2" value={"2"}>
+          <Text>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+      </Collapse>
+      <Br />
+      <Desc>手风琴模式</Desc>
+      <Collapse accordion>
+        <CollapseItem title="标题3" value={"3"}>
+          <Text>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题4" value={"4"}>
+          <Text>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</Text>
+        </CollapseItem>
+      </Collapse>
+      <Br />
+      <Desc>懒加载</Desc>
+      <Collapse activeValue={["3"]}>
+        <CollapseItem title="标题5" value={"5"} lazyRender={false}>
+          <Text>测试数据测试数据测试数据测试数据</Text>
+        </CollapseItem>
+        <CollapseItem title="标题6" value={"6"} onClick={handleClick2}>
+          <Text>测试数据测试数据</Text>
+        </CollapseItem>
+      </Collapse>
+    </View>
+  );
+}

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

@@ -0,0 +1,24 @@
+import BaseDemo from "!!raw-loader!../demo/index.tsx";
+
+## 演示
+
+### 基础用法
+
+::BaseDemo::
+
+## API
+
+### Props
+
+| 属性               | 描述                 | 类型            | 默认值 |
+| ------------------ | -------------------- | --------------- | ------ |
+| activeValue        | 当前面板选中值       | ActiveValueType | `[]`   |
+| accordion          | 是否开启手风琴模式   | boolean         | false  |
+| defaultActiveValue | 初始化选中面板的 key | ActiveValueType | `[]`   |
+| children           | 面板内容             | ReactNode       | `null` |
+
+### Events
+
+| 事件     | 描述           | 类型                                   | 默认值 |
+| -------- | -------------- | -------------------------------------- | ------ |
+| onChange | 切换面板时触发 | (activeValue: ActiveValueType) => void |        |

package/src/components/Collapse/hooks/useCollapseContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { ICollapseContext } from "../interface";
+
+export const CollapseContext = createContext<ICollapseContext>({
+  isActiveValue: () => false,
+  addActiveValue: () => {},
+  removeActiveValue: () => {},
+});

package/src/components/Collapse/index.ts

@@ -0,0 +1,4 @@
+import Collapse from "./Collapse";
+import CollapseItem from "./Item/Item";
+
+export { Collapse, CollapseItem };

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

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+type ActiveValueType = Array<string | number>;
+
+export interface ICollapseContext {
+  isActiveValue?: (key: string | number) => boolean;
+  addActiveValue?: (key: string | number) => void;
+  removeActiveValue?: (key: string | number) => void;
+  activeValue?: Array<string | number>;
+}
+export interface RedsCollapse {
+  activeValue?: ActiveValueType;
+  accordion?: boolean;
+  defaultActiveValue?: ActiveValueType;
+  onChange?: (activeValue: ActiveValueType) => void;
+  children: ReactNode;
+}
+
+export interface RedsCollapseEvent {}
+export const CollapseDefaultProps = {
+  activeValue: [],
+  accordion: false,
+  defaultActiveValue: [],
+  children: null,
+};

package/src/components/Collapse/test/demo.tsx

@@ -0,0 +1,62 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import Collapse from "../Collapse";
+import CollapseItem from "../Item/Item";
+import { CollapseContext } from "../hooks/useCollapseContext";
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
+
+export default function App() {
+  const { addActiveValue, isActiveValue, removeActiveValue } = { ...React.useContext(CollapseContext) };
+  const isActive = isActiveValue?.("1");
+  const handleClick = (value: number | string) => {
+    console.log("Collapse clicked", value);
+  };
+  const handleClick2 = (value: number | string) => {
+    console.log("Collapse clicked", value);
+  };
+  const handleChange = (activeValue: (string | number)[]) => {
+    console.log("Collapse value changed to", activeValue);
+  };
+  return (
+    <View>
+      <Desc>基础用法</Desc>
+      <Collapse onChange={handleChange} defaultActiveValue={["1"]}>
+        <CollapseItem title="标题1" value={"1"} onClick={handleClick}>
+          <Text>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题2" value={"2"} onClick={handleClick}>
+          <Text>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+      </Collapse>
+      <Br />
+      <Desc>手风琴模式</Desc>
+      <Collapse accordion>
+        <CollapseItem title="标题3" value={"3"}>
+          <Text>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题4" value={"4"}>
+          <Text>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</Text>
+        </CollapseItem>
+      </Collapse>
+      <Br />
+      <Desc>懒加载</Desc>
+      <Collapse activeValue={["3"]}>
+        <CollapseItem title="标题5" value={"5"} lazyRender={false}>
+          <Text>测试数据测试数据测试数据测试数据</Text>
+        </CollapseItem>
+        <CollapseItem title="标题6" value={"6"} onClick={handleClick2}>
+          <Text>测试数据测试数据</Text>
+        </CollapseItem>
+      </Collapse>
+    </View>
+  );
+}

package/src/components/Collapse/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 Collapse from "../Collapse";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<Collapse></Collapse>);
+  });
+});

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

@@ -0,0 +1,61 @@
+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 { Collapse, CollapseItem } from "@xhs/reds-rn-next";
+import Demo from "./demo";
+
+describe("Collapse", () => {
+  it(":wrapper", async () => {
+    const wrapper = render(<Demo />);
+    const title1 = await wrapper.findByTestId("reds-collapse-item-title-1");
+    expect(title1).toBeTruthy();
+    expect(title1.children[0].props.children).toBe("标题1");
+    const content1 = await wrapper.findByTestId("reds-collapse-item-content-1");
+    expect(content1.children[0].props.children).toBe(
+      "测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据",
+    );
+    await fireEvent(title1.children[0], "press");
+    const content2 = await wrapper.findByTestId("reds-collapse-item-content-1");
+    expect(content2.children[0].props.children).toBe(
+      "测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据",
+    );
+    await fireEvent(title1.children[0], "press");
+    const content2remove = await wrapper.findByTestId("reds-collapse-item-content-1");
+    expect(content2remove.children[0].props.children).toBe(
+      "测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据",
+    );
+  });
+  it(":wrapper2", async () => {
+    const wrapper = render(<Demo />);
+    const title2 = await wrapper.findByTestId("reds-collapse-item-title-2");
+    expect(title2).toBeTruthy();
+    expect(title2.children[0].props.children).toBe("标题2");
+    await fireEvent(title2.children[0], "press");
+    const content2 = await wrapper.findByTestId("reds-collapse-item-content-2");
+    expect(content2.children[0].props.children).toBe(
+      "测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据",
+    );
+    await fireEvent(title2.children[0], "press");
+    const content2remove = await wrapper.findByTestId("reds-collapse-item-content-2");
+    expect(content2remove.children[0].props.children).toBe(
+      "测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据",
+    );
+  });
+  it(":wrapper3", async () => {
+    const wrapper = render(<Demo />);
+    const title3 = await wrapper.findByTestId("reds-collapse-item-title-3");
+    expect(title3).toBeTruthy();
+    expect(title3.children[0].props.children).toBe("标题3");
+    await fireEvent(title3.children[0], "press");
+    const content3 = await wrapper.findByTestId("reds-collapse-item-content-3");
+    expect(content3.children[0].props.children).toBe(
+      "测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据",
+    );
+    await fireEvent(title3.children[0], "press");
+    const content3remove = await wrapper.findByTestId("reds-collapse-item-content-3");
+    expect(content3remove.children[0].props.children).toBe(
+      "测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据",
+    );
+  });
+});

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

@@ -10,13 +10,13 @@ import BaseDemo from "!!raw-loader!../demo/base.tsx";
 
 ### Props
 
-| 属性       | 描述                            | 类型         | 默认值                                                                                           |
-| ---------- | ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------ |
-| id         | 主题 ID                         | string       | root                                                                                             |
-| parent-id  | 父级主题 ID                     | string       | root                                                                                             |
-| theme      | 主题定制                        | IThemeConfig | `{"colorMode":"light","inherit":true,"token":{"lightColor":{},"darkColor":{},"alwaysColor":{}}}` |
-| color-mode | IThemeConfig colorMode 主题模式 | string       | light                                                                                            |
-| inherit    | IThemeConfig inherit Token 继承 | boolean      | true                                                                                             |
-| token      | IThemeConfig token Token 定制   | Object       | `{}`                                                                                             |
+| 属性      | 描述                            | 类型         | 默认值                                                                                           |
+| --------- | ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------ |
+| 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       | `{}`                                                                                             |
 
 ### Events

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

@@ -9,7 +9,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 Component = "Button" | "Popover" | "Text" | "Tag" | "Switch";
+export type Component = "Button" | "Popover" | "Text" | "Tag" | "Switch" | "Icon" | "Result" | "Empty";
 export type ComponentColor = { [key in Component]: ThemeColor };
 
 type ComponentsToken = {

package/src/components/ConfigProvider/index.ts

@@ -1,4 +1,7 @@
 import ConfigProvider from "./ConfigProvider";
+import * as ConfigProviderType from "./interface";
 
 export { useThemeColor } from "./hooks/themeToken/useThemeToken";
 export default ConfigProvider;
+
+export { ConfigProvider, ConfigProviderType };

package/src/components/Empty/Empty.tsx

@@ -0,0 +1,29 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { View, Image, Text, GestureResponderEvent } from "react-native";
+import { RedsEmpty, EmptyDefaultProps } from "./interface/index";
+import createStyles from "./styles";
+import { defaultIcon } from "./hooks/useDefaultIcon";
+
+const Empty = (props: RedsEmpty) => {
+  const { description, image, action } = { ...(EmptyDefaultProps as RedsEmpty), ...props };
+
+  const styles = createStyles();
+
+  const defaultImage = image || (
+    <Image style={{ height: 88, width: 84 }} source={{ uri: defaultIcon["default"].image }}></Image>
+  );
+
+  return (
+    <View style={styles.container}>
+      <View>{defaultImage}</View>
+      <View style={styles.description}>
+        <Text style={styles.descriptionText}>{description || "暂无数据"}</Text>
+      </View>
+      {action && <View style={styles.action}>{action}</View>}
+    </View>
+  );
+};
+
+Empty.defaultProps = EmptyDefaultProps;
+
+export default Empty;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { View, Text, ScrollView, Image } from "react-native";
+import { Button } from "@xhs/reds-rn-next";
+import Empty from "../index";
+
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
+
+const ActionButton = () => {
+  return <Button variant={"outline"}>按钮</Button>;
+};
+
+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>
+      <Empty></Empty>
+      <Br />
+      <Desc>描述</Desc>
+      <Empty description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"></Empty>
+      <Br />
+      <Desc>操作按钮</Desc>
+      <Empty action={<ActionButton />}></Empty>
+      <Br />
+      <Desc>自定义</Desc>
+      <Empty
+        description={"我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"}
+        action={<ActionButton />}
+        image={<ImageCustom />}
+      ></Empty>
+    </ScrollView>
+  );
+}

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

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

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

@@ -0,0 +1,5 @@
+export const defaultIcon = {
+  default: {
+    image: "https://picasso-static.xiaohongshu.com/fe-platform/fb6202b046d7ee0a1d034948c37bd5e6d97bd417.png",
+  },
+};

package/src/components/Empty/index.ts

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

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export interface RedsEmpty {
+  description?: string;
+  action?: ReactNode;
+  image?: ReactNode;
+}
+
+export const EmptyDefaultProps = {
+  description: "",
+};