From bbda53ae52a5123d833cf3773d373e1fb2660ad6 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 1 Dec 2023 16:09:27 +0100 Subject: [PATCH] Add IconAsset type, add lint fixes --- assets/emojis/types.ts | 5 +- src/components/Button/index.tsx | 11 ++- src/components/Icon/BankIcons.ts | 90 ++++++++++------------- src/components/Icon/index.tsx | 2 +- src/components/MentionSuggestions.tsx | 2 + src/components/RoomHeaderAvatars.js | 2 + src/libs/EmojiTrie.ts | 6 +- src/libs/EmojiUtils.ts | 5 +- src/libs/ReportUtils.ts | 6 +- src/libs/UserUtils.ts | 7 +- src/pages/home/report/ReportActionItem.js | 2 +- src/types/onyx/Bank.ts | 4 +- src/types/onyx/PaymentMethod.ts | 6 +- src/types/utils/IconAsset.ts | 6 ++ 14 files changed, 72 insertions(+), 82 deletions(-) create mode 100644 src/types/utils/IconAsset.ts diff --git a/assets/emojis/types.ts b/assets/emojis/types.ts index 585561fa191a..c3a3b692f202 100644 --- 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 | ImageSourcePropType; + icon: IconAsset; code: string; }; diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 036636a859b3..e74587763371 100644 --- 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,7 +23,7 @@ type ButtonWithText = { shouldShowRightIcon?: boolean; /** The icon asset to display to the left of the text */ - icon?: React.FC | ImageSourcePropType | null; + icon?: IconAsset | null; }; type ButtonProps = (ButtonWithText | ChildrenProps) & { @@ -32,7 +31,7 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & { allowBubble?: boolean; /** The icon asset to display to the right of the text */ - iconRight?: React.FC; + 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 index 81e9075091c6..306ced07f307 100644 --- 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,7 +16,7 @@ type BankIconParams = { * Returns matching asset icon for bankName */ -function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC { +function getIcon(bankNameKey: BankNameKey, isCard: boolean): IconAsset { const bankValue = CONST.BANK_NAMES[bankNameKey]; // This maps bank names to their respective icon paths. @@ -24,73 +24,59 @@ function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC) - : (require('@assets/images/bankicons/expensify.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/american-express.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/bank-of-america.svg').default as React.FC), - [CONST.BANK_NAMES.BB_T]: isCard - ? (require('@assets/images/cardicons/bb-t.svg').default as React.FC) - : (require('@assets/images/bankicons/bb-t.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/capital-one.svg').default as React.FC), - [CONST.BANK_NAMES.CHASE]: isCard - ? (require('@assets/images/cardicons/chase.svg').default as React.FC) - : (require('@assets/images/bankicons/chase.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/charles-schwab.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/citibank.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/citizens-bank.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/discover.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/fidelity.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/huntington-bank.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/navy-federal-credit-union.svg').default as React.FC), - [CONST.BANK_NAMES.PNC]: isCard - ? (require('@assets/images/cardicons/pnc.svg').default as React.FC) - : (require('@assets/images/bankicons/pnc.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/regions-bank.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/suntrust.svg').default as React.FC), - [CONST.BANK_NAMES.TD_BANK]: isCard - ? (require('@assets/images/cardicons/td-bank.svg').default as React.FC) - : (require('@assets/images/bankicons/td-bank.svg').default as React.FC), - [CONST.BANK_NAMES.US_BANK]: isCard - ? (require('@assets/images/cardicons/us-bank.svg').default as React.FC) - : (require('@assets/images/bankicons/us-bank.svg').default as React.FC), - [CONST.BANK_NAMES.USAA]: isCard - ? (require('@assets/images/cardicons/usaa.svg').default as React.FC) - : (require('@assets/images/bankicons/usaa.svg').default as React.FC), + ? (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) - : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC)); + (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 index a9093afd939f..3dd2dfd65149 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -58,7 +58,7 @@ class Icon extends PureComponent { 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 index e74cf7dd4b2c..d1601732199d 100644 --- 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 index 3a47ea1dce1a..82859dfb8219 100644 --- 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 index 7c449afe8282..0100f279066a 100644 --- 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 | ImageSourcePropType; + icon: IconAsset; }; type SimpleEmoji = { diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts index 41285fbb29d1..c9271fb9bf5b 100644 --- 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 | ImageSourcePropType}; +type HeaderIndice = {code: string; index: number; icon: IconAsset}; type EmojiSpacer = {code: string; spacer: boolean}; type EmojiPickerList = Array; type ReplacedEmoji = {text: string; emojis: Emoji[]; cursorPosition?: number}; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 26135828b0a9..55718c50a810 100644 --- 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 { +function getDefaultWorkspaceAvatar(workspaceName?: string): IconAsset { if (!workspaceName) { return defaultWorkspaceAvatars.WorkspaceBuilding; } @@ -1172,7 +1172,7 @@ function getDefaultWorkspaceAvatar(workspaceName?: string): React.FC { * @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 index 9fa08461003f..fb480a123d21 100644 --- 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 | ImageSourcePropType | string; +type AvatarSource = IconAsset | string; type LoginListIndicator = ValueOf | ''; @@ -74,7 +73,7 @@ function hashText(text: string, range: number): number { * @param [accountID] * @returns */ -function getDefaultAvatar(accountID = -1): React.FC | 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 index f44bf84aa2e1..a31d8be0d569 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -707,7 +707,7 @@ function ReportActionItem(props) { diff --git a/src/types/onyx/Bank.ts b/src/types/onyx/Bank.ts index b6312e039079..f8d8819207e3 100644 --- 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; + icon: IconAsset; iconSize?: number; iconHeight?: number; iconWidth?: number; diff --git a/src/types/onyx/PaymentMethod.ts b/src/types/onyx/PaymentMethod.ts index aead20cace39..5be093046ad0 100644 --- a/src/types/onyx/PaymentMethod.ts +++ b/src/types/onyx/PaymentMethod.ts @@ -1,12 +1,12 @@ import {CSSProperties} from 'react'; -import {ImageSourcePropType, ViewStyle} from 'react-native'; -import {SvgProps} from 'react-native-svg'; +import {ViewStyle} from 'react-native'; +import IconAsset from '@src/types/utils/IconAsset'; import BankAccount from './BankAccount'; import Fund from './Fund'; type PaymentMethod = (BankAccount | Fund) & { description: string; - icon: React.FC | ImageSourcePropType; + icon: IconAsset; iconSize?: number; iconHeight?: number; iconWidth?: number; diff --git a/src/types/utils/IconAsset.ts b/src/types/utils/IconAsset.ts new file mode 100644 index 000000000000..45a79b8286ef --- /dev/null +++ b/src/types/utils/IconAsset.ts @@ -0,0 +1,6 @@ +import {ImageSourcePropType} from 'react-native'; +import {SvgProps} from 'react-native-svg/lib/typescript'; + +type IconAsset = React.FC | ImageSourcePropType; + +export default IconAsset;