@xhsreds/reds-rn-next 0.2.7 → 0.2.8

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

@@ -0,0 +1,116 @@
+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/lib/src/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RedsAvatarGroup } from "./interface";
+declare const _default: React.MemoExoticComponent<(props: RedsAvatarGroup) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,15 @@
+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/lib/src/components/AvatarGroup/styles.d.ts

@@ -0,0 +1,19 @@
+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/lib/src/components/Badge/interface/index.d.ts

@@ -0,0 +1,22 @@
+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;
+};

package/lib/src/components/Badge/styles.d.ts

@@ -0,0 +1,41 @@
+declare const createStyles: () => {
+    wrapper: {
+        position: "relative";
+        alignSelf: "flex-start";
+    };
+    badge: {
+        position: "absolute";
+        alignItems: "center";
+        justifyContent: "center";
+        borderRadius: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        fontSize: number;
+        height: number;
+        lineHeight: number;
+        textAlign: "center";
+        color: string;
+        top: number;
+        right: number;
+        alignSelf: "flex-start";
+        flexDirection: "row";
+        flexShrink: number;
+    };
+    text: {
+        color: string;
+        fontSize: any;
+        fontWeight: any;
+    };
+    dot: {
+        width: number;
+        height: number;
+        includeFontPadding: false;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+    };
+    showZero: {
+        display: "none";
+    };
+};
+export default createStyles;

package/lib/src/components/BottomBar/interface/index.d.ts

@@ -0,0 +1,18 @@
+export interface RedsBottomBar {
+    layout?: "block" | "center" | "right";
+    showBackground?: boolean;
+    showTopBorder?: boolean;
+    fixedToBottom?: boolean;
+    left?: any;
+    top?: any;
+    bottom?: any;
+    children?: any;
+}
+export interface RedsBottomBarEvent {
+}
+export declare const BottomBarDefaultProps: {
+    layout: string;
+    showBackground: boolean;
+    showTopBorder: boolean;
+    fixedToBottom: boolean;
+};

package/lib/src/components/BottomBar/styles.d.ts

@@ -0,0 +1,58 @@
+export declare const styles: {
+    bottomBar: {
+        width: "100%";
+        padding: number;
+        backgroundColor: string;
+    };
+    fixed: {
+        position: "absolute";
+        bottom: number;
+        zIndex: number;
+        width: "100%";
+        height: number;
+        justifyContent: "center";
+    };
+    showBackground: {
+        backgroundColor: string;
+    };
+    showTopBorder: {
+        borderTopWidth: number;
+        borderTopColor: string;
+    };
+    block: {
+        paddingHorizontal: number;
+        justifyContent: "flex-start";
+    };
+    center: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    right: {
+        justifyContent: "flex-end";
+        alignItems: "center";
+    };
+    left: {
+        width: "50%";
+    };
+    top: {
+        marginBottom: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    bottom: {
+        marginTop: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    content: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+    };
+    mainContent: {
+        flexDirection: "row";
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};

package/lib/src/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RedsButton } from "./interface";
+declare const _default: React.MemoExoticComponent<(props: RedsButton) => React.JSX.Element>;
+export default _default;

package/lib/src/components/Button/interface/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { GestureResponderEvent, ViewStyle } from "react-native";
+export type RedsButtonSize = "xLarge" | "large" | "medium" | "small" | "mini" | "micro";
+export type RedsButtonType = "primary" | "default";
+export type RedsButtonVariant = "fill" | "ghost" | "outline" | "text";
+export type RedsButtonShape = "capsule" | "circle";
+export type RedsButtonOutline = "border" | "shadow";
+export interface RedsButton {
+    size?: RedsButtonSize;
+    type?: RedsButtonType;
+    variant?: RedsButtonVariant;
+    shape?: RedsButtonShape;
+    block?: boolean;
+    width?: string | number;
+    disabled?: boolean;
+    outlineType?: RedsButtonOutline;
+    children?: React.ReactNode;
+    style?: ViewStyle;
+    avatar?: React.ReactNode;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    onClick?: (value: GestureResponderEvent) => void;
+    requireDisableClick?: boolean;
+}
+export declare const ButtonDefaultProps: {
+    size: string;
+    type: string;
+    variant: string;
+    shape: string;
+    block: boolean;
+    disabled: boolean;
+    outlineType: string;
+    style: {};
+    requireDisableClick: boolean;
+};

package/lib/src/components/Button/styleMap.d.ts

@@ -0,0 +1,173 @@
+import { RedsButton } from "./interface";
+export declare const getStyles: (props: RedsButton) => {
+    button: {
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        border: string;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        borderRadius: number;
+    } | {
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        borderWidth: number;
+        borderStyle: "solid";
+        borderRadius: number;
+    };
+    disabledButton: {
+        opacity: number;
+    };
+    block: {
+        width: "100%";
+    };
+};
+export declare const getSizeStyles: (props: RedsButton) => {
+    button: {
+        height: number;
+        width: number;
+        paddingVertical: number;
+    } | {
+        height: number;
+        minWidth: number;
+        paddingLeft: number;
+        paddingRight: number;
+        paddingVertical: number;
+    };
+    text: {
+        fontSize: any;
+        fontWeight: any;
+        lineHeight: any;
+    };
+} | {
+    button: {
+        height: number;
+        width: number;
+        paddingVertical: number;
+    } | {
+        height: number;
+        minWidth: number;
+        paddingLeft: number;
+        paddingRight: number;
+        paddingVertical: number;
+    };
+    text: {
+        fontSize: any;
+        fontWeight: any;
+        lineHeight: any;
+    };
+} | {
+    button: {
+        height: number;
+        width: number;
+        paddingVertical: number;
+    } | {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    text: {
+        fontSize: any;
+        fontWeight: any;
+        lineHeight: any;
+    };
+} | {
+    button: {
+        height: number;
+        width: number;
+        paddingVertical: number;
+    } | {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    text: {
+        fontSize: any;
+        fontWeight: any;
+        lineHeight: any;
+    };
+} | {
+    button: {
+        height: number;
+        width: number;
+        paddingVertical: number;
+    } | {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    text: {
+        fontSize: any;
+        fontWeight: any;
+        lineHeight: any;
+    };
+} | {
+    button: {
+        height: number;
+        width: number;
+        paddingVertical: number;
+    } | {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    text: {
+        fontSize: any;
+        fontWeight: any;
+        lineHeight: any;
+    };
+};
+export declare const getVariantStyles: (props: RedsButton) => {
+    button: {
+        borderColor: string;
+        backgroundColor: string;
+    };
+    text: {
+        color: string;
+    };
+} | {
+    button: {
+        borderColor: string;
+        backgroundColor: string;
+    };
+    text: {
+        color: string;
+    };
+} | {
+    button: {
+        borderColor: string;
+        backgroundColor: string;
+    };
+    text: {
+        color: string;
+    };
+} | {
+    button: {
+        borderColor: string;
+        backgroundColor: string;
+    };
+    text: {
+        color: string;
+    };
+};
+export declare const contentMarginStyle: {
+    left: {
+        marginLeft: number;
+    };
+    right: {
+        marginRight: number;
+    };
+};

package/lib/src/components/Carousel/interface/index.d.ts

@@ -0,0 +1,52 @@
+import { ReactElement } from "react";
+export declare const enum DOTTYPE {
+    DEFINITE = "definite",
+    INDEFINITE = "indefinite"
+}
+export declare const enum PLAYINGMODE {
+    CARD = "card",
+    COMPACT = "compact",
+    NORMAL = "normal"
+}
+export declare const enum DOTPLACEMENT {
+    INSIDE = "inside",
+    OUTSIDE = "outside"
+}
+export declare const enum NUMBERPLACEMENT {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export interface RedsCarousel {
+    data?: any[];
+    currentIndex?: number;
+    dotType?: DOTTYPE;
+    initDotNumber?: number;
+    duration?: number;
+    autoPlay?: boolean;
+    displayNumbers?: boolean;
+    displayDots?: boolean;
+    playingMode?: PLAYINGMODE;
+    dotPlacement?: DOTPLACEMENT;
+    numberPlacement?: NUMBERPLACEMENT;
+    children?: ReactElement[];
+    distance?: number;
+    onChange?: (value: any, index: number) => void;
+    onClick?: (value: any, index: number) => void;
+}
+export interface RedsCarouselEvent {
+}
+export declare const CarouselDefaultProps: {
+    data: any[];
+    currentIndex: number;
+    dotType: DOTTYPE;
+    initDotNumber: number;
+    duration: number;
+    autoPlay: boolean;
+    displayNumbers: boolean;
+    displayDots: boolean;
+    playingMode: PLAYINGMODE;
+    dotPlacement: DOTPLACEMENT;
+    numberPlacement: NUMBERPLACEMENT;
+    children: any[];
+    distance: number;
+};

package/lib/src/components/Carousel/styles.d.ts

@@ -0,0 +1,96 @@
+declare const getStyle: (themeColor: any) => {
+    container: {
+        overflow: "hidden";
+    };
+    scrollContent: {
+        flexGrow: number;
+        alignItems: "center";
+    };
+    itemContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    dotContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        position: "absolute";
+        width: "100%";
+        bottom: number;
+    };
+    dotOutsideContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        width: "100%";
+        padding: number;
+    };
+    dot: {
+        width: number;
+        height: number;
+        backgroundColor: string;
+        marginRight: number;
+        borderRadius: number;
+    };
+    activeDot: {
+        width: number;
+        height: number;
+        backgroundColor: string;
+        marginRight: number;
+        borderRadius: number;
+    };
+    outSideDot: {
+        width: number;
+        height: number;
+        backgroundColor: any;
+        marginRight: number;
+        borderRadius: number;
+    };
+    outSideActiveDot: {
+        width: number;
+        height: number;
+        backgroundColor: any;
+        marginRight: number;
+        borderRadius: number;
+    };
+    smallDot: {
+        width: number;
+        height: number;
+        backgroundColor: string;
+        marginRight: number;
+        borderRadius: number;
+    };
+    smallOutsideDot: {
+        width: number;
+        height: number;
+        backgroundColor: any;
+        marginRight: number;
+        borderRadius: number;
+    };
+    number: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        color: string;
+    };
+    numberContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        position: "absolute";
+        backgroundColor: any;
+        borderRadius: number;
+    };
+    numberTop: {
+        top: number;
+        right: number;
+    };
+    numberBottom: {
+        bottom: number;
+        right: number;
+    };
+};
+export default getStyle;

package/lib/src/components/CheckBoxGroup/CheckBox.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { RedsCheckBox, CheckBoxGroupSize } from "./interface";
+declare const CheckBox: {
+    (props: RedsCheckBox): React.JSX.Element;
+    defaultProps: {
+        placement: import("./interface").CheckBoxPlacement;
+        layout: import("./interface").CheckBoxGroupLayout;
+        size: CheckBoxGroupSize;
+        isControl: boolean;
+    };
+};
+export default CheckBox;

package/lib/src/components/CheckBoxGroup/CheckBoxGroup.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { RedsCheckBoxGroup, CheckBoxGroupLayout } from "./interface/index";
+declare const CheckBoxGroup: {
+    (props: RedsCheckBoxGroup): React.JSX.Element;
+    defaultProps: {
+        value: any[];
+        options: any[];
+        disable: boolean;
+        full: boolean;
+        fullText: string;
+        layout: CheckBoxGroupLayout;
+        size: import("./interface/index").CheckBoxGroupSize;
+    };
+};
+export default CheckBoxGroup;