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

package/package.json

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

package/src/components/avatar/avatar.api.json

@@ -12,7 +12,7 @@
     {
       "name": "animate",
       "type": "boolean",
-      "description": "Adds fade in animation when Avatar image loads",
+      "description": "Adds fade in animation when Avatar image loads. This prop isn't supported on web (will be set to false by default when using web).",
       "default": "false"
     },
     {"name": "backgroundColor", "type": "string", "description": "Background color for Avatar"},

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, TextProps, AccessibilityProps } from 'react-native';
+import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, 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'> & Pick<TextProps, 'ellipsizeMode'> & PropsWithChildren<{
+export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & 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"> & Pick<TextProps, "ellipsizeMode"> & {
+declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "accessibilityLabel"> & {
     /**
      * Adds fade in animation when Avatar image loads
      */
@@ -162,6 +162,9 @@ 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;
@@ -259,7 +262,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
     children?: React.ReactNode;
 } & React.RefAttributes<any>>;
 export { Avatar };
-declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "accessibilityLabel"> & Pick<TextProps, "ellipsizeMode"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "accessibilityLabel"> & {
     /**
      * Adds fade in animation when Avatar image loads
      */
@@ -288,6 +291,9 @@ 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,6 +16,7 @@ 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";
@@ -55,7 +56,6 @@ 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) ? AnimatedImage : Image;
+      const ImageContainer = animate && !isSvg(source) && !Constants.isWeb ? 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} ellipsizeMode={ellipsizeMode} style={textStyle} testID={`${testID}.label`}>
+        {!_isUndefined(text) && <Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
             {text}
           </Text>}
       </View>
@@ -194,8 +194,7 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: BorderRadiuses.br100,
-    overflow: 'hidden'
+    borderRadius: BorderRadiuses.br100
   },
   initialsContainerWithInset: {
     top: 1,

package/src/components/badge/index.js

@@ -10,6 +10,8 @@ import Image from "../image";
 import View from "../view";
 import Text from "../text";
 const LABEL_FORMATTER_VALUES = [1, 2, 3, 4];
+const DEFAULT_PIMPLE_SIZE = 10;
+const DEFAULT_BADGE_SIZE = 20;
 /**
  * @description: Round colored badge, typically used to show a number
  * @extends: View
@@ -37,7 +39,14 @@ class Badge extends PureComponent {
     };
   }
   get size() {
-    return this.props.size || 20;
+    const {
+      size,
+      label
+    } = this.props;
+    if (size !== undefined) {
+      return size;
+    }
+    return label === undefined ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE;
   }
   isSmallBadge() {
     return this.size <= 16;