[TS migration] Migrate 'SubscriptAvatar.js' component to TypeScript

src/components/SubscriptAvatar.js → src/components/SubscriptAvatar.tsx

@@ -1,46 +1,59 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {memo} from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
+import {ValueOf} from 'type-fest';
+import type {AvatarSource} from '@libs/UserUtils';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import Avatar from './Avatar';
-import avatarPropTypes from './avatarPropTypes';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
-const propTypes = {
+type SubAvatar = {
+    /** Avatar source to display */
+    source?: AvatarSource;
+
+    /** Denotes whether it is an avatar or a workspace avatar */
+    type?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+
+    /** Owner of the avatar. If user, displayName. If workspace, policy name */
+    name?: string;
+
+    /** Avatar id */
+    id?: number | string;
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon?: AvatarSource;
+};
+
+type SubscriptAvatarProps = {
     /** Avatar URL or icon */
-    mainAvatar: avatarPropTypes,
+    mainAvatar?: SubAvatar;
 
     /** Subscript avatar URL or icon */
-    secondaryAvatar: avatarPropTypes,
+    secondaryAvatar?: SubAvatar;
 
     /** Set the size of avatars */
-    size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+    size?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
     /** Background color used for subscript avatar border */
-    backgroundColor: PropTypes.string,
+    backgroundColor?: string;
 
     /** Removes margin from around the avatar, used for the chat view */
-    noMargin: PropTypes.bool,
+    noMargin?: boolean;
 
     /** Whether to show the tooltip */
-    showTooltip: PropTypes.bool,
-};
-
-const defaultProps = {
-    size: CONST.AVATAR_SIZE.DEFAULT,
-    backgroundColor: themeColors.componentBG,
-    mainAvatar: {},
-    secondaryAvatar: {},
-    noMargin: false,
-    showTooltip: true,
+    showTooltip?: boolean;
 };
 
-function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, noMargin, showTooltip}) {
+function SubscriptAvatar({
+    mainAvatar = {},
+    secondaryAvatar = {},
+    size = CONST.AVATAR_SIZE.DEFAULT,
+    backgroundColor = themeColors.componentBG,
+    noMargin = false,
+    showTooltip = true,
+}: SubscriptAvatarProps) {
     const isSmall = size === CONST.AVATAR_SIZE.SMALL;
     const subscriptStyle = size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript;
     const containerStyle = StyleUtils.getContainerStyles(size);
@@ -49,14 +62,14 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
         <View style={[containerStyle, noMargin ? styles.mr0 : {}]}>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={lodashGet(mainAvatar, 'id', -1)}
+                accountID={mainAvatar.id ?? -1}
                 icon={mainAvatar}
             >
                 <View>
                     <Avatar
                         containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(size || CONST.AVATAR_SIZE.DEFAULT))}
                         source={mainAvatar.source}
-                        size={size || CONST.AVATAR_SIZE.DEFAULT}
+                        size={size}
                         name={mainAvatar.name}
                         type={mainAvatar.type}
                         fallbackIcon={mainAvatar.fallbackIcon}
@@ -65,7 +78,7 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
             </UserDetailsTooltip>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={lodashGet(secondaryAvatar, 'id', -1)}
+                accountID={secondaryAvatar.id ?? -1}
                 icon={secondaryAvatar}
             >
                 <View
@@ -93,6 +106,5 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
 }
 
 SubscriptAvatar.displayName = 'SubscriptAvatar';
-SubscriptAvatar.propTypes = propTypes;
-SubscriptAvatar.defaultProps = defaultProps;
+
 export default memo(SubscriptAvatar);

src/libs/UserUtils.ts

@@ -8,6 +8,8 @@ import hashCode from './hashCode';
 
 type AvatarRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 
+type AvatarSource = React.FC<SvgProps> | string;
+
 type LoginListIndicator = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | '';
 
 /**
@@ -202,3 +204,4 @@ export {
     getFullSizeAvatar,
     generateAccountID,
 };
+export type {AvatarSource};

src/styles/StyleUtils.ts

@@ -1286,8 +1286,8 @@ function getAmountFontSizeAndLineHeight(baseFontSize: number, baseLineHeight: nu
 /**
  * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar
  */
-function getContainerStyles(size: string, isInReportAction = false): Array<ViewStyle | CSSProperties> {
-    let containerStyles: Array<ViewStyle | CSSProperties>;
+function getContainerStyles(size: string, isInReportAction = false): ViewStyle[] {
+    let containerStyles: ViewStyle[];
 
     switch (size) {
         case CONST.AVATAR_SIZE.SMALL: