@xhsreds/reds-rn-next 0.0.23 → 0.1.0

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { describe, it, expect, beforeEach } from "vitest";
+import { Text, Image, View, TouchableWithoutFeedback } from "react-native";
+import { render, screen, act, fireEvent } from "@testing-library/react-native";
+import Result from "../Result";
+import { ResultDefaultProps, RedsResult } from "../interface/index";
+import { defaultIcon } from "../hooks/useDefaultIcon";
+import Demo from "./Demo";
+
+describe("Result Component", () => {
+  it("renders default title and image", () => {
+    render(<Result />);
+    const titleElement = screen.getByText(
+      defaultIcon[(ResultDefaultProps?.type as "Success" | "Info" | "Warning") || "Success"].title,
+    );
+    expect(titleElement).toBeTruthy();
+  });
+
+  it("renders custom title and image", () => {
+    const customTitle = "Custom Title";
+    const customImageUri = "https://example.com/custom-image.png";
+    render(<Result title={customTitle} image={<Image source={{ uri: customImageUri }}></Image>} />);
+    const titleElement = screen.getByText(customTitle);
+    expect(titleElement).toBeTruthy();
+  });
+
+  it("updates title and image on props change", () => {
+    const { rerender } = render(<Result />);
+    const newProps: RedsResult = {
+      title: "New Title",
+      image: <Image source={{ uri: "https://example.com/new-image.png" }}></Image>,
+      type: "Info",
+    };
+    rerender(<Result {...newProps} />);
+    const titleElement = screen.getByText(newProps.title || "");
+    expect(titleElement).toBeTruthy();
+  });
+  it("updates title and image on props change", async () => {
+    const { rerender } = render(<Result />);
+    const titleElement1 = screen.getByText("成功提示");
+    expect(titleElement1).toBeTruthy();
+    const newProps: RedsResult = {
+      image: <Image source={{ uri: "https://example.com/new-image.png" }}></Image>,
+      type: "Info",
+    };
+    await rerender(<Result {...newProps} />);
+    const titleElement = screen.getByText("处理中");
+    expect(titleElement).toBeTruthy();
+    rerender(<Result title="New Title" />);
+    const titleElement2 = screen.getByText("New Title");
+    expect(titleElement2).toBeTruthy();
+  });
+
+  it("handles null or undefined props gracefully", async () => {
+    const warpper = render(<Result />);
+    // @ts-ignore
+    const titleElement = warpper.queryByText(defaultIcon[ResultDefaultProps?.type || "Success"].title);
+    expect(titleElement).toBeTruthy();
+    warpper.update(<Result title="New Description" />);
+    const titleElement2 = warpper.queryByText("New Description");
+    expect(titleElement2).toBeTruthy();
+  });
+
+  it("renders description when provided", () => {
+    const description = "This is a description.";
+    render(<Result description={description} />);
+    const descriptionElement = screen.getByText(description);
+    expect(descriptionElement).toBeTruthy();
+  });
+
+  it("renders action when provided", () => {
+    const action = <Text>Click me!</Text>;
+    render(<Result action={action} />);
+    const actionElement = screen.getByText("Click me!");
+    expect(actionElement).toBeTruthy();
+  });
+
+  it("covers branch logic for dynamic prop updates", async () => {
+    const { rerender } = render(<Result />);
+    const newProps: RedsResult = {
+      title: "New Title",
+      image: <Image source={{ uri: "https://example.com/new-image.png" }}></Image>,
+      type: "Warning",
+    };
+
+    // 使用 act 包裹 rerender 调用来确保在组件更新期间的副作用正确处理
+    await act(async () => {
+      rerender(<Result {...newProps} />);
+    });
+
+    const titleElement = screen.getByText(newProps.title || "");
+    expect(titleElement).toBeTruthy();
+  });
+
+  it("testbutton", async () => {
+    const warpper = render(<Demo />);
+    expect(warpper.getByText("标题11")).toBeTruthy();
+    await fireEvent(warpper.getByTestId("123"), "onPress");
+    expect(warpper.getByText("标题22")).toBeTruthy();
+  });
+});

package/src/components/Switch/{index.tsx → Switch.tsx}

@@ -3,7 +3,7 @@ import { View, TouchableWithoutFeedback, Animated, GestureResponderEvent } from
 import { RedsSwitch, SwitchDefaultProps } from "./interface/index";
 import styles from "./styles";
 
-const Switch = ({ value, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch) => {
+const Switch = ({ value, defaultValue, onChange, onClick, trackOnColor, trackOffColor, disabled }: RedsSwitch) => {
   const isControlled = useRef(value !== undefined);
   const [isOn, setIsOn] = useState(defaultValue);
 
@@ -15,13 +15,21 @@ const Switch = ({ value, defaultValue, onChange, onClick, trackOnColor, trackOff
   }, [isOn]);
 
   useEffect(() => {
-    isControlled.current && setIsOn(value);
+    if (isControlled.current) {
+      setIsOn(value);
+    }
   }, [value]);
 
-  const toggleSwitch = useCallback((e: GestureResponderEvent) => {
-    onClick?.(e);
-    !isControlled.current && setIsOn((v) => !v);
-  }, []);
+  const toggleSwitch = useCallback(
+    (e: GestureResponderEvent) => {
+      if (disabled) return;
+      onClick?.(e);
+      if (!isControlled.current) {
+        setIsOn((v) => !v);
+      }
+    },
+    [disabled],
+  );
 
   const dynamicStyles = useMemo(() => {
     Animated.timing(animatedValue, {
@@ -32,12 +40,18 @@ const Switch = ({ value, defaultValue, onChange, onClick, trackOnColor, trackOff
     return {
       backgroundColor: isOn ? trackOnColor : trackOffColor,
       transform: [{ translateX: thumbTranslateX }],
+      opacity: disabled ? 0.4 : 1,
     };
-  }, [isOn]);
+  }, [isOn, disabled]);
 
   return (
-    <TouchableWithoutFeedback onPress={(e) => toggleSwitch(e)}>
-      <View style={[styles.switchContainer, { backgroundColor: dynamicStyles.backgroundColor }]}>
+    <TouchableWithoutFeedback onPress={(e) => toggleSwitch(e)} disabled={disabled}>
+      <View
+        style={[
+          styles.switchContainer,
+          { backgroundColor: dynamicStyles.backgroundColor, opacity: dynamicStyles.opacity },
+        ]}
+      >
         <Animated.View style={[styles.thumb, { transform: dynamicStyles.transform }]}></Animated.View>
       </View>
     </TouchableWithoutFeedback>

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

@@ -33,7 +33,6 @@ export default function App() {
   return (
     <View style={styles.container}>
       <Desc>默认用法</Desc>
-      <Text>{"children"}</Text>
       <Switch></Switch>
       <Br />
 
@@ -41,6 +40,13 @@ export default function App() {
       <Switch defaultValue={true}></Switch>
       <Br />
 
+      <Desc>disabled</Desc>
+      <View style={{ flexDirection: "row" }}>
+        <Switch defaultValue={true} disabled></Switch>
+        <Switch disabled></Switch>
+      </View>
+      <Br />
+
       <Desc>修改开关颜色</Desc>
       <Switch trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></Switch>
       <Br />

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

@@ -8,17 +8,17 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性            | 描述             | 类型    | 默认值             |
-| --------------- | ---------------- | ------- | ------------------ |
-| value           | 当前的状态       | boolean | undefined          |
-| default-value   | 默认状态         | boolean | false              |
-| disabled        | 是否显示气泡     | boolean | false              |
-| track-on-color  | 开关开启时的颜色 | string  | lightColor.Primary |
-| track-off-color | 开关关闭时的颜色 | string  | lightColor.Fill2   |
+| 属性          | 描述             | 类型    | 默认值             |
+| ------------- | ---------------- | ------- | ------------------ |
+| value         | 当前的状态       | boolean | undefined          |
+| defaultValue  | 默认状态         | boolean | false              |
+| disabled      | 是否显示气泡     | boolean | false              |
+| trackOnColor  | 开关开启时的颜色 | string  | lightColor.Primary |
+| trackOffColor | 开关关闭时的颜色 | string  | lightColor.Fill2   |
 
 ### Events
 
-| 事件   | 描述               | 类型                                  | 默认值 |
-| ------ | ------------------ | ------------------------------------- | ------ |
-| change | 当值发生变化时触发 | (value: boolean) => any               |        |
-| click  | 被点击时触发       | (value: GestureResponderEvent) => any |        |
+| 事件     | 描述               | 类型                                  | 默认值 |
+| -------- | ------------------ | ------------------------------------- | ------ |
+| onChange | 当值发生变化时触发 | (value: boolean) => any               |        |
+| onClick  | 被点击时触发       | (value: GestureResponderEvent) => any |        |

package/src/components/Switch/index.ts

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

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

@@ -5,7 +5,7 @@ import { redsBench } from "~root/utils/redsBench";
 import { Switch } from "@xhs/reds-rn-next";
 import { render } from "@testing-library/react-native";
 
-describe("render", () => {
+describe("Switch", () => {
   redsBench("base", () => {
     render(<Switch></Switch>);
   });

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

@@ -5,7 +5,7 @@ import { redsBench } from "~root/utils/redsBench";
 import { Switch } from "react-native-paper";
 import { render } from "@testing-library/react-native";
 
-describe("render", () => {
+describe("Switch", () => {
   redsBench("base", async () => {
     render(<Switch></Switch>);
   });

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useMemo, useImperativeHandle, forwardRef, memo, FunctionComponent } from "react";
+import { View, Text, StyleSheet, GestureResponderEvent, TouchableOpacity } from "react-native";
+import { RedsTag, TagDefaultProps } from "./interface";
+import { lightColor, typography, alwaysColor } from "@xhs/reds-token-next";
+
+const typeStyles = {
+  primary: {
+    backgroundColor: lightColor.Primary2,
+    color: lightColor.Primary,
+    borderColor: lightColor.Primary,
+  },
+  default: {
+    backgroundColor: lightColor.Fill1,
+    color: lightColor.Paragraph,
+    borderColor: lightColor.Separator2,
+  },
+  warning: {
+    backgroundColor: lightColor.Warning2,
+    color: lightColor.Warning,
+    borderColor: lightColor.Warning,
+  },
+  success: {
+    backgroundColor: lightColor.Success2,
+    color: lightColor.Success,
+    borderColor: lightColor.Success,
+  },
+  info: {
+    backgroundColor: lightColor.Info2,
+    color: lightColor.Info,
+    borderColor: lightColor.Info,
+  },
+  ghost: {
+    backgroundColor: alwaysColor.Black,
+    color: alwaysColor.White,
+    borderColor: alwaysColor.LightTitle,
+  },
+};
+
+const sizeStyles: { [key: string]: any } = {
+  mini: {
+    fontSize: typography.C3FontSize,
+    lineHeight: typography.C3LineHeight,
+    height: 16,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 4,
+  },
+  small: {
+    fontSize: typography.C3FontSize,
+    lineHeight: typography.C3LineHeight,
+    height: 20,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+  },
+  medium: {
+    fontSize: typography.C2FontSize,
+    lineHeight: typography.C2LineHeight,
+    height: 28,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 6,
+  },
+  large: {
+    fontSize: typography.B2FontSize,
+    lineHeight: typography.B2LineHeight,
+    height: 36,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 6,
+  },
+};
+
+const shapeStyles: { [key: string]: any } = {
+  square: {},
+  round: { borderRadius: 999 },
+  mark: { borderRadius: 999, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },
+};
+
+const Tag: FunctionComponent<RedsTag> = memo(
+  forwardRef((props: RedsTag, ref) => {
+    const {
+      content,
+      type = TagDefaultProps.type,
+      size = TagDefaultProps.size,
+      plain = TagDefaultProps.plain,
+      borderRadius,
+      disabled = TagDefaultProps.disabled,
+      shape = TagDefaultProps.shape,
+      closeabled = TagDefaultProps.closeabled,
+      icon,
+      afterIcon,
+      closeIcon,
+      onClose,
+      children,
+    } = props;
+
+    const [visible, setVisible] = useState<boolean>(true);
+
+    useImperativeHandle(ref, () => ({
+      setVisible,
+    }));
+
+    const tagStyle = useMemo(() => {
+      const style: any = {
+        fontFamily: "PingFang SC",
+        fontWeight: typography.C3FontWeight,
+        alignItems: "center",
+        borderWidth: 0.5,
+        borderColor: "transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
+        alignSelf: "flex-start",
+        flexShrink: 0,
+        flexDirection: "row",
+      };
+      if (type) {
+        const currentType = type as keyof typeof typeStyles;
+        Object.assign(
+          style,
+          plain
+            ? {
+                backgroundColor: "transparent",
+                borderColor: typeStyles[currentType].borderColor,
+                color: typeStyles[currentType].color,
+              }
+            : {
+                backgroundColor: typeStyles[currentType].backgroundColor,
+                borderColor: "transparent",
+                color: typeStyles[currentType].color,
+              },
+        );
+      }
+
+      if (size) {
+        Object.assign(style, sizeStyles[size]);
+      }
+
+      if (borderRadius) {
+        style.borderRadius = borderRadius;
+      } else if (shape) {
+        Object.assign(style, shapeStyles[shape]);
+      }
+
+      return style;
+    }, [type, size, plain, borderRadius, shape, disabled]);
+
+    const textStyle = useMemo(() => {
+      return {
+        color: type ? typeStyles[type as keyof typeof typeStyles].color : undefined,
+      };
+    }, [type]);
+
+    const handleClose = (event: GestureResponderEvent) => {
+      if (!disabled) {
+        setVisible(false);
+        onClose && onClose(event);
+      }
+    };
+
+    if (!visible) return null;
+
+    return (
+      <View style={[styles.tag, tagStyle]}>
+        <TouchableOpacity disabled={disabled} style={{ flexDirection: "row", alignItems: "center" }}>
+          {icon && <View style={{ marginRight: 3 }}>{icon}</View>}
+          {!content ? (
+            <Text style={textStyle}>{children}</Text>
+          ) : (
+            <Text style={textStyle}>{typeof content === "function" ? content({}) : content}</Text>
+          )}
+          {afterIcon && <View style={{ marginLeft: 3 }}>{afterIcon}</View>}
+        </TouchableOpacity>
+        {closeabled && (
+          <TouchableOpacity onPress={handleClose} style={{ marginLeft: 3 }}>
+            {closeIcon}
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }),
+);
+
+const styles = StyleSheet.create({
+  tag: {
+    alignItems: "center",
+    borderWidth: 0.5,
+    borderColor: "transparent",
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+});
+
+export default Tag;

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

@@ -130,11 +130,6 @@ export default function App() {
             mark
           </Tag>
         </Text>
-        <Text style={styles.boxitem}>
-          <Tag shape="square" plain type="primary">
-            square
-          </Tag>
-        </Text>
         <Text style={styles.boxitem}>
           <Tag shape="round" plain type="primary">
             round
@@ -147,25 +142,6 @@ export default function App() {
         </Text>
       </View>
       <Br />
-      <Desc>选中状态</Desc>
-      <View style={styles.box}>
-        <Text style={styles.boxitem}>
-          <Tag shape="square" type="primary" disabled>
-            disabled
-          </Tag>
-        </Text>
-        <Text style={styles.boxitem}>
-          <Tag onCheck={handleCheck} checkable>
-            checkable
-          </Tag>
-        </Text>
-        <Text style={styles.boxitem}>
-          <Tag checkable checked plain={true} type="success">
-            已选中
-          </Tag>
-        </Text>
-      </View>
-      <Br />
       {/* <Desc> icon</Desc>
       <View style={styles.box}>
         <Text style={styles.boxitem}><Tag  type="primary">

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

@@ -10,26 +10,24 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性          | 描述                                                         | 类型                                                                                      | 默认值    |
-| ------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | --------- |
-| content       | 标签内容                                                     | string | Function                                                                    | undefined |
-| type          | 主题类型                                                     | "primary" | "default" | "warning" | "success" | "info" | "ghost" | default   |
-| size          | 大小                                                         | "mini" | "small" | "medium" | "large"                                      | medium    |
-| plain         | 是否为空心样式                                               | boolean                                                                                   | false     |
-| border-radius | 圆角值                                                       | number                                                                                    | undefined |
-| disabled      | 是否禁用标签                                                 | boolean                                                                                   | false     |
-| shape         | 标签形状                                                     | "square" | "round" | "mark"                                                     | square    |
-| checkable     | 标签是否可选中                                               | boolean                                                                                   | false     |
-| checked       | 标签是否选中（选中状态为type=primary）                       | boolean                                                                                   | false     |
-| closeabled    | 是否为可关闭标签                                             | boolean                                                                                   | false     |
-| icon          | 图标（slot插槽）（暂不支持，等icon组件支持后补齐）           | string | any                                                                         | undefined |
-| after-icon    | 文字后图标（slot插槽）（暂不支持，等icon组件支持后补齐）     | string | any                                                                         | undefined |
-| close-icon    | 关闭按钮的图标（slot插槽）（暂不支持，等icon组件支持后补齐） | string | any                                                                         | undefined |
-| children      | 内容                                                         | string | any                                                                         | undefined |
+| 属性         | 描述                                                         | 类型                                                                                      | 默认值    |
+| ------------ | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | --------- |
+| content      | 标签内容                                                     | string | Function                                                                    | undefined |
+| type         | 主题类型                                                     | "primary" | "default" | "warning" | "success" | "info" | "ghost" | default   |
+| size         | 大小                                                         | "mini" | "small" | "medium" | "large"                                      | medium    |
+| plain        | 是否为空心样式                                               | boolean                                                                                   | false     |
+| borderRadius | 圆角值                                                       | number                                                                                    | undefined |
+| disabled     | 是否禁用标签                                                 | boolean                                                                                   | false     |
+| shape        | 标签形状                                                     | "square" | "round" | "mark"                                                     | square    |
+| closeabled   | 是否为可关闭标签                                             | boolean                                                                                   | false     |
+| icon         | 图标（slot插槽）（暂不支持，等icon组件支持后补齐）           | string | any                                                                         | undefined |
+| afterIcon    | 文字后图标（slot插槽）（暂不支持，等icon组件支持后补齐）     | string | any                                                                         | undefined |
+| closeIcon    | 关闭按钮的图标（slot插槽）（暂不支持，等icon组件支持后补齐） | string | any                                                                         | undefined |
+| children     | 内容                                                         | string | any                                                                         | undefined |
 
 ### Events
 
-| 事件  | 描述       | 类型                 | 默认值 |
-| ----- | ---------- | -------------------- | ------ |
-| check | 选中时触发 | (value?: any) => any |        |
-| close | 关闭时触发 | (value?: any) => any |        |
+| 事件    | 描述         | 类型                                  | 默认值 |
+| ------- | ------------ | ------------------------------------- | ------ |
+| onClose | 点击时触发   | (value?: any) => any                  |        |
+| onClick | 被点击时触发 | (value: GestureResponderEvent) => any |        |

package/src/components/Tag/index.ts

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

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

@@ -9,15 +9,13 @@ export interface RedsTag {
   borderRadius?: number;
   disabled?: boolean;
   shape?: "square" | "round" | "mark";
-  checkable?: boolean;
-  checked?: boolean;
   closeabled?: boolean;
   icon?: string | any;
   afterIcon?: string | any;
   closeIcon?: string | any;
   children?: string | any;
-  onCheck?: (value?: any) => any;
   onClose?: (value?: any) => any;
+  onClick?: (value: GestureResponderEvent) => any;
 }
 
 export interface RedsTagEvent {}
@@ -29,8 +27,6 @@ export const TagDefaultProps = {
   borderRadius: undefined,
   disabled: false,
   shape: "square",
-  checkable: false,
-  checked: false,
   closeabled: false,
   icon: undefined,
   afterIcon: undefined,

package/src/components/{Switch/styles.tsx → Tag/styles.ts}

@@ -2,7 +2,7 @@ import { alwaysColor } from "@xhs/reds-token-next";
 import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
-  switchContainer: {
+  TagContainer: {
     width: 40,
     height: 24,
     borderRadius: 15,

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

@@ -2,42 +2,14 @@ import { describe, it, expect } from "vitest";
 import { render, fireEvent } from "@testing-library/react-native";
 import "@testing-library/react-native/extend-expect";
 import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
 import Tag from "../index";
 
 describe("Tag", () => {
-  it(":base", async () => {
-    let isChecked = false;
-    const wrapper = render(
-      <Tag checkable onCheck={(v) => (isChecked = v)}>
-        Tag Content
-      </Tag>,
-    );
-
-    expect(isChecked).toBe(false);
-
-    await fireEvent.press(wrapper.getByText("Tag Content"));
-    expect(isChecked).toBe(true);
-
-    await fireEvent.press(wrapper.getByText("Tag Content"));
-    expect(isChecked).toBe(false);
-  });
-
-  it(":controlled", async () => {
-    let isChecked = false;
-    const wrapper = render(
-      <Tag checkable checked={false} onCheck={(v) => (isChecked = v)}>
-        Tag Content
-      </Tag>,
-    );
-
-    expect(wrapper.UNSAFE_getByType(Tag).props.checked).toBe(false);
-
-    await fireEvent.press(wrapper.getByText("Tag Content"));
-    expect(isChecked).toBe(true);
+  it(":base", () => {
+    const wrapper = render(<Tag>Tag Content</Tag>);
 
-    await fireEvent.press(wrapper.getByText("Tag Content"));
-    expect(isChecked).toBe(false);
+    expect(wrapper.getByText("Tag Content")).toBeTruthy();
   });
 
   it(":closeabled", async () => {

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

@@ -43,23 +43,23 @@ import TextCustomEmojiStyle from "!!raw-loader!../demo/TextCustomEmojiStyle.tsx"
 
 ### Props
 
-| 属性              | 描述                   | 类型    | 默认值 |
-| ----------------- | ---------------------- | ------- | ------ |
-| strikethrough     | 删除线                 | boolean | false  |
-| underline         | 下划线                 | boolean | false  |
-| italic            | 倾斜角度               | boolean | false  |
-| rows              | 省略配置默认展示行数   | number  | 1      |
-| expandable        | 是否可展开             | boolean | true   |
-| expand-text       | 展开按钮文字           | string  | 展开   |
-| collapsible       | 展开后是否可以重新收起 | boolean | true   |
-| collapse-text     | 收起按钮文字           | string  | 收起   |
-| text-style        | 定制文字样式           | any     |        |
-| emoji-style       | 定制 emoji 样式        | any     |        |
-| action-style      | 定制按钮样式           | any     |        |
-| action-text-style | 定制按钮文字样式       | any     |        |
+| 属性            | 描述                   | 类型    | 默认值 |
+| --------------- | ---------------------- | ------- | ------ |
+| strikethrough   | 删除线                 | boolean | false  |
+| underline       | 下划线                 | boolean | false  |
+| italic          | 倾斜角度               | boolean | false  |
+| rows            | 省略配置默认展示行数   | number  | 1      |
+| expandable      | 是否可展开             | boolean | true   |
+| expandText      | 展开按钮文字           | string  | 展开   |
+| collapsible     | 展开后是否可以重新收起 | boolean | true   |
+| collapseText    | 收起按钮文字           | string  | 收起   |
+| textStyle       | 定制文字样式           | any     |        |
+| emojiStyle      | 定制 emoji 样式        | any     |        |
+| actionStyle     | 定制按钮样式           | any     |        |
+| actionTextStyle | 定制按钮文字样式       | any     |        |
 
 ### Events
 
-| 事件  | 描述     | 类型                    | 默认值 |
-| ----- | -------- | ----------------------- | ------ |
-| click | 点击回调 | (value: string) => void |        |
+| 事件    | 描述     | 类型                    | 默认值 |
+| ------- | -------- | ----------------------- | ------ |
+| onClick | 点击回调 | (value: string) => void |        |

package/src/components/Text/index.ts

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