Add IconAsset type, add lint fixes

software-mansion-labs · Dec 1, 2023 · bbda53a · bbda53a
1 parent 571bc7f
commit bbda53a
Show file tree

Hide file tree

Showing 14 changed files with 72 additions and 82 deletions.
diff --git a/assets/emojis/types.ts b/assets/emojis/types.ts
@@ -1,5 +1,4 @@
-import {ImageSourcePropType} from 'react-native';
-import {SvgProps} from 'react-native-svg';
+import IconAsset from '@src/types/utils/IconAsset';
 
 type Emoji = {
     code: string;
@@ -9,7 +8,7 @@ type Emoji = {
 
 type HeaderEmoji = {
     header: true;
-    icon: React.FC<SvgProps> | ImageSourcePropType;
+    icon: IconAsset;
     code: string;
 };
 

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,10 +1,8 @@
 import {useIsFocused} from '@react-navigation/native';
 import React, {ForwardedRef, useCallback} from 'react';
-import {ActivityIndicator, GestureResponderEvent, ImageSourcePropType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
-import {SvgProps} from 'react-native-svg';
+import {ActivityIndicator, GestureResponderEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import sourcePropTypes from '@components/Image/sourcePropTypes';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
@@ -14,6 +12,7 @@ import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
+import IconAsset from '@src/types/utils/IconAsset';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
 type ButtonWithText = {
@@ -24,15 +23,15 @@ type ButtonWithText = {
     shouldShowRightIcon?: boolean;
 
     /** The icon asset to display to the left of the text */
-    icon?: React.FC<SvgProps> | ImageSourcePropType | null;
+    icon?: IconAsset | null;
 };
 
 type ButtonProps = (ButtonWithText | ChildrenProps) & {
     /** Should the press event bubble across multiple instances when Enter key triggers it. */
     allowBubble?: boolean;
 
     /** The icon asset to display to the right of the text */
-    iconRight?: React.FC<SvgProps>;
+    iconRight?: IconAsset;
 
     /** The fill color to pass into the icon. */
     iconFill?: string;
@@ -196,7 +195,7 @@ function Button(
                     large && styles.buttonLargeText,
                     success && styles.buttonSuccessText,
                     danger && styles.buttonDangerText,
-                    icon && styles.textAlignLeft,
+                    Boolean(icon) && styles.textAlignLeft,
                     textStyles,
                 ]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}

diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
@@ -1,10 +1,10 @@
-import {SvgProps} from 'react-native-svg';
 import GenericBank from '@assets/images/bankicons/generic-bank-account.svg';
 import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg';
 import {ThemeStyles} from '@styles/styles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
+import IconAsset from '@src/types/utils/IconAsset';
 
 type BankIconParams = {
     themeStyles: ThemeStyles;
@@ -16,81 +16,67 @@ type BankIconParams = {
  * Returns matching asset icon for bankName
  */
 
-function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC<SvgProps> {
+function getIcon(bankNameKey: BankNameKey, isCard: boolean): IconAsset {
     const bankValue = CONST.BANK_NAMES[bankNameKey];
 
     // This maps bank names to their respective icon paths.
     // The purpose is to avoid importing these at the app startup stage.
     // Depending on whether 'isCard' is true, it selects either a card icon or a bank icon.
     const iconMappings = {
         [CONST.BANK_NAMES.EXPENSIFY]: isCard
-            ? (require('@assets/images/cardicons/expensify-card-dark.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/expensify.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/expensify-card-dark.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/expensify.svg').default as IconAsset),
         [CONST.BANK_NAMES.AMERICAN_EXPRESS]: isCard
-            ? (require('@assets/images/cardicons/american-express.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/american-express.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/american-express.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/american-express.svg').default as IconAsset),
         [CONST.BANK_NAMES.BANK_OF_AMERICA]: isCard
-            ? (require('@assets/images/cardicons/bank-of-america.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/bank-of-america.svg').default as React.FC<SvgProps>),
-        [CONST.BANK_NAMES.BB_T]: isCard
-            ? (require('@assets/images/cardicons/bb-t.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/bb-t.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/bank-of-america.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/bank-of-america.svg').default as IconAsset),
+        [CONST.BANK_NAMES.BB_T]: isCard ? (require('@assets/images/cardicons/bb-t.svg').default as IconAsset) : (require('@assets/images/bankicons/bb-t.svg').default as IconAsset),
         [CONST.BANK_NAMES.CAPITAL_ONE]: isCard
-            ? (require('@assets/images/cardicons/capital-one.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/capital-one.svg').default as React.FC<SvgProps>),
-        [CONST.BANK_NAMES.CHASE]: isCard
-            ? (require('@assets/images/cardicons/chase.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/chase.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/capital-one.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/capital-one.svg').default as IconAsset),
+        [CONST.BANK_NAMES.CHASE]: isCard ? (require('@assets/images/cardicons/chase.svg').default as IconAsset) : (require('@assets/images/bankicons/chase.svg').default as IconAsset),
         [CONST.BANK_NAMES.CHARLES_SCHWAB]: isCard
-            ? (require('@assets/images/cardicons/charles-schwab.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/charles-schwab.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/charles-schwab.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/charles-schwab.svg').default as IconAsset),
         [CONST.BANK_NAMES.CITIBANK]: isCard
-            ? (require('@assets/images/cardicons/citibank.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/citibank.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/citibank.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/citibank.svg').default as IconAsset),
         [CONST.BANK_NAMES.CITIZENS_BANK]: isCard
-            ? (require('@assets/images/cardicons/citizens.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/citizens-bank.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/citizens.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/citizens-bank.svg').default as IconAsset),
         [CONST.BANK_NAMES.DISCOVER]: isCard
-            ? (require('@assets/images/cardicons/discover.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/discover.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/discover.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/discover.svg').default as IconAsset),
         [CONST.BANK_NAMES.FIDELITY]: isCard
-            ? (require('@assets/images/cardicons/fidelity.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/fidelity.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/fidelity.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/fidelity.svg').default as IconAsset),
         [CONST.BANK_NAMES.GENERIC_BANK]: isCard
-            ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/generic-bank-card.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/generic-bank-account.svg').default as IconAsset),
         [CONST.BANK_NAMES.HUNTINGTON_BANK]: isCard
-            ? (require('@assets/images/cardicons/huntington-bank.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/huntington-bank.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/huntington-bank.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/huntington-bank.svg').default as IconAsset),
         [CONST.BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard
-            ? (require('@assets/images/cardicons/navy-federal-credit-union.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/navy-federal-credit-union.svg').default as React.FC<SvgProps>),
-        [CONST.BANK_NAMES.PNC]: isCard
-            ? (require('@assets/images/cardicons/pnc.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/pnc.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/navy-federal-credit-union.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/navy-federal-credit-union.svg').default as IconAsset),
+        [CONST.BANK_NAMES.PNC]: isCard ? (require('@assets/images/cardicons/pnc.svg').default as IconAsset) : (require('@assets/images/bankicons/pnc.svg').default as IconAsset),
         [CONST.BANK_NAMES.REGIONS_BANK]: isCard
-            ? (require('@assets/images/cardicons/regions-bank.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/regions-bank.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/regions-bank.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/regions-bank.svg').default as IconAsset),
         [CONST.BANK_NAMES.SUNTRUST]: isCard
-            ? (require('@assets/images/cardicons/suntrust.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/suntrust.svg').default as React.FC<SvgProps>),
-        [CONST.BANK_NAMES.TD_BANK]: isCard
-            ? (require('@assets/images/cardicons/td-bank.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/td-bank.svg').default as React.FC<SvgProps>),
-        [CONST.BANK_NAMES.US_BANK]: isCard
-            ? (require('@assets/images/cardicons/us-bank.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/us-bank.svg').default as React.FC<SvgProps>),
-        [CONST.BANK_NAMES.USAA]: isCard
-            ? (require('@assets/images/cardicons/usaa.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/usaa.svg').default as React.FC<SvgProps>),
+            ? (require('@assets/images/cardicons/suntrust.svg').default as IconAsset)
+            : (require('@assets/images/bankicons/suntrust.svg').default as IconAsset),
+        [CONST.BANK_NAMES.TD_BANK]: isCard ? (require('@assets/images/cardicons/td-bank.svg').default as IconAsset) : (require('@assets/images/bankicons/td-bank.svg').default as IconAsset),
+        [CONST.BANK_NAMES.US_BANK]: isCard ? (require('@assets/images/cardicons/us-bank.svg').default as IconAsset) : (require('@assets/images/bankicons/us-bank.svg').default as IconAsset),
+        [CONST.BANK_NAMES.USAA]: isCard ? (require('@assets/images/cardicons/usaa.svg').default as IconAsset) : (require('@assets/images/bankicons/usaa.svg').default as IconAsset),
     } as const;
 
     // Fallback to generic bank/card icon
     const iconModule =
         iconMappings[bankValue] ||
-        (isCard
-            ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC<SvgProps>)
-            : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC<SvgProps>));
+        (isCard ? (require('@assets/images/cardicons/generic-bank-card.svg').default as IconAsset) : (require('@assets/images/bankicons/generic-bank-account.svg').default as IconAsset));
     return iconModule;
 }
 
@@ -110,7 +96,7 @@ export default function getBankIcon({themeStyles, bankName, isCard = false}: Ban
         const bankNameKey = getBankNameKey(bankName.toLowerCase());
 
         if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) {
-            bankIcon.icon = getAssetIcon(bankNameKey, isCard);
+            bankIcon.icon = getIcon(bankNameKey, isCard);
         }
     }
 

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -58,7 +58,7 @@ class Icon extends PureComponent<IconProps> {
     public static defaultProps = {
         width: variables.iconSizeNormal,
         height: variables.iconSizeNormal,
-        fill: null,
+        fill: undefined,
         small: false,
         inline: false,
         additionalStyles: [],

diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {Icon} from '@src/types/onyx/OnyxCommon';
@@ -51,6 +52,7 @@ type MentionSuggestionsProps = {
 const keyExtractor = (item: Mention) => item.alternateText;
 
 function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSelect, isMentionPickerLarge, measureParentContainer = () => {}}: MentionSuggestionsProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     /**
      * Render a suggestion menu item component.

diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import * as UserUtils from '@libs/UserUtils';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/default';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
@@ -21,6 +22,7 @@ const defaultProps = {
 };
 
 function RoomHeaderAvatars(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     if (!props.icons.length) {
         return null;

diff --git a/src/libs/EmojiTrie.ts b/src/libs/EmojiTrie.ts
@@ -1,15 +1,13 @@
-import React from 'react';
-import {ImageSourcePropType} from 'react-native';
-import {SvgProps} from 'react-native-svg';
 import emojis, {localeEmojis} from '@assets/emojis';
 import CONST from '@src/CONST';
+import IconAsset from '@src/types/utils/IconAsset';
 import Timing from './actions/Timing';
 import Trie from './Trie';
 
 type HeaderEmoji = {
     code: string;
     header: boolean;
-    icon: React.FC<SvgProps> | ImageSourcePropType;
+    icon: IconAsset;
 };
 
 type SimpleEmoji = {

diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts
@@ -1,17 +1,16 @@
 import {getUnixTime} from 'date-fns';
 import Str from 'expensify-common/lib/str';
 import memoize from 'lodash/memoize';
-import {ImageSourcePropType} from 'react-native';
 import Onyx from 'react-native-onyx';
-import {SvgProps} from 'react-native-svg';
 import * as Emojis from '@assets/emojis';
 import {Emoji, HeaderEmoji, PickerEmojis} from '@assets/emojis/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {FrequentlyUsedEmoji} from '@src/types/onyx';
+import IconAsset from '@src/types/utils/IconAsset';
 import {SupportedLanguage} from './EmojiTrie';
 
-type HeaderIndice = {code: string; index: number; icon: React.FC<SvgProps> | ImageSourcePropType};
+type HeaderIndice = {code: string; index: number; icon: IconAsset};
 type EmojiSpacer = {code: string; spacer: boolean};
 type EmojiPickerList = Array<EmojiSpacer | Emoji | HeaderEmoji>;
 type ReplacedEmoji = {text: string; emojis: Emoji[]; cursorPosition?: number};

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
@@ -7,7 +7,6 @@ import lodashFindLastIndex from 'lodash/findLastIndex';
 import lodashIntersection from 'lodash/intersection';
 import lodashIsEqual from 'lodash/isEqual';
 import Onyx, {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
@@ -22,6 +21,7 @@ import {Message, ReportActions} from '@src/types/onyx/ReportAction';
 import {Receipt, WaypointCollection} from '@src/types/onyx/Transaction';
 import DeepValueOf from '@src/types/utils/DeepValueOf';
 import {EmptyObject, isEmptyObject, isNotEmptyObject} from '@src/types/utils/EmptyObject';
+import IconAsset from '@src/types/utils/IconAsset';
 import * as CurrencyUtils from './CurrencyUtils';
 import DateUtils from './DateUtils';
 import isReportMessageAttachment from './isReportMessageAttachment';
@@ -1150,7 +1150,7 @@ function formatReportLastMessageText(lastMessageText: string, isModifiedExpenseM
 /**
  * Helper method to return the default avatar associated with the given login
  */
-function getDefaultWorkspaceAvatar(workspaceName?: string): React.FC<SvgProps> {
+function getDefaultWorkspaceAvatar(workspaceName?: string): IconAsset {
     if (!workspaceName) {
         return defaultWorkspaceAvatars.WorkspaceBuilding;
     }
@@ -1172,7 +1172,7 @@ function getDefaultWorkspaceAvatar(workspaceName?: string): React.FC<SvgProps> {
  * @param {String} [workspaceName]
  * @returns {String}
  */
-function getDefaultWorkspaceAvatarTestID(workspaceName) {
+function getDefaultWorkspaceAvatarTestID(workspaceName: string): string {
     if (!workspaceName) {
         return defaultAvatarBuildingIconTestID;
     }

diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts
@@ -1,16 +1,15 @@
 import Str from 'expensify-common/lib/str';
-import {ImageSourcePropType} from 'react-native';
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import * as defaultAvatars from '@components/Icon/DefaultAvatars';
 import {ConciergeAvatar, FallbackAvatar} from '@components/Icon/Expensicons';
 import CONST from '@src/CONST';
 import Login from '@src/types/onyx/Login';
+import IconAsset from '@src/types/utils/IconAsset';
 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> | ImageSourcePropType | string;
+type AvatarSource = IconAsset | string;
 
 type LoginListIndicator = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | '';
 
@@ -74,7 +73,7 @@ function hashText(text: string, range: number): number {
  * @param [accountID]
  * @returns
  */
-function getDefaultAvatar(accountID = -1): React.FC<SvgProps> | ImageSourcePropType {
+function getDefaultAvatar(accountID = -1): IconAsset {
     if (accountID <= 0) {
         return FallbackAvatar;
     }

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -707,7 +707,7 @@ function ReportActionItem(props) {
                                     <View style={[styles.flexRow, styles.pl5, styles.pt2, styles.pr3]}>
                                         <View style={[styles.pl6, styles.mr3]}>
                                             <Icon
-                                                fill={themeColors.icon}
+                                                fill={theme.icon}
                                                 src={Expensicons.Eye}
                                                 small
                                             />

diff --git a/src/types/onyx/Bank.ts b/src/types/onyx/Bank.ts
@@ -1,11 +1,11 @@
 import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
+import IconAsset from '@src/types/utils/IconAsset';
 
 type BankIcon = {
-    icon: React.FC<SvgProps>;
+    icon: IconAsset;
     iconSize?: number;
     iconHeight?: number;
     iconWidth?: number;