react-native-ui-lib 7.38.1-snapshot.6307 → 7.38.1-snapshot.6311

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.1-snapshot.6307",
+  "version": "7.38.1-snapshot.6311",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
+import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, TextProps, AccessibilityProps } from 'react-native';
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
 import { AnimatedImageProps } from '../animatedImage';
@@ -23,7 +23,7 @@ export type AutoColorsProps = {
      */
     defaultColor?: string;
 };
-export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & PropsWithChildren<{
+export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & Pick<TextProps, 'ellipsizeMode'> & PropsWithChildren<{
     /**
      * Adds fade in animation when Avatar image loads
      */
@@ -133,7 +133,7 @@ interface Statics {
  * @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"> & {
+declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "accessibilityLabel"> & Pick<TextProps, "ellipsizeMode"> & {
     /**
      * Adds fade in animation when Avatar image loads
      */
@@ -162,9 +162,6 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * 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 & {
-        /**
-         * Avatar colors to be used when useAutoColors is true
-         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
@@ -262,7 +259,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
     children?: React.ReactNode;
 } & React.RefAttributes<any>>;
 export { Avatar };
-declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "accessibilityLabel"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "accessibilityLabel"> & Pick<TextProps, "ellipsizeMode"> & {
     /**
      * Adds fade in animation when Avatar image loads
      */
@@ -291,9 +288,6 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * 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 & {
-        /**
-         * Avatar colors to be used when useAutoColors is true
-         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;

package/src/components/avatar/index.js

@@ -16,7 +16,6 @@ import AnimatedImage from "../animatedImage";
 import * as AvatarHelper from "../../helpers/AvatarHelper";
 import { useThemeProps } from "../../hooks";
 import { isSvg } from "../../utils/imageUtils";
-import Constants from "../../commons/Constants";
 export let BadgePosition = /*#__PURE__*/function (BadgePosition) {
   BadgePosition["TOP_RIGHT"] = "TOP_RIGHT";
   BadgePosition["TOP_LEFT"] = "TOP_LEFT";
@@ -56,6 +55,7 @@ const Avatar = forwardRef((props, ref) => {
     useAutoColors,
     autoColorsConfig,
     containerStyle,
+    ellipsizeMode = 'clip',
     onPress,
     children
   } = themeProps;
@@ -150,7 +150,7 @@ const Avatar = forwardRef((props, ref) => {
   const renderImage = () => {
     if (source !== undefined) {
       // Looks like reanimated does not support SVG
-      const ImageContainer = animate && !isSvg(source) && !Constants.isWeb ? AnimatedImage : Image;
+      const ImageContainer = animate && !isSvg(source) ? AnimatedImage : Image;
       return <ImageContainer style={_imageStyle} source={source} onLoadStart={onImageLoadStart} onLoadEnd={onImageLoadEnd} onError={onImageLoadError} testID={`${testID}.image`} width={size} height={size} containerStyle={_baseContainerStyle} {...imageProps} />;
     }
   };
@@ -178,7 +178,7 @@ const Avatar = forwardRef((props, ref) => {
   const Container = onPress ? TouchableOpacity : View;
   return <Container style={_containerStyle} ref={ref} testID={testID} onPress={onPress} accessible={!_isUndefined(onPress)} accessibilityLabel={'Avatar'} accessibilityRole={onPress ? 'button' : 'image'} hitSlop={onPress ? hitTargetPadding : undefined} {...accessibilityProps}>
       <View testID={`${testID}.container`} style={textContainerStyle}>
-        {!_isUndefined(text) && <Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
+        {!_isUndefined(text) && <Text numberOfLines={1} ellipsizeMode={ellipsizeMode} style={textStyle} testID={`${testID}.label`}>
             {text}
           </Text>}
       </View>
@@ -194,7 +194,8 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: BorderRadiuses.br100
+    borderRadius: BorderRadiuses.br100,
+    overflow: 'hidden'
   },
   initialsContainerWithInset: {
     top: 1,