react-native-ui-lib 8.1.1 → 8.1.5

package/src/components/avatar/index.d.ts

@@ -0,0 +1,382 @@
+import React, { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, TextProps, AccessibilityProps } from 'react-native';
+import { BadgeProps } from '../badge';
+import { ImageProps } from '../image';
+import { AnimatedImageProps } from '../animatedImage';
+export declare enum BadgePosition {
+    TOP_RIGHT = "TOP_RIGHT",
+    TOP_LEFT = "TOP_LEFT",
+    BOTTOM_RIGHT = "BOTTOM_RIGHT",
+    BOTTOM_LEFT = "BOTTOM_LEFT"
+}
+export type AutoColorsProps = {
+    /**
+     * Avatar colors to be used when useAutoColors is true
+     */
+    avatarColors?: string[];
+    /**
+     * Replace the default hashing function (name -> number)
+     */
+    hashFunction?: (name?: string) => number;
+    /**
+     * Background color in cases where the getBackgroundColor returns undefined.
+     */
+    defaultColor?: string;
+};
+export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & PropsWithChildren<{
+    /**
+     * Adds fade in animation when Avatar image loads
+     */
+    animate?: boolean;
+    /**
+     * Background color for Avatar
+     */
+    backgroundColor?: string;
+    /**
+     * Badge location on Avatar
+     */
+    badgePosition?: `${BadgePosition}` | BadgePosition;
+    /**
+     * Badge props passed down to Badge component
+     */
+    badgeProps?: BadgeProps;
+    /**
+     * Additional spacing styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The image source (external or assets)
+     */
+    source?: ImageProps['source'];
+    /**
+     * Image props object
+     */
+    imageProps?: Partial<ImageProps & AnimatedImageProps>;
+    /**
+     * Image style object used to pass additional style props
+     * by components which render image
+     */
+    imageStyle?: ImageStyle;
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * starts (equiv. to Image.onLoadStart()).
+     */
+    onImageLoadStart?: ImagePropsBase['onLoadStart'];
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * either succeeds or fails (equiv. to Image.onLoadEnd()).
+     */
+    onImageLoadEnd?: ImagePropsBase['onLoadEnd'];
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * fails (equiv. to Image.onError()).
+     */
+    onImageLoadError?: ImagePropsBase['onError'];
+    /**
+     * The name of the avatar user.
+     * If no label is provided, the initials will be generated from the name.
+     * autoColorsConfig will use the name to create the background color of the Avatar.
+     */
+    name?: string;
+    /**
+     * Hash the name (or label) to get a color, so each name will have a specific color.
+     * Default is false.
+     */
+    useAutoColors?: boolean;
+    /**
+     * Send this to use the name to infer a backgroundColor
+     */
+    autoColorsConfig?: AutoColorsProps;
+    /**
+     * Label that can represent initials
+     */
+    label?: string;
+    /**
+     * The label color
+     */
+    labelColor?: string;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
+    /**
+     * ribbon label to display on the avatar
+     */
+    ribbonLabel?: string;
+    /**
+     * ribbon custom style
+     */
+    ribbonStyle?: StyleProp<ViewStyle>;
+    /**
+     * ribbon label custom style
+     */
+    ribbonLabelStyle?: StyleProp<TextStyle>;
+    /**
+     * Custom ribbon
+     */
+    customRibbon?: JSX.Element;
+    /**
+     * Custom size for the Avatar
+     */
+    size?: number;
+    /**
+     * Press handler
+     */
+    onPress?: (props: any) => void;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}>;
+interface Statics {
+    badgePosition: typeof BadgePosition;
+}
+/**
+ * @description: Avatar component for displaying user profile images
+ * @extends: TouchableOpacity, Image
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_1.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_2.png?raw=true
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.tsx
+ */
+declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "accessibilityLabel"> & {
+    /**
+     * Adds fade in animation when Avatar image loads
+     */
+    animate?: boolean | undefined;
+    /**
+     * Background color for Avatar
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Badge location on Avatar
+     */
+    badgePosition?: "TOP_RIGHT" | "TOP_LEFT" | "BOTTOM_RIGHT" | "BOTTOM_LEFT" | BadgePosition | undefined;
+    /**
+     * Badge props passed down to Badge component
+     */
+    badgeProps?: BadgeProps | undefined;
+    /**
+     * Additional spacing styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The image source (external or assets)
+     */
+    source?: ImageProps['source'];
+    /**
+     * Image props object
+     */
+    imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
+        sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
+        assetName?: string | undefined;
+        assetGroup?: string | undefined;
+        tintColor?: string | undefined;
+        supportRTL?: boolean | undefined;
+        cover?: boolean | undefined;
+        aspectRatio?: number | undefined;
+        overlayType?: string | undefined;
+        overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
+        overlayColor?: string | undefined;
+        customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+        errorSource?: import("../image").ImageSourceType;
+        imageId?: string | undefined;
+        useBackgroundContainer?: boolean | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        source: import("../image").ImageSourceType;
+    } & AnimatedImageProps> | undefined;
+    /**
+     * Image style object used to pass additional style props
+     * by components which render image
+     */
+    imageStyle?: ImageStyle | undefined;
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * starts (equiv. to Image.onLoadStart()).
+     */
+    onImageLoadStart?: ImagePropsBase['onLoadStart'];
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * either succeeds or fails (equiv. to Image.onLoadEnd()).
+     */
+    onImageLoadEnd?: ImagePropsBase['onLoadEnd'];
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * fails (equiv. to Image.onError()).
+     */
+    onImageLoadError?: ImagePropsBase['onError'];
+    /**
+     * The name of the avatar user.
+     * If no label is provided, the initials will be generated from the name.
+     * autoColorsConfig will use the name to create the background color of the Avatar.
+     */
+    name?: string | undefined;
+    /**
+     * Hash the name (or label) to get a color, so each name will have a specific color.
+     * Default is false.
+     */
+    useAutoColors?: boolean | undefined;
+    /**
+     * Send this to use the name to infer a backgroundColor
+     */
+    autoColorsConfig?: AutoColorsProps | undefined;
+    /**
+     * Label that can represent initials
+     */
+    label?: string | undefined;
+    /**
+     * The label color
+     */
+    labelColor?: string | undefined;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
+    /**
+     * ribbon label to display on the avatar
+     */
+    ribbonLabel?: string | undefined;
+    /**
+     * ribbon custom style
+     */
+    ribbonStyle?: StyleProp<ViewStyle>;
+    /**
+     * ribbon label custom style
+     */
+    ribbonLabelStyle?: StyleProp<TextStyle>;
+    /**
+     * Custom ribbon
+     */
+    customRibbon?: JSX.Element | undefined;
+    /**
+     * Custom size for the Avatar
+     */
+    size?: number | undefined;
+    /**
+     * Press handler
+     */
+    onPress?: ((props: any) => void) | undefined;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<any>>;
+export { Avatar };
+declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "accessibilityLabel"> & {
+    /**
+     * Adds fade in animation when Avatar image loads
+     */
+    animate?: boolean | undefined;
+    /**
+     * Background color for Avatar
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Badge location on Avatar
+     */
+    badgePosition?: "TOP_RIGHT" | "TOP_LEFT" | "BOTTOM_RIGHT" | "BOTTOM_LEFT" | BadgePosition | undefined;
+    /**
+     * Badge props passed down to Badge component
+     */
+    badgeProps?: BadgeProps | undefined;
+    /**
+     * Additional spacing styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The image source (external or assets)
+     */
+    source?: import("../image").ImageSourceType;
+    /**
+     * Image props object
+     */
+    imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
+        sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
+        assetName?: string | undefined;
+        assetGroup?: string | undefined;
+        tintColor?: string | undefined;
+        supportRTL?: boolean | undefined;
+        cover?: boolean | undefined;
+        aspectRatio?: number | undefined;
+        overlayType?: string | undefined;
+        overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
+        overlayColor?: string | undefined;
+        customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+        errorSource?: import("../image").ImageSourceType;
+        imageId?: string | undefined;
+        useBackgroundContainer?: boolean | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        source: import("../image").ImageSourceType;
+    } & AnimatedImageProps> | undefined;
+    /**
+     * Image style object used to pass additional style props
+     * by components which render image
+     */
+    imageStyle?: ImageStyle | undefined;
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * starts (equiv. to Image.onLoadStart()).
+     */
+    onImageLoadStart?: (() => void) | undefined;
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * either succeeds or fails (equiv. to Image.onLoadEnd()).
+     */
+    onImageLoadEnd?: (() => void) | undefined;
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * fails (equiv. to Image.onError()).
+     */
+    onImageLoadError?: ((error: import("react-native").NativeSyntheticEvent<import("react-native").ImageErrorEventData>) => void) | undefined;
+    /**
+     * The name of the avatar user.
+     * If no label is provided, the initials will be generated from the name.
+     * autoColorsConfig will use the name to create the background color of the Avatar.
+     */
+    name?: string | undefined;
+    /**
+     * Hash the name (or label) to get a color, so each name will have a specific color.
+     * Default is false.
+     */
+    useAutoColors?: boolean | undefined;
+    /**
+     * Send this to use the name to infer a backgroundColor
+     */
+    autoColorsConfig?: AutoColorsProps | undefined;
+    /**
+     * Label that can represent initials
+     */
+    label?: string | undefined;
+    /**
+     * The label color
+     */
+    labelColor?: string | undefined;
+    labelEllipsizeMode?: "middle" | "head" | "tail" | "clip" | undefined;
+    /**
+     * ribbon label to display on the avatar
+     */
+    ribbonLabel?: string | undefined;
+    /**
+     * ribbon custom style
+     */
+    ribbonStyle?: StyleProp<ViewStyle>;
+    /**
+     * ribbon label custom style
+     */
+    ribbonLabelStyle?: StyleProp<TextStyle>;
+    /**
+     * Custom ribbon
+     */
+    customRibbon?: JSX.Element | undefined;
+    /**
+     * Custom size for the Avatar
+     */
+    size?: number | undefined;
+    /**
+     * Press handler
+     */
+    onPress?: ((props: any) => void) | undefined;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<any>> & Statics;
+export default _default;