@xhsreds/reds-rn-next 0.2.7 → 0.2.8

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

@@ -0,0 +1,90 @@
+import { ReactNode } from "react";
+import { ViewStyle } from "react-native";
+export declare const enum DROPDOWNITEMTYPE {
+    RADIO = "radio",
+    MULTIPLE = "multiple",
+    INPUT = "input",
+    MORE_MULTIPLE = "more_multiple"
+}
+export declare const enum MULTIPLEOPTIONCOLUMN {
+    TWO = 2,
+    THREE = 3,
+    FOUR = 4
+}
+export interface SelectItem {
+    value: string;
+    key: string;
+}
+export declare enum FILTER_TYPE {
+    TEXT = "text",
+    ICON = "icon"
+}
+export interface RedsDropDown {
+    options: SelectItem[];
+    filterType?: FILTER_TYPE;
+    onReset?: () => void;
+    onConfirm?: () => void;
+    tabStyle?: ViewStyle;
+    dropdownItemContainerStyle?: ViewStyle;
+    children: ReactNode[];
+    filter?: React.ReactNode;
+}
+export interface RedsDropDownEvent {
+}
+export declare const DropDownDefaultProps: {
+    options: any[];
+    filterType: FILTER_TYPE;
+    onReset: () => void;
+    onConfirm: () => void;
+    tabStyle: {};
+    dropdownItemContainerStyle: {};
+};
+export interface RedsDropDownItem {
+    /**
+     * 下拉菜单类型
+     */
+    type: DROPDOWNITEMTYPE;
+    /**
+     * 选项
+     */
+    value?: string | string[] | number[];
+    /**
+     * 默认选项
+     */
+    defaultValue?: string | string[] | number[];
+    /**
+     * 多选项列数
+     */
+    optionColumns?: MULTIPLEOPTIONCOLUMN;
+    /**
+     * 列表数据
+     */
+    options: SelectItem[];
+    /**
+     * 当值发生变化时触发
+     */
+    onChange?: (value: string | string[] | number[]) => any;
+    /**
+     * 表单标签
+     */
+    label?: string;
+    /**
+     * input最小值placeholder
+     */
+    minPlaceHolder?: string;
+    /**
+     * input最大值placeholder
+     */
+    maxPlaceHolder?: string;
+    /**
+     *  关闭弹窗
+     */
+    onClose?: () => void;
+}
+export declare const DropDownItemDefaultProps: {
+    type: DROPDOWNITEMTYPE;
+    optionColumns: MULTIPLEOPTIONCOLUMN;
+    options: any[];
+    minPlaceHolder: string;
+    maxPlaceHolder: string;
+};

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

@@ -0,0 +1,232 @@
+declare const styles: {
+    mask: {
+        width: "100%";
+        height: number;
+        position: "absolute";
+        zIndex: number;
+    };
+    DropDownContainer: {
+        width: "100%";
+        maxHeight: "75%";
+        position: "relative";
+    };
+    DropDownItemWrapper: {
+        maxHeight: "100%";
+        width: "100%";
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    labelContainer: {
+        width: "100%";
+        display: "flex";
+        justifyContent: "space-between";
+        alignItems: "center";
+        flexDirection: "row";
+    };
+    tabContainer: {
+        flex: number;
+    };
+    btnContainer: {
+        width: "100%";
+        height: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        flexDirection: "row";
+        borderTopWidth: number;
+        borderStyle: "solid";
+    };
+    flex: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "flex-start";
+        flexWrap: "wrap";
+        width: "100%";
+    };
+    DropDownBackgroundMask: {
+        width: "100%";
+        maxHeight: "100%";
+    };
+    line: {
+        height: number;
+        width: "100%";
+    };
+    resetBtn: {
+        width: number;
+    };
+    confirmBtn: {
+        width: number;
+        marginLeft: number;
+    };
+    dropDownItemRadioConatainer: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        flexDirection: "row";
+        height: number;
+        paddingTop: number;
+        paddingBottom: number;
+        width: "100%";
+    };
+    dropDownItemMultiWrapper: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "flex-start";
+        flexDirection: "row";
+        flexWrap: "wrap";
+    };
+    radioNormalText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+    };
+    radioActiveText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+    };
+    multiNormalContainer: {
+        height: number;
+        padding: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        flexDirection: "row";
+        marginTop: number;
+        marginBottom: number;
+        borderRadius: number;
+    };
+    multiActiveContainer: {
+        height: number;
+        padding: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        flexDirection: "row";
+        marginTop: number;
+        marginBottom: number;
+        borderRadius: number;
+    };
+    multiNormalText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+    };
+    multiActiveText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+    };
+    label: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+    };
+    dropDownInputContainer: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        flexDirection: "row";
+        height: number;
+        boxSizing: string;
+        width: "100%";
+    };
+    input: {
+        height: "100%";
+        width: "40%";
+        borderRadius: number;
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    inputLine: {
+        width: number;
+        height: number;
+        marginLeft: number;
+        marginRight: number;
+    };
+    filter: {
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        marginLeft: number;
+        marginRight: number;
+    };
+    filterActiveText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        marginRight: number;
+    };
+    filterNormalText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        marginRight: number;
+    };
+    more: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        marginRight: number;
+    };
+    moreContainer: {
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+    };
+    titleContainer: {
+        display: "flex";
+        justifyContent: "space-between";
+        alignItems: "center";
+        flexDirection: "row";
+        width: "100%";
+        marginBottom: number;
+        marginTop: number;
+    };
+    ScrollStyles: {
+        width: "100%";
+        maxHeight: "100%";
+        boxSizing: string;
+    };
+};
+export declare const getRedsDropDownVariantStyles: () => {
+    color: {
+        title: {
+            color: string;
+        };
+        primary: {
+            color: string;
+        };
+        paragraph: {
+            color: string;
+        };
+        description: {
+            color: string;
+        };
+    };
+    backgroundColor: {
+        bg: {
+            backgroundColor: string;
+        };
+        description: {
+            backgroundColor: string;
+        };
+        fill5: {
+            backgroundColor: string;
+        };
+        fill1: {
+            backgroundColor: string;
+        };
+        primary2: {
+            backgroundColor: string;
+        };
+        title: {
+            backgroundColor: string;
+        };
+    };
+    borderTopColor: {
+        separator: {
+            borderTopColor: string;
+        };
+    };
+    iconColor: {
+        description: string;
+        title: string;
+    };
+};
+export default styles;

package/{types → lib}/src/components/Empty/Empty.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { RedsEmpty } from "./interface/index";
 declare const Empty: {
-  (props: RedsEmpty): React.JSX.Element;
-  defaultProps: {
-    description: string;
-  };
+    (props: RedsEmpty): React.JSX.Element;
+    defaultProps: {
+        description: string;
+    };
 };
 export default Empty;

package/{types → lib}/src/components/Empty/interface/index.d.ts

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

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

@@ -0,0 +1,21 @@
+declare const createStyles: () => {
+    container: {
+        alignItems: "center";
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    description: {
+        marginTop: number;
+    };
+    descriptionText: {
+        fontSize: any;
+        fontWeight: any;
+        lineHeight: any;
+        color: string;
+        textAlign: "center";
+    };
+    action: {
+        marginTop: number;
+    };
+};
+export default createStyles;

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

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

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { GestureResponderEvent } from "react-native";
+export type RedsButtonSize = "xLarge" | "large" | "medium" | "small" | "mini" | "micro";
+export type RedsButtonType = "primary" | "default";
+export type RedsButtonShape = "capsule" | "circle";
+export interface RedsFAB {
+    size?: RedsButtonSize;
+    type?: RedsButtonType;
+    shape?: RedsButtonShape;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+    horizontalCenter?: boolean;
+    children?: React.ReactNode;
+    avatar?: React.ReactNode;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    onClick?: (value: GestureResponderEvent) => void;
+}
+export interface RedsFABEvent {
+}
+export declare const FABDefaultProps: {
+    size: string;
+    type: string;
+    shape: string;
+    right: number;
+    bottom: number;
+    horizontalCenter: boolean;
+};

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

@@ -0,0 +1,19 @@
+import { RedsFAB } from "./interface/index";
+export declare const styles: {
+    container: {
+        position: "absolute";
+    };
+};
+export declare const getPositionStyles: (props: RedsFAB, boxWidth: number) => {
+    left: "50%";
+    transform: {
+        translateX: number;
+    }[];
+    top: number;
+    bottom: number;
+} | {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};

package/{types → lib}/src/components/Form/FormItem.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { RedsFormItem } from "./interface/index";
 declare const FormItem: {
-  (props: RedsFormItem): React.JSX.Element;
-  defaultProps: {
-    required: boolean;
-  };
+    (props: RedsFormItem): React.JSX.Element;
+    defaultProps: {
+        required: boolean;
+    };
 };
 export default FormItem;

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

@@ -0,0 +1,131 @@
+/// <reference types="node" />
+import { ReactNode } from "react";
+import { ViewStyle, TextStyle } from "react-native";
+export declare const enum ALIGN {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare const enum LAYOUT {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export interface FormRule {
+    validator: (val: any) => boolean;
+    message: string;
+}
+export interface FormData {
+    [key: string]: any;
+}
+export interface FormRules {
+    [key: string]: any[];
+}
+export interface FormValidateRes {
+    name: string;
+    isValidate: boolean;
+    messages: string[];
+}
+export interface RedsForm {
+    data: FormData;
+    rules: FormRules;
+    onSubmit?: (value: FormData, errors: any) => void;
+    onError?: (error: any, data: FormData) => void;
+    children: ReactNode[] | ReactNode;
+    layout?: LAYOUT;
+    align?: ALIGN;
+    showSubmit?: boolean;
+    submitText?: string;
+}
+export interface RedsFormEvent {
+}
+export declare const FormDefaultProps: {
+    layout: LAYOUT;
+    align: ALIGN;
+    showSubmit: boolean;
+    submitText: string;
+};
+export interface RedsFormItem {
+    /**
+     * 表单内容对齐方式
+     */
+    align?: ALIGN;
+    /**
+     * 布局 横向/纵向
+     */
+    layout?: LAYOUT;
+    /**
+     * 是否可选
+     */
+    required?: boolean;
+    /**
+     * 校验规则
+     */
+    rules?: FormRule[];
+    /**
+     * label
+     */
+    label?: string;
+    /**
+     * value
+     */
+    value: string | number | boolean | string[] | number[];
+    /**
+     * name
+     */
+    name: string;
+    /**
+     * labelWidth
+     */
+    labelWidth?: number;
+    /**
+     * children
+     */
+    children: ReactNode;
+    /**
+     * styles
+     */
+    styles?: ViewStyle;
+    /**
+     * label styles
+     */
+    labelStyle?: ViewStyle;
+    /**
+     * label text styles
+     */
+    labelTextStyle?: TextStyle;
+    /**
+     * formItem slot styles
+     */
+    formItemSlotStyles?: ViewStyle;
+    /**
+     * formItem style
+     */
+    formItemStyle?: ViewStyle;
+    /**
+     * label slot
+     */
+    LabelComponent?: ReactNode;
+    /**
+     * 是否展示错误提示
+     */
+    noError?: boolean;
+    /**
+     * requireStyle
+     */
+    requireStyle?: ViewStyle;
+}
+export interface RedsFormItemEvent {
+    (e: "validate", value: Event): any;
+}
+export declare const RedsFormItemDefaultProps: {
+    required: boolean;
+};
+export interface IFormContext {
+    rules: FormRules;
+    value: FormData;
+    layout?: LAYOUT;
+    align?: ALIGN;
+    errors: {
+        [key: string]: string;
+    };
+    setErrors?: (val: any) => void;
+}

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

@@ -0,0 +1,55 @@
+import { RedsFormItem } from "./interface/index";
+declare const styles: (themeColor: any) => {
+    require: {
+        fontWeight: any;
+        fontSize: any;
+        color: any;
+        position: "absolute";
+        top: number;
+        right: number;
+    };
+    warning: {
+        fontWeight: any;
+        fontSize: any;
+        color: any;
+    };
+    container: {
+        backgroundColor: any;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        marginBottom: number;
+        width: "100%";
+    };
+};
+export declare const computedLabelContainerStyle: (props: RedsFormItem) => {
+    width: number | "100%";
+    marginRight: number;
+    marginBottom: number;
+    display: "flex";
+    alignItems: "center";
+    flexDirection: "row";
+    flexShrink: number;
+    position: "relative";
+};
+export declare const computedChildrenStyle: (props: RedsFormItem) => {
+    display: "flex";
+    alignItems: "flex-start" | "flex-end";
+    flexGrow: number;
+    overflow: "hidden";
+    flexDirection: "column";
+};
+export declare const computedLabelStyle: (themeColor: any) => {
+    color: any;
+    fontSize: number;
+    fontWeight: "400";
+    position: "relative";
+};
+export declare const computedFormItemStyle: (props: RedsFormItem, themeColor: any) => import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
+export declare const computedWaringStyle: (props: RedsFormItem) => {
+    marginTop: number;
+    marginLeft: number;
+    display: "flex";
+    flexDirection: "row";
+    justifyContent: "flex-start" | "flex-end";
+};
+export default styles;

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

@@ -0,0 +1,25 @@
+import { GestureResponderEvent, ViewStyle } from "react-native";
+type IconFunction = (props: {
+    size: number;
+    fill?: string | string[];
+}) => string;
+export declare const enum iconType {
+    svg = "svg",
+    image = "image"
+}
+export interface RedsIcon {
+    size?: number;
+    fill?: string;
+    icon?: IconFunction | string;
+    type?: iconType;
+    styles?: ViewStyle;
+    onClick?: (value: GestureResponderEvent) => void;
+}
+export interface RedsIconEvent {
+    onClick?: (value: GestureResponderEvent) => void;
+}
+export declare const IconDefaultProps: {
+    size: number;
+    type: iconType;
+};
+export {};

package/lib/{types/components/Popover → src/components/Icon}/styles.d.ts

@@ -1,5 +1,5 @@
 declare const styles: {
-    PopoverContainer: {
+    IconContainer: {
         width: number;
         height: number;
         borderRadius: number;

package/lib/src/components/Image/CircularProgress.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const CircularProgress: ({ size, strokeWidth, progress }: {
+    size?: number;
+    strokeWidth?: number;
+    progress?: number;
+}) => React.JSX.Element;
+export default CircularProgress;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { ImageProps } from "react-native";
+import { RedsImage, TErrorStyle, TLoadStyle } from "./interface/index";
+declare const _default: React.MemoExoticComponent<{
+    ({ src, source: _source, width, height, borderRadius, errorStyle, loadStyle, style, ...props }: RedsImage & Omit<ImageProps, keyof RedsImage>): React.JSX.Element;
+    defaultProps: {
+        style: {};
+        loadStyle: TLoadStyle;
+        loadMode: import("./interface/index").TLoadMode;
+        errorStyle: TErrorStyle;
+    };
+}>;
+export default _default;

package/lib/src/components/Image/Image69.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ImageProps } from "react-native";
+import { RedsImage, TErrorStyle, TLoadStyle } from "./interface/index";
+declare const _default: React.MemoExoticComponent<{
+    ({ src, source: _source, width, height, borderRadius, errorStyle, loadStyle, style, ...props }: RedsImage & Omit<ImageProps, keyof RedsImage>): React.JSX.Element;
+    defaultProps: {
+        style: {};
+        loadStyle: TLoadStyle;
+        loadMode: import("./interface/index").TLoadMode;
+        errorStyle: TErrorStyle;
+    };
+}>;
+export default _default;