@tra-tech/react-native-kitra/lib/typescript/types.d.ts

UI kit for React Native

import type { FC, PropsWithChildren } from 'react';
import type React from 'react';
import type { Animated, ImageSourcePropType, StyleProp, TextProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';
import type Icon from './components/Icons/Icon';
import type { defaultTypography } from './core/typography/typography';
export type DefaultProps = {
    theme?: {
        [index: string]: string;
    };
} & {
    typography?: TypographyType;
};
/**
* Functional component with children
*/
export type FCC<P = {}> = FC<PropsWithChildren<P>>;
/**
* Functional component with children and theme
*/
export type FCCWT<P = {}> = FCC<P & {
    theme: {
        [index: string]: string;
    };
}>;
/**
 *
* Functional component with children and defaults
*/
export type FCCWD<P = {}> = FCC<P & DefaultProps>;
export type ThemeType = {
    dark: {
        [index: string]: string;
    };
    light: {
        [index: string]: string;
    };
};
export type TypographyType = typeof defaultTypography & any;
export type AccordionListProps = {
    data: any[];
    left?: (expanded: boolean) => React.ReactNode;
    right?: (expanded: boolean) => React.ReactNode;
    onExpand?: () => void;
    label?: string;
    labelContainerStyle?: StyleProp<ViewStyle>;
    onSelect: (params: any) => void;
    itemDisplay: (params: any) => any;
    labelStyle?: StyleProp<TextStyle>;
    rowTextStyle?: StyleProp<TextStyle>;
    rowStyle?: StyleProp<ViewStyle>;
    testID?: string;
};
export type AvatarGroupProps = {
    avatarsType: Array<{
        source?: ImageSourcePropType;
        borderStyle?: 'circular' | 'rounded';
        avatarIcon?: React.ReactNode;
        containerStyle?: StyleProp<ViewStyle>;
        label?: string;
        labelStyle?: StyleProp<TextStyle>;
        badgePosition?: 'top' | 'bottom';
        badgeStyle?: {
            containerStyle?: StyleProp<ViewStyle>;
            textStyle?: StyleProp<TextStyle>;
        };
        badgeContent?: React.ReactNode;
    }>;
    avatarLimit?: number;
    limitContainerStyle?: {
        style: StyleProp<TextStyle>;
        backgroundColor: string;
    };
};
export type AvatarProps = {
    size?: 'small' | 'medium';
    source?: ImageSourcePropType;
    borderStyle?: 'circular' | 'rounded';
    avatarIcon?: React.ReactNode;
    containerStyle?: StyleProp<ViewStyle>;
    label?: string;
    labelStyle?: StyleProp<TextStyle>;
    badgePosition?: 'top' | 'bottom';
    badgeStyle?: {
        containerStyle?: StyleProp<ViewStyle>;
        textStyle?: StyleProp<TextStyle>;
    };
    badgeContent?: React.ReactNode;
};
export type BadgeProps = {
    visible?: boolean;
    label?: string | number;
    size?: 'medium' | 'small';
    containerStyle?: StyleProp<ViewStyle>;
    textStyles?: StyleProp<TextStyle>;
    borderStyle?: 'circular' | 'rectangular';
    icon?: React.ReactNode;
};
export type ButtonProps = {
    size?: 'large' | 'medium' | 'small';
    disabled?: boolean;
    label?: string;
    children?: any;
    statusStyle?: {
        default: {
            container: {
                backgroundColor: string;
            };
            text: {
                color: string;
            };
        };
        focused: {
            container: {
                backgroundColor: string;
            };
            text: {
                color: string;
            };
        };
        disabled: {
            container: {
                backgroundColor: string;
            };
            text: {
                color: string;
            };
        };
    };
    iconPosition?: 'left' | 'right';
    style?: StyleProp<ViewStyle>;
    textStyle?: StyleProp<TextStyle>;
};
export type CheckBoxProps = {
    onChange?: (prop: boolean) => void;
    onPress?: (prop: boolean) => void;
    style?: StyleProp<ViewStyle>;
    value?: boolean | undefined;
    disabled?: boolean;
    iconColor?: string;
};
export type ChipProps = {
    label?: string;
    textStyle?: StyleProp<TextStyle>;
    style?: StyleProp<ViewStyle>;
    value?: boolean;
    icon?: {
        iconName: string;
        iconType: IconType;
        iconPosition: 'left' | 'right';
    };
    colorStyle?: {
        backgroundColor: string;
        selectBackgroundColor: string;
        selectTitleColor: string;
        titleColor: string;
    };
    size?: 'large' | 'medium' | 'small';
    onChange: (event: boolean) => void;
    disable?: boolean;
};
export type DividerProps = {
    borderStyle?: 'solid' | 'dotted' | 'dashed';
    width?: number;
    color?: string;
    style?: StyleProp<ViewStyle>;
};
export type DrowdownProps = {
    selectall?: boolean;
    disabled?: boolean | undefined;
    displayLength?: number;
    data: Array<object | string>;
    buttonStyle?: StyleProp<ViewStyle>;
    displayedRowValue: (item: string | object) => any;
    displayedButtonValue: (item: string | object) => any;
    containerStyle?: StyleProp<ViewStyle>;
    buttonTitle?: string;
    rowStyle?: StyleProp<ViewStyle>;
    onSelect?: (item: Array<string> | Array<object> | object | string) => void;
    defaultValue?: Array<object | string>;
    rowTextStyle?: StyleProp<TextStyle>;
    buttonTextStyle?: StyleProp<TextStyle>;
    listContainerStyle?: StyleProp<ViewStyle>;
    left?: (isVisible: boolean) => React.ReactNode;
    right?: (isVisible: boolean) => React.ReactNode;
    onComplete?: (item: string | object) => void;
    buttonBackgrounColor?: {
        focusBackground: string;
        defaultBackground: string;
    };
    iconStyle?: {
        color: string;
        container: StyleProp<ViewStyle>;
    };
    autoPosition?: boolean;
    testID?: string;
};
export type DrowdownRouteProps = DrowdownProps & {
    multiple?: boolean;
};
export type IconButtonProps = {
    iconColor?: string;
    containerColor?: string;
    style: ViewStyle;
    icon: {
        type: IconType;
        name: string;
        size: number;
    };
    focusedColor: string;
};
export type IconProps = {
    name: string;
    color?: string;
    size: number;
    style?: ViewStyle;
    allowFontScaling?: boolean;
};
export type IconComponentProps = TextProps & {
    name: string;
    color?: string;
    size: number;
    pointerEvents?: ViewProps['pointerEvents'];
};
export type IconComponentType = React.ComponentType<TextProps & {
    name: string;
    color?: string;
    size: number;
    pointerEvents?: ViewProps['pointerEvents'];
}>;
export type MenuProps = {
    items: Array<{
        label: string;
        left?: React.ReactNode;
        right?: React.ReactNode;
        onPress?: () => void;
    }>;
    containerStyle?: StyleProp<ViewStyle>;
    labelStyle?: StyleProp<TextStyle>;
    dividerColor?: string;
    menuStyle?: ViewStyle;
    button?: (isOpen: boolean) => React.ReactNode;
    rowStyle?: StyleProp<ViewStyle>;
    closeOnPress?: boolean;
};
export type ProgressBarProps = {
    progress?: number;
    barColor?: string;
    progressColor?: string;
    progressStyle?: StyleProp<ViewStyle>;
    testID?: string;
};
export type RadioButtonProps = {
    onChange: (event: boolean) => void;
    style?: StyleProp<ViewStyle>;
    testID: string;
};
export type SearchBarProps = {
    size?: 'small' | 'medium' | 'large';
    style?: StyleProp<ViewStyle>;
    value?: string;
    filterPattern: (text: string) => Array<any>;
    filterOnChange: (event: any) => any;
};
export type SliderProps = {
    showPercentage?: boolean;
    onChangeEnd: (value: number) => void;
    value?: number;
    buttonStyle?: StyleProp<ViewStyle>;
    barStyle?: StyleProp<ViewStyle>;
    progressStyle?: StyleProp<ViewStyle>;
};
export type ActionProps = {
    text?: string;
    style?: StyleProp<ViewStyle>;
    icon?: React.ReactNode;
    textStyle?: StyleProp<TextStyle>;
    onPress?: (ref: React.RefObject<Swipeable>) => void;
};
export type SwipeProps = {
    children?: any;
    variant?: 'radius' | 'no-radius';
    rightActions?: Array<ActionProps>;
    leftAction?: ActionProps;
};
export type RenderRightActionProps = {
    item: ActionProps;
    dragValue: number;
    progress: Animated.AnimatedInterpolation<string | number>;
    index: number;
};
export type TextInputProps = {
    size?: 'large' | 'medium' | 'small';
    iconPosition?: 'left' | 'right';
    labelColor?: {
        focus: string;
        default: string;
    };
    helperText?: string;
    helperTextStyle?: StyleProp<TextStyle>;
    variant?: 'filled' | 'outlined';
    inputContainerStyle?: StyleProp<ViewStyle>;
    labelContainerStyle?: StyleProp<ViewStyle>;
    count?: boolean;
    label?: string;
    labelStyle?: StyleProp<TextStyle>;
    editable?: boolean;
    inputStyle?: StyleProp<TextStyle>;
    errorMessage?: string;
    containerStyle?: StyleProp<ViewStyle>;
    error?: boolean;
    left?: React.ReactNode;
    right?: React.ReactNode;
};
export type ToggleButtonProps = {
    buttons: {
        label: string;
        onPress: (event: boolean) => void;
        id?: number;
    }[];
    size?: 'small' | 'medium';
};
export type SpeedDialProps = {
    items: Array<{
        icon?: React.ReactNode;
        title?: string;
        titleColor?: string;
        backgroundColor?: string;
        onPress?: () => void;
    }>;
    baseItemBackground?: string;
    variant: 'flat' | 'spread';
    onChange?: (event: boolean) => void;
    baseItemIcon?: React.ReactNode;
};
export type ModalProps = {
    containerStyle?: StyleProp<ViewStyle>;
    modalStyle?: StyleProp<ViewStyle>;
    visible?: boolean;
    children?: React.ReactNode;
};
export type NotificationProps = {
    items: [{
        status: 'SUCCESS' | 'WARNING' | 'ERROR' | 'INFO';
        header?: string;
        message?: string;
        keyID?: number;
    }];
    containerStyle?: StyleProp<ViewStyle>;
    limit?: number;
};
export type PagerViewProps = {
    children: React.ReactNode;
    containerStyle?: StyleProp<ViewStyle>;
    pageContainerStyle?: StyleProp<ViewStyle>;
    injectPagerRef?: boolean;
    headerTextColor?: {
        select: string;
        default: string;
    };
    headerSliderStyle?: StyleProp<ViewStyle>;
    headerContainerStyle?: StyleProp<ViewStyle>;
    headerTextStyle?: StyleProp<TextStyle>;
    showDivider?: boolean;
    dividerStyle?: StyleProp<ViewStyle>;
    dividerColor?: string;
    icons?: React.ReactElement<typeof Icon>[];
};
export type ActivityIndicatorProps = {
    children?: React.ReactNode;
};
export type IconType = 'material' | 'material-community' | 'simple-line-icon' | 'zocial' | 'font-awesome' | 'octicon' | 'ionicon' | 'foundation' | 'feather' | 'ant-design' | 'fontisto' | 'evilicon' | 'entypo' | 'antdesign' | 'font-awesome-5';