@xhsreds/reds-rn-next 0.2.7 → 0.2.9

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

@@ -1,40 +0,0 @@
-import React from "react";
-import { View, Text, StyleSheet, TouchableWithoutFeedback, Dimensions } from "react-native";
-import { ImagePreview, Image, usePortal } from "@xhs/reds-rn-next";
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-  },
-  scrollView: {
-    backgroundColor: "pink",
-  },
-  root: {
-    flex: 1,
-    backgroundColor: "blue",
-  },
-});
-const Desc = ({ children = "" }) => {
-  return <Text>{children}</Text>;
-};
-const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
-
-export default function App() {
-  const imageUrl = `https://picasso-static.xiaohongshu.com/fe-platform/167754d83b112dc155edd2ae5dc7f9ced481bba3.webp?${new Date().getTime()}`;
-  const { addPortal, removePortal } = usePortal();
-  const { height, width } = Dimensions.get("window");
-  return (
-    <View style={styles.container}>
-      <Desc>默认用法</Desc>
-      <TouchableWithoutFeedback
-        onPress={() => {
-          addPortal("test", <ImagePreview removePortal={() => removePortal("test")}></ImagePreview>);
-        }}
-      >
-        <Image width={150} height={150} borderRadius={30} src={imageUrl}></Image>
-      </TouchableWithoutFeedback>
-      <Br />
-    </View>
-  );
-}

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

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

package/src/components/ImagePreview/index.ts

@@ -1,6 +0,0 @@
-import ImagePreview from "./ImagePreview";
-import ImageViewer from "./ImageViewer";
-import * as ImagePreviewType from "./interface";
-
-export default ImagePreview;
-export { ImagePreview, ImagePreviewType, ImageViewer };

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

@@ -1,20 +0,0 @@
-import { GestureResponderEvent } from "react-native";
-import { lightColor } from "@xhs/reds-token-next";
-export interface RedsImagePreview {
-  value?: boolean;
-  defaultValue?: boolean;
-  disabled?: boolean;
-  trackOnColor?: string;
-  trackOffColor?: string;
-  onChange?: (value: boolean) => any;
-  onClick?: (value: GestureResponderEvent) => any;
-}
-
-export interface RedsImagePreviewEvent {}
-export const ImagePreviewDefaultProps = {
-  value: undefined,
-  defaultValue: false,
-  disabled: false,
-  trackOnColor: lightColor.Primary,
-  trackOffColor: lightColor.Fill2,
-};

package/src/components/ImagePreview/styles.ts

@@ -1,24 +0,0 @@
-import { alwaysColor } from "@xhs/reds-token-next";
-import { StyleSheet } from "react-native";
-
-const styles = StyleSheet.create({
-  ImagePreviewContainer: {
-    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/ImagePreview/test/index.bench.tsx

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

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

@@ -1,17 +0,0 @@
-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 ImagePreview from "../index";
-
-describe("ImagePreview", () => {
-  it(":base", async () => {
-    // let isOn = false;
-    // const wrapper = render(<ImagePreview onChange={(v) => (isOn = v)}></ImagePreview>);
-    // expect(wrapper.UNSAFE_root.props.defaultValue).toBe(false);
-    // await fireEvent(wrapper.UNSAFE_root.children[0], "press");
-    // expect(isOn).toBe(true);
-    // await fireEvent(wrapper.UNSAFE_root.children[0], "press");
-    // expect(isOn).toBe(false);
-  });
-});

package/src/components/Popover/styles.ts

@@ -1,24 +0,0 @@
-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/types/src/components/ActionSheets/interface/index.d.ts

@@ -1,27 +0,0 @@
-import { ReactNode } from "react";
-export interface ActionItem {
-  label?: string;
-  value: string;
-  type?: ActionType;
-  children?: ReactNode;
-  onChange?: (value: string) => void;
-  onClose?: () => void;
-}
-export declare const enum ActionType {
-  normal = "normal",
-  invalid = "invalid",
-  primary = "primary",
-}
-export interface RedsActionSheets {
-  data: ActionItem[];
-  description?: string;
-  visible: boolean;
-  children?: ReactNode[] | ReactNode;
-  onClose: () => any;
-  onChange: (value: string) => any;
-}
-export interface RedsActionSheetsEvent {}
-export declare const ActionSheetsDefaultProps: {
-  data: any[];
-  visible: boolean;
-};

package/types/src/components/ActionSheets/styles.d.ts

@@ -1,54 +0,0 @@
-declare const styles: {
-  ActionSheetsContainer: {
-    width: "100%";
-    borderTopLeftRadius: number;
-    borderTopRightRadius: number;
-    display: "flex";
-    height: "100%";
-    flexDirection: "column";
-  };
-  description: {
-    height: number;
-    boxSizing: string;
-    paddingLeft: number;
-    paddingRight: number;
-    width: "100%";
-    display: "flex";
-    alignItems: "center";
-    justifyContent: "center";
-    borderTopLeftRadius: number;
-    borderTopRightRadius: number;
-    flexShrink: number;
-  };
-  descriptionText: {
-    fontSize: number;
-    fontWeight: "400" | "500" | "600" | "700";
-  };
-  action: {
-    height: number;
-    width: "100%";
-    paddingLeft: number;
-    paddingRight: number;
-    display: "flex";
-    alignItems: "center";
-    justifyContent: "center";
-  };
-  actionText: {
-    fontSize: number;
-    fontWeight: "400" | "500" | "600" | "700";
-  };
-  cancel: {
-    height: number;
-    width: "100%";
-    paddingLeft: number;
-    paddingRight: number;
-    boxSizing: string;
-    fontSize: number;
-    fontWeight: "400" | "500" | "600" | "700";
-    display: "flex";
-    alignItems: "center";
-    justifyContent: "center";
-    marginTop: number;
-  };
-};
-export default styles;

package/types/src/components/Alert/hooks/alert.d.ts

@@ -1,8 +0,0 @@
-import { RedsAlert } from "../interface";
-declare class AlertFunc {
-  private alertId;
-  show: (props: RedsAlert, hostName?: string) => string;
-  destory: (id?: any, hostName?: string) => void;
-}
-declare const _default: AlertFunc;
-export default _default;

package/types/src/components/Alert/interface/index.d.ts

@@ -1,35 +0,0 @@
-/// <reference types="react" />
-import { GestureResponderEvent } from "react-native";
-export interface RedsAlert {
-  show?: boolean;
-  title?: string;
-  message?: string;
-  align?: "left" | "center" | string;
-  footerLayout?: "horizontal" | "vertical" | string;
-  showConfirmButton?: boolean;
-  showCancelButton?: boolean;
-  confirmText?: string;
-  cancelText?: string;
-  mask?: boolean;
-  footerType?: "text" | "button" | string;
-  children?: React.ReactNode;
-  footer?: React.ReactNode;
-  header?: React.ReactNode;
-  onConfirm?: (value: GestureResponderEvent) => void;
-  onCancel?: (value: GestureResponderEvent) => void;
-  onOpen?: () => void;
-  onClose?: () => void;
-  onMask?: (value: GestureResponderEvent) => void;
-}
-export interface RedsAlertEvent {}
-export declare const AlertDefaultProps: {
-  show: boolean;
-  align: string;
-  footerLayout: string;
-  showConfirmButton: boolean;
-  showCancelButton: boolean;
-  confirmText: string;
-  cancelText: string;
-  mask: boolean;
-  footerType: string;
-};

package/types/src/components/Alert/styles.d.ts

@@ -1,111 +0,0 @@
-import { RedsAlert } from "./interface";
-export declare const style: (props: RedsAlert) => {
-  modalOverlay: {
-    position: "absolute";
-    top: number;
-    left: number;
-    right: number;
-    bottom: number;
-    backgroundColor: string;
-  };
-  centeredView: {
-    position: "absolute";
-    top: number;
-    left: number;
-    right: number;
-    bottom: number;
-    flex: number;
-    justifyContent: "center";
-    alignItems: "center";
-  };
-  alertContainer: {
-    width: number;
-    backgroundColor: string;
-    borderRadius: number;
-    overflow: "hidden";
-    boxShadow: string;
-  };
-  alertContent: {
-    padding: number;
-  };
-  title: {
-    textAlign: "center";
-    marginBottom: number;
-    fontSize: any;
-    fontWeight: any;
-    lineHeight: any;
-    color: string;
-  };
-  message: {
-    maxHeight: number;
-    overflow: "hidden";
-    position: "relative";
-  };
-  messageText: {
-    fontSize: any;
-    color: string;
-    textAlign: "center";
-    lineHeight: any;
-    fontWeight: any;
-  };
-  messageLeft: {
-    textAlign: "left";
-  };
-  scrollOverlay: {
-    width: "100%";
-    position: "absolute";
-    left: number;
-    right: number;
-    bottom: number;
-    height: number;
-  };
-  footer: {
-    width: "100%";
-    height: number;
-    flexDirection: "row";
-    justifyContent: "space-between";
-    paddingHorizontal: number;
-    paddingTop: number;
-  };
-  footerText: {
-    borderTopWidth: number;
-    borderTopColor: string;
-    paddingHorizontal: number;
-    paddingBottom: number;
-    paddingTop: number;
-  };
-  footerHorizontal: {
-    flexDirection: "row";
-    height: number;
-  };
-  footerVertical: {
-    flexDirection: "column-reverse";
-    justifyContent: "center";
-    alignItems: "center";
-    height: number;
-  };
-  button: {
-    flex: number;
-    width: "100%";
-    margin: number;
-    paddingHorizontal: number;
-    height: number;
-  };
-  dividerBox: {
-    marginTop: number;
-  };
-  confirmButton: {
-    flex: number;
-    margin: number;
-    marginLeft: number;
-    width: "100%";
-    height: number;
-  };
-  verButton: {
-    flex: number;
-    width: "100%";
-    margin: number;
-    marginTop: number;
-    height: number;
-  };
-};

package/types/src/components/Avatar/Avatar.d.ts

@@ -1,16 +0,0 @@
-import React from "react";
-import { RedsAvatar } from "./interface/index";
-export declare const avatarSizes: {
-  small: number;
-  medium: number;
-  large: number;
-  xlarge: number;
-};
-export declare const images: {
-  avatar: string;
-  light: string;
-};
-declare const _default: React.MemoExoticComponent<
-  React.ForwardRefExoticComponent<RedsAvatar & React.RefAttributes<unknown>>
->;
-export default _default;

package/types/src/components/Avatar/interface/index.d.ts

@@ -1,29 +0,0 @@
-import { TextStyle } from "react-native";
-export interface RedsAvatar {
-  type?: "default" | "live";
-  imageUrl?: string;
-  size?: "small" | "medium" | "large" | "xlarge" | number;
-  borderNum?: number | any;
-  liveText?: string;
-  liveIcon?: Function | any;
-  animated?: boolean;
-  outlineColor?: string;
-  showTag?: boolean;
-  containerStyle?: string | any;
-  imageProps?: any;
-  imageStyle?: any;
-  children?: any;
-  tagStyle?: TextStyle;
-}
-export interface RedsAvatarEvent {}
-export declare const AvatarDefaultProps: {
-  type: string;
-  imageUrl: string;
-  size: string;
-  borderNum: any;
-  liveText: string;
-  animated: boolean;
-  outlineColor: string;
-  showTag: boolean;
-  tagStyle: {};
-};

package/types/src/components/Avatar/styles.d.ts

@@ -1,121 +0,0 @@
-type AvatarSize = "small" | "medium" | "large" | "xlarge";
-export declare const getAvatarStyles: (
-  width: number,
-  size: number | AvatarSize,
-  outlineColor: string,
-  borderNum?: number,
-) => {
-  styles: {
-    container: {
-      borderWidth: number;
-      width: number;
-      height: number;
-      borderRadius: number;
-      position: "absolute";
-      backgroundColor: string;
-    };
-    img: {
-      width: number;
-      height: number;
-      borderRadius: number;
-      zIndex: number;
-    };
-    outContainer: {
-      width: number;
-      height: number;
-      display: "flex";
-      alignItems: "center";
-      justifyContent: "center";
-    };
-  };
-  liveStyles: {
-    container: {
-      borderColor: any;
-      borderWidth: number;
-    };
-  };
-  liveStylesSecondary: {
-    container: {
-      borderColor: any;
-      borderWidth: number;
-    };
-  };
-  sizeType: AvatarSize;
-  borderWidth: number;
-};
-export declare const getLiveTextStyles: (size: AvatarSize) => {
-  tagMargin: number;
-  tagContainerStyles: {
-    outContainer: {
-      position: "absolute";
-      bottom: number;
-      zIndex: number;
-    };
-    container: {
-      position: "relative";
-      overflow: "hidden";
-      width: "100%";
-      borderRadius: number;
-    };
-    animatedLight: {
-      height: number;
-      bottom: number;
-      position: "absolute";
-      width: number;
-    };
-  };
-  tagStyles: {
-    text: {
-      fontSize: number;
-      lineHeight: number;
-      paddingHorizontal: number;
-    };
-    container: {
-      height: number;
-      width: "auto";
-      paddingHorizontal: number;
-      overflow: "hidden";
-    };
-    avatarLiveTag: {
-      alignItems: "center";
-      backgroundColor: string;
-      color: string;
-      borderRadius: number;
-      textAlign: "center";
-    };
-    liveTextSmall: {
-      fontSize: number;
-      minWidth: number;
-      height: number;
-      paddingHorizontal: number;
-      paddingVertical: number;
-      lineHeight: number;
-    };
-    liveTextMedium: {
-      fontSize: number;
-      minWidth: number;
-      height: number;
-      paddingHorizontal: number;
-      paddingVertical: number;
-      lineHeight: number;
-    };
-    liveTextLarge: {
-      fontSize: any;
-      minWidth: number;
-      height: number;
-      paddingHorizontal: number;
-      paddingVertical: number;
-      lineHeight: any;
-      fontWeight: any;
-    };
-    liveTextXLarge: {
-      fontSize: any;
-      minWidth: number;
-      height: number;
-      paddingHorizontal: number;
-      paddingVertical: number;
-      lineHeight: number;
-    };
-  };
-};
-export {};

package/types/src/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { RedsAvatarGroup } from "./interface";
-declare const _default: React.MemoExoticComponent<
-  React.ForwardRefExoticComponent<RedsAvatarGroup & React.RefAttributes<unknown>>
->;
-export default _default;

package/types/src/components/AvatarGroup/interface/index.d.ts

@@ -1,14 +0,0 @@
-export interface RedsAvatarGroup {
-  maxCount?: number;
-  size?: 16 | 18 | "small" | "medium" | "large" | "xlarge" | number;
-  avatars?: any;
-  avatarProps?: any;
-  groupStyle?: any;
-}
-export interface RedsAvatarGroupEvent {}
-export declare const AvatarGroupDefaultProps: {
-  maxCount: any;
-  size: number;
-  avatarProps: any;
-  groupStyle: any;
-};

package/types/src/components/AvatarGroup/styles.d.ts

@@ -1,19 +0,0 @@
-declare const styles: {
-  AvatarGroupContainer: {
-    width: number;
-    height: number;
-    borderRadius: number;
-    justifyContent: "center";
-    alignItems: "center";
-  };
-  thumb: {
-    width: number;
-    height: number;
-    borderRadius: number;
-    backgroundColor: string;
-    justifyContent: "center";
-    alignItems: "center";
-    position: "absolute";
-  };
-};
-export default styles;

package/types/src/components/Badge/interface/index.d.ts

@@ -1,21 +0,0 @@
-export interface RedsBadge {
-  content?: number | string;
-  color?: string;
-  dot?: boolean;
-  max?: number | string;
-  offset?: [number | string, number | string];
-  showZero?: boolean;
-  position?: "topLeft" | "centerLeft" | "centerRight" | "topCenter" | "centerCenter";
-  children?: any;
-}
-export interface RedsBadgeEvent {}
-export declare const BadgeDefaultProps: {
-  content: any;
-  color: any;
-  dot: boolean;
-  max: any;
-  offset: any;
-  showZero: boolean;
-  position: string;
-  children: any;
-};