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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.1-snapshot.6311",
+  "version": "7.38.1-snapshot.6312",
   "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, 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
      */
@@ -166,23 +166,25 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        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;
+        imageId?: string | undefined; /**
+         * Listener-callback for when an image's (uri) loading
+         * fails (equiv. to Image.onError()).
+         */
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType;
+        source: import("../image").ImageSourceType; /**
+         * Hash the name (or label) to get a color, so each name will have a specific color.
+         * Default is false.
+         */
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props
@@ -259,7 +261,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
      */
@@ -292,23 +294,25 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        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;
+        imageId?: string | undefined; /**
+         * Listener-callback for when an image's (uri) loading
+         * fails (equiv. to Image.onError()).
+         */
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType;
+        source: import("../image").ImageSourceType; /**
+         * Hash the name (or label) to get a color, so each name will have a specific color.
+         * Default is false.
+         */
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props

package/src/components/avatar/index.js

@@ -55,7 +55,6 @@ const Avatar = forwardRef((props, ref) => {
     useAutoColors,
     autoColorsConfig,
     containerStyle,
-    ellipsizeMode = 'clip',
     onPress,
     children
   } = themeProps;
@@ -178,7 +177,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 +193,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;