chore(avatar) change avatar to

Author: leadmrn

src/framework/components/avatar/single.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Image, ImageProps } from 'react-native';
+import { Image, ImageProps, View } from 'react-native';
 
+import styles from './styles';
 import {
   CommonSingleAvatarProps,
   SingleAvatarOnlySpecificProps,
@@ -28,13 +29,10 @@ const useAvatarStyle = (props: Pick<SingleAvatarProps, 'size' | 'style'>) => {
     () => [
       props.style,
       {
+        aspectRatio: 1,
         backgroundColor: theme.ui.background.card,
-        borderColor: theme.palette.grey.white,
-        borderRadius: AvatarSizes[props.size] / 2 + UI_SIZES.border.small * 2,
-        borderWidth: UI_SIZES.border.small,
-        height: AvatarSizes[props.size] + UI_SIZES.border.small * 2,
-        margin: -UI_SIZES.border.small * 2,
-        width: AvatarSizes[props.size] + UI_SIZES.border.small * 2,
+        borderRadius: AvatarSizes[props.size] / 2,
+        width: AvatarSizes[props.size],
       },
     ],
     [props.size, props.style],
@@ -125,8 +123,39 @@ export function SingleAvatar(props: SingleAvatarProps) {
     setError(true);
   }, []);
 
+  const sizeValue = AvatarSizes[props.size];
+  const sizeContainer = React.useMemo(
+    () => (props.border ? sizeValue + UI_SIZES.border.small * 2 : sizeValue),
+    [props.border, sizeValue],
+  );
   const computedStyle = useAvatarStyle(props);
   const imageSource = useAvatarImage(props as SingleAvatarOnlySpecificProps, error);
 
-  return <Image style={computedStyle} source={imageSource} onError={onError} {...otherProps} />;
+  const sizeBorderStyles: any = React.useMemo(
+    () => ({
+      borderRadius: sizeContainer / 2,
+      width: sizeContainer,
+    }),
+    [sizeContainer],
+  );
+
+  const sizeContainerStyles: any = React.useMemo(
+    () => ({
+      height: sizeContainer,
+      width: sizeContainer,
+    }),
+    [sizeContainer],
+  );
+
+  const renderBorder = React.useCallback(() => {
+    if (!props.border) return null;
+    return <View style={[styles.border, sizeBorderStyles]} />;
+  }, [props.border, sizeBorderStyles]);
+
+  return (
+    <View style={[styles.container, sizeContainerStyles]}>
+      {renderBorder()}
+      <Image style={computedStyle} source={imageSource} onError={onError} {...otherProps} />
+    </View>
+  );
 }

src/framework/components/avatar/styles.tsx

@@ -2,6 +2,7 @@ import { ImageStyle, StyleSheet } from 'react-native';
 
 import * as Avatar from './types';
 
+import theme from '~/app/theme';
 import { UI_SIZES } from '~/framework/components/constants';
 
 export const AvatarSizes = {
@@ -13,5 +14,18 @@ export const AvatarSizes = {
 };
 
 export default StyleSheet.create({
+  border: {
+    backgroundColor: theme.palette.grey.white,
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
   singleAvatar: {} as ImageStyle,
 });

src/framework/components/avatar/types.tsx

@@ -12,6 +12,7 @@ export enum Size {
 
 export interface CommonSingleAvatarProps extends Omit<ImageProps, 'source'> {
   size: Size | keyof typeof Size; // Override width & height given in style property.
+  border?: boolean;
 }
 
 // User avatar

src/framework/components/list/account/item/component.tsx

@@ -51,7 +51,7 @@ const AccountListItem = <ItemT extends AuthSavedAccount | AuthLoggedAccount>({
 
   return (
     <TouchableOpacity style={[styles.container, containerBackgroundColor]} onPress={onSelectAccount}>
-      <SingleAvatar size="lg" {...avatarProps} />
+      <SingleAvatar size="lg" {...avatarProps} border />
       <View style={styles.textContainer}>
         <SmallText numberOfLines={numberOfLines}>{displayName}</SmallText>
         <SmallBoldText numberOfLines={numberOfLines} style={typeColor}>

src/framework/components/list/user-horizontal/component.tsx

@@ -38,7 +38,7 @@ const UserListItem = <ItemT extends DisplayUserPublic = DisplayUserPublic>(props
   const { renderUserDetails, style, ...info } = props;
   return (
     <View style={style}>
-      <SingleAvatar userId={info.item.id} size={Size.xxl} />
+      <SingleAvatar userId={info.item.id} size={Size.xxl} border />
       {(renderUserDetails ?? UserListItemDetails)(info)}
     </View>
   );

src/framework/modules/auth/components/large-horizontal-user-list/component.tsx

@@ -40,7 +40,7 @@ const UserExternalListItem = <
   );
   return (
     <View style={style}>
-      <SingleAvatar {...avatarProps} />
+      <SingleAvatar {...avatarProps} border />
       {(renderUserDetails ?? UserListItemDetails)(info)}
     </View>
   );

src/framework/modules/mails/components/avatar-recipient/component.tsx

@@ -5,8 +5,9 @@ import styles from './styles';
 import { MailsRecipientAvatarProps } from './types';
 
 import theme from '~/app/theme';
+import { SingleAvatar } from '~/framework/components/avatar';
+import { AvatarSizes } from '~/framework/components/avatar/styles';
 import { UI_SIZES } from '~/framework/components/constants';
-import { AvatarSize, NewAvatar, NewAvatarSizes } from '~/framework/components/newavatar';
 import { Svg } from '~/framework/components/picture';
 
 const iconType = {
@@ -19,11 +20,11 @@ const iconType = {
 const MailsRecipientAvatar = (props: MailsRecipientAvatarProps) => {
   const { id, type } = props;
 
-  if (type === 'User' && id) return <NewAvatar size={props.size ?? AvatarSize.md} userId={id} />;
+  if (type === 'User' && id) return <SingleAvatar size={props.size ?? 'md'} userId={id} />;
 
   const suppViewStyles: ViewStyle = {
     aspectRatio: 1,
-    width: NewAvatarSizes[props.size ?? AvatarSize.md],
+    width: AvatarSizes[props.size ?? 'md'],
   };
 
   return (

src/framework/modules/mails/components/avatar-recipient/types.ts

@@ -1,7 +1,7 @@
-import { AvatarSize } from '~/framework/components/newavatar';
+import { Size } from '~/framework/components/avatar';
 
 export interface MailsRecipientAvatarProps {
   id?: string;
   type: string;
-  size?: AvatarSize;
+  size?: Size | keyof typeof Size;
 }

src/framework/modules/mails/components/contact-item/component.tsx

@@ -7,7 +7,6 @@ import { MailsContactItemProps } from './types';
 
 import theme from '~/app/theme';
 import { UI_SIZES } from '~/framework/components/constants';
-import { AvatarSize } from '~/framework/components/newavatar';
 import { Svg } from '~/framework/components/picture';
 import { SmallBoldText, SmallText } from '~/framework/components/text';
 import MailsRecipientAvatar from '~/framework/modules/mails/components/avatar-recipient';
@@ -47,7 +46,7 @@ export const MailsContactItem = (props: MailsContactItemProps) => {
 
   return (
     <View style={styles.container}>
-      <MailsRecipientAvatar size={AvatarSize.sm} id={id} type={props.user.type} />
+      <MailsRecipientAvatar size="sm" id={id} type={props.user.type} />
       <SmallText style={styles.text} numberOfLines={1}>
         <SmallBoldText>{displayName}</SmallBoldText>
         {renderAccountType()}

src/framework/modules/mails/screens/details/screen.tsx

@@ -12,6 +12,7 @@ import type { MailsDetailsScreenPrivateProps } from './types';
 
 import { I18n } from '~/app/i18n';
 import theme from '~/app/theme';
+import { SingleAvatar } from '~/framework/components/avatar';
 import SecondaryButton from '~/framework/components/buttons/secondary';
 import TertiaryButton from '~/framework/components/buttons/tertiary';
 import { UI_SIZES } from '~/framework/components/constants';
@@ -20,7 +21,6 @@ import { RichEditorViewer } from '~/framework/components/inputs/rich-text';
 import PopupMenu from '~/framework/components/menus/popup';
 import BottomSheetModal, { BottomSheetModalMethods } from '~/framework/components/modals/bottom-sheet';
 import { NavBarAction, NavBarActionsGroup } from '~/framework/components/navigation';
-import { AvatarSize, NewAvatar } from '~/framework/components/newavatar';
 import { PageView } from '~/framework/components/page';
 import { Svg } from '~/framework/components/picture';
 import ScrollView from '~/framework/components/scrollView';
@@ -580,7 +580,7 @@ const MailsDetailsScreen = (props: MailsDetailsScreenPrivateProps) => {
         <ScrollView style={styles.page}>
           <HeadingXSText>{renderSubject(mail?.subject, isRecall)}</HeadingXSText>
           <View style={styles.topInfos}>
-            <NewAvatar size={AvatarSize.lg} userId={mail?.from.id} />
+            <SingleAvatar size="lg" userId={mail?.from.id} />
             <View style={styles.topInfosText}>
               <View style={styles.sender}>
                 <TouchableOpacity