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

package/package.json

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

package/src/components/avatar/index.js

@@ -55,6 +55,7 @@ const Avatar = forwardRef((props, ref) => {
     useAutoColors,
     autoColorsConfig,
     containerStyle,
+    ellipsizeMode = 'clip',
     onPress,
     children
   } = themeProps;
@@ -177,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>
@@ -193,7 +194,8 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: BorderRadiuses.br100
+    borderRadius: BorderRadiuses.br100,
+    overflow: 'hidden'
   },
   initialsContainerWithInset: {
     top: 1,

package/src/components/image/index.js

@@ -156,7 +156,7 @@ class Image extends PureComponent {
     } = modifiers;
     return (
       // @ts-ignore
-      <ImageView style={[Constants.isWeb && source?.dimensions, tintColor && {
+      <ImageView style={[tintColor && {
         tintColor
       }, shouldFlipRTL && styles.rtlFlipped, width && {
         width

package/src/assets/icons/index.web.js

@@ -1,27 +0,0 @@
-console.log(`inside index.web.js`);
-export const icons = {
-  get check() {
-    return {uri: require('./check.png'), dimensions: {width: 24, height: 24}};
-  },
-  get checkSmall() {
-    return {uri: require('./check-small.png'), dimensions: {width: 24, height: 24}};
-  },
-  get minusSmall() {
-    return {uri: require('./minusSmall.png'), dimensions: {width: 24, height: 24}};
-  },
-  get plusSmall() {
-    return {uri: require('./plusSmall.png'), dimensions: {width: 24, height: 24}};
-  },
-  get search() {
-    return {uri: require('./search.png'), dimensions: {width: 24, height: 24}};
-  },
-  get x() {
-    return {uri: require('./x.png'), dimensions: {width: 24, height: 24}};
-  },
-  get xMedium() {
-    return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}};
-  },
-  get xFlat() {
-    return {uri: require('./xFlat.png'), dimensions: {width: 24, height: 24}};
-  }
-};

package/src/assets/images/index.web.js

@@ -1,5 +0,0 @@
-export const images = {
-  get gradient() {
-    return {uri: require('./gradient.png'), dimensions: {width: 56, height: 2}};
-  }
-};