Skip to content

Commit bef3a14

Browse files
mollfprmollfpr
authored
Merge pull request Expensify#76965 from annaweber830/refix-75257
Migrate icons integration - status & indicators to lazy loading
2 parents bd71fbc + 80b7656 commit bef3a14

54 files changed

Lines changed: 371 additions & 265 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/AttachmentOfflineIndicator.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, {useEffect, useState} from 'react';
22
import {View} from 'react-native';
3+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
34
import useLocalize from '@hooks/useLocalize';
45
import useNetwork from '@hooks/useNetwork';
56
import useTheme from '@hooks/useTheme';
67
import useThemeStyles from '@hooks/useThemeStyles';
78
import variables from '@styles/variables';
89
import Icon from './Icon';
9-
import * as Expensicons from './Icon/Expensicons';
1010
import Text from './Text';
1111

1212
type AttachmentOfflineIndicatorProps = {
@@ -16,6 +16,7 @@ type AttachmentOfflineIndicatorProps = {
1616

1717
function AttachmentOfflineIndicator({isPreview = false}: AttachmentOfflineIndicatorProps) {
1818
const theme = useTheme();
19+
const icons = useMemoizedLazyExpensifyIcons(['OfflineCloud']);
1920
const styles = useThemeStyles();
2021
const {isOffline} = useNetwork();
2122
const {translate} = useLocalize();
@@ -38,7 +39,7 @@ function AttachmentOfflineIndicator({isPreview = false}: AttachmentOfflineIndica
3839
<View style={[styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter, styles.pAbsolute, styles.h100, styles.w100, isPreview && styles.hoveredComponentBG]}>
3940
<Icon
4041
fill={theme.icon}
41-
src={Expensicons.OfflineCloud}
42+
src={icons.OfflineCloud}
4243
width={variables.iconSizeSuperLarge}
4344
height={variables.iconSizeSuperLarge}
4445
/>

‎src/components/Attachments/AttachmentView/HighResolutionInfo.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import {View} from 'react-native';
33
import Icon from '@components/Icon';
4-
import * as Expensicons from '@components/Icon/Expensicons';
54
import Text from '@components/Text';
5+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
66
import useLocalize from '@hooks/useLocalize';
77
import useStyleUtils from '@hooks/useStyleUtils';
88
import useTheme from '@hooks/useTheme';
@@ -14,11 +14,11 @@ function HighResolutionInfo({isUploaded}: {isUploaded: boolean}) {
1414
const styles = useThemeStyles();
1515
const stylesUtils = useStyleUtils();
1616
const {translate} = useLocalize();
17-
17+
const icons = useMemoizedLazyExpensifyIcons(['Info'] as const);
1818
return (
1919
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.justifyContentCenter, stylesUtils.getHighResolutionInfoWrapperStyle(isUploaded)]}>
2020
<Icon
21-
src={Expensicons.Info}
21+
src={icons.Info}
2222
height={variables.iconSizeExtraSmall}
2323
width={variables.iconSizeExtraSmall}
2424
fill={theme.icon}

‎src/components/Banner.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {memo} from 'react';
22
import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
33
import {View} from 'react-native';
4+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
45
import useLocalize from '@hooks/useLocalize';
56
import useStyleUtils from '@hooks/useStyleUtils';
67
import useTheme from '@hooks/useTheme';
@@ -11,7 +12,6 @@ import type IconAsset from '@src/types/utils/IconAsset';
1112
import Button from './Button';
1213
import Hoverable from './Hoverable';
1314
import Icon from './Icon';
14-
import * as Expensicons from './Icon/Expensicons';
1515
import PressableWithFeedback from './Pressable/PressableWithFeedback';
1616
import RenderHTML from './RenderHTML';
1717
import Text from './Text';
@@ -58,7 +58,7 @@ type BannerProps = {
5858
function Banner({
5959
text,
6060
content,
61-
icon = Expensicons.Exclamation,
61+
icon,
6262
onClose,
6363
onPress,
6464
onButtonPress,
@@ -73,6 +73,9 @@ function Banner({
7373
const styles = useThemeStyles();
7474
const StyleUtils = useStyleUtils();
7575
const {translate} = useLocalize();
76+
const expensifyIcons = useMemoizedLazyExpensifyIcons(['Exclamation', 'Close']);
77+
78+
const displayIcon = icon ?? expensifyIcons.Exclamation;
7679

7780
return (
7881
<Hoverable>
@@ -92,10 +95,10 @@ function Banner({
9295
]}
9396
>
9497
<View style={[styles.flexRow, styles.flex1, styles.mw100, styles.alignItemsCenter]}>
95-
{shouldShowIcon && !!icon && (
98+
{shouldShowIcon && !!displayIcon && (
9699
<View style={[styles.mr3]}>
97100
<Icon
98-
src={icon}
101+
src={displayIcon}
99102
fill={StyleUtils.getIconFillColor(getButtonState(shouldHighlight))}
100103
/>
101104
</View>
@@ -131,7 +134,7 @@ function Banner({
131134
accessibilityLabel={translate('common.close')}
132135
>
133136
<Icon
134-
src={Expensicons.Close}
137+
src={expensifyIcons.Close}
135138
fill={theme.icon}
136139
/>
137140
</PressableWithFeedback>

‎src/components/BlockingViews/FullPageOfflineBlockingView.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import * as Expensicons from '@components/Icon/Expensicons';
2+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
33
import useLocalize from '@hooks/useLocalize';
44
import useNetwork from '@hooks/useNetwork';
55
import useTheme from '@hooks/useTheme';
@@ -17,13 +17,14 @@ type FullPageOfflineBlockingViewProps = ChildrenProps & {
1717
function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true, addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding}: FullPageOfflineBlockingViewProps) {
1818
const {translate} = useLocalize();
1919
const {isOffline} = useNetwork();
20+
const icons = useMemoizedLazyExpensifyIcons(['OfflineCloud'] as const);
2021

2122
const theme = useTheme();
2223

2324
if (isOffline) {
2425
return (
2526
<BlockingView
26-
icon={Expensicons.OfflineCloud}
27+
icon={icons.OfflineCloud}
2728
iconColor={theme.offline}
2829
title={translate('common.youAppearToBeOffline')}
2930
subtitle={translate('common.thisFeatureRequiresInternet')}

‎src/components/FormHelpMessage.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import isEmpty from 'lodash/isEmpty';
22
import React, {useMemo} from 'react';
33
import type {StyleProp, ViewStyle} from 'react-native';
44
import {View} from 'react-native';
5+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
56
import useTheme from '@hooks/useTheme';
67
import useThemeStyles from '@hooks/useThemeStyles';
78
import Parser from '@libs/Parser';
89
import Icon from './Icon';
9-
import * as Expensicons from './Icon/Expensicons';
1010
import RenderHTML from './RenderHTML';
1111
import Text from './Text';
1212

@@ -36,6 +36,7 @@ type FormHelpMessageProps = {
3636
function FormHelpMessage({message = '', children, isError = true, style, shouldShowRedDotIndicator = true, shouldRenderMessageAsHTML = false, isInfo = false}: FormHelpMessageProps) {
3737
const theme = useTheme();
3838
const styles = useThemeStyles();
39+
const icons = useMemoizedLazyExpensifyIcons(['DotIndicator', 'Exclamation'] as const);
3940

4041
const HTMLMessage = useMemo(() => {
4142
if (typeof message !== 'string' || !shouldRenderMessageAsHTML) {
@@ -59,13 +60,13 @@ function FormHelpMessage({message = '', children, isError = true, style, shouldS
5960
<View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.mb1, style]}>
6061
{isError && shouldShowRedDotIndicator && (
6162
<Icon
62-
src={Expensicons.DotIndicator}
63+
src={icons.DotIndicator}
6364
fill={theme.danger}
6465
/>
6566
)}
6667
{isInfo && (
6768
<Icon
68-
src={Expensicons.Exclamation}
69+
src={icons.Exclamation}
6970
fill={theme.icon}
7071
small
7172
additionalStyles={[styles.mr1]}

‎src/components/GrowlNotification/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import {Directions, Gesture, GestureDetector} from 'react-native-gesture-handler
55
import {useSharedValue, withSpring} from 'react-native-reanimated';
66
import type {SvgProps} from 'react-native-svg';
77
import Icon from '@components/Icon';
8-
import * as Expensicons from '@components/Icon/Expensicons';
98
import * as Pressables from '@components/Pressable';
109
import Text from '@components/Text';
10+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
1111
import useTheme from '@hooks/useTheme';
1212
import useThemeStyles from '@hooks/useThemeStyles';
1313
import {setIsReady} from '@libs/Growl';
1414
import type {GrowlRef} from '@libs/Growl';
1515
import CONST from '@src/CONST';
16+
import type IconAsset from '@src/types/utils/IconAsset';
1617
import GrowlNotificationContainer from './GrowlNotificationContainer';
1718

1819
const INACTIVE_POSITION_Y = -255;
@@ -31,6 +32,7 @@ function GrowlNotification({ref}: GrowlNotificationProps) {
3132
const [duration, setDuration] = useState<number>();
3233
const theme = useTheme();
3334
const styles = useThemeStyles();
35+
const icons = useMemoizedLazyExpensifyIcons(['Exclamation', 'Checkmark'] as const);
3436

3537
type GrowlIconTypes = Record<
3638
/** String representing the growl type, all type strings
@@ -39,7 +41,7 @@ function GrowlNotification({ref}: GrowlNotificationProps) {
3941
string,
4042
{
4143
/** Expensicon for the page */
42-
icon: React.FC<SvgProps>;
44+
icon: React.FC<SvgProps> | IconAsset;
4345

4446
/** Color for the icon (should be from theme) */
4547
iconColor: string;
@@ -48,15 +50,15 @@ function GrowlNotification({ref}: GrowlNotificationProps) {
4850

4951
const types: GrowlIconTypes = {
5052
[CONST.GROWL.SUCCESS]: {
51-
icon: Expensicons.Checkmark,
53+
icon: icons.Checkmark,
5254
iconColor: theme.success,
5355
},
5456
[CONST.GROWL.ERROR]: {
55-
icon: Expensicons.Exclamation,
57+
icon: icons.Exclamation,
5658
iconColor: theme.danger,
5759
},
5860
[CONST.GROWL.WARNING]: {
59-
icon: Expensicons.Exclamation,
61+
icon: icons.Exclamation,
6062
iconColor: theme.warning,
6163
},
6264
};

‎src/components/ImportedFromAccountingSoftware.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import {View} from 'react-native';
33
import useEnvironment from '@hooks/useEnvironment';
4+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
45
import useLocalize from '@hooks/useLocalize';
56
import useStyleUtils from '@hooks/useStyleUtils';
67
import useThemeStyles from '@hooks/useThemeStyles';
@@ -33,7 +34,8 @@ function ImportedFromAccountingSoftware({policyID, currentConnectionName, transl
3334
const StyleUtils = useStyleUtils();
3435
const {translate} = useLocalize();
3536
const {environmentURL} = useEnvironment();
36-
const icon = getIntegrationIcon(connectedIntegration);
37+
const expensifyIcons = useMemoizedLazyExpensifyIcons(['XeroSquare', 'QBOSquare', 'NetSuiteSquare', 'IntacctSquare', 'QBDSquare'] as const);
38+
const icon = getIntegrationIcon(connectedIntegration, expensifyIcons);
3739

3840
return (
3941
<View style={[styles.alignItemsCenter, styles.flexRow, styles.flexWrap]}>

‎src/components/InlineSystemMessage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import {View} from 'react-native';
3+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
34
import useTheme from '@hooks/useTheme';
45
import useThemeStyles from '@hooks/useThemeStyles';
56
import Icon from './Icon';
6-
import * as Expensicons from './Icon/Expensicons';
77
import Text from './Text';
88

99
type InlineSystemMessageProps = {
@@ -14,15 +14,15 @@ type InlineSystemMessageProps = {
1414
function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
1515
const theme = useTheme();
1616
const styles = useThemeStyles();
17-
17+
const icons = useMemoizedLazyExpensifyIcons(['Exclamation'] as const);
1818
if (!message) {
1919
return null;
2020
}
2121

2222
return (
2323
<View style={[styles.flexRow, styles.alignItemsCenter]}>
2424
<Icon
25-
src={Expensicons.Exclamation}
25+
src={icons.Exclamation}
2626
fill={theme.danger}
2727
/>
2828
<Text style={styles.inlineSystemMessage}>{message}</Text>

‎src/components/MoneyReportHeader.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,10 @@ function MoneyReportHeader({
232232
'Info',
233233
'Export',
234234
'Document',
235+
'XeroExport',
236+
'QBOExport',
237+
'NetSuiteExport',
238+
'SageIntacctExport',
235239
'Feed',
236240
'Close',
237241
'Location',
@@ -787,7 +791,10 @@ function MoneyReportHeader({
787791
[CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION]: {
788792
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
789793
text: translate('workspace.common.exportIntegrationSelected', {connectionName: connectedIntegrationFallback!}),
790-
icon: getIntegrationExportIcon(connectedIntegration ?? connectedIntegrationFallback),
794+
icon: (() => {
795+
const iconName = getIntegrationExportIcon(connectedIntegration ?? connectedIntegrationFallback);
796+
return iconName ? expensifyIcons[iconName] : undefined;
797+
})(),
791798
value: CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION,
792799
onSelected: () => {
793800
if (!connectedIntegration || !moneyRequestReport) {
@@ -802,7 +809,10 @@ function MoneyReportHeader({
802809
},
803810
[CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED]: {
804811
text: translate('workspace.common.markAsExported'),
805-
icon: getIntegrationExportIcon(connectedIntegration ?? connectedIntegrationFallback),
812+
icon: (() => {
813+
const iconName = getIntegrationExportIcon(connectedIntegration ?? connectedIntegrationFallback);
814+
return iconName ? expensifyIcons[iconName] : undefined;
815+
})(),
806816
value: CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED,
807817
onSelected: () => {
808818
if (!connectedIntegration || !moneyRequestReport) {

‎src/components/MoneyReportHeaderStatusBar.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {useMemo} from 'react';
22
import {View} from 'react-native';
33
import type {ValueOf} from 'type-fest';
44
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
5+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
56
import useTheme from '@hooks/useTheme';
67
import useThemeStyles from '@hooks/useThemeStyles';
78
import {parseMessage} from '@libs/NextStepUtils';
@@ -10,7 +11,6 @@ import CONST from '@src/CONST';
1011
import type ReportNextStepDeprecated from '@src/types/onyx/ReportNextStepDeprecated';
1112
import type IconAsset from '@src/types/utils/IconAsset';
1213
import Icon from './Icon';
13-
import * as Expensicons from './Icon/Expensicons';
1414
import RenderHTML from './RenderHTML';
1515

1616
type MoneyReportHeaderStatusBarProps = {
@@ -20,15 +20,19 @@ type MoneyReportHeaderStatusBarProps = {
2020

2121
type IconName = ValueOf<typeof CONST.NEXT_STEP.ICONS>;
2222
type IconMap = Record<IconName, IconAsset>;
23-
const iconMap: IconMap = {
24-
[CONST.NEXT_STEP.ICONS.HOURGLASS]: Expensicons.Hourglass,
25-
[CONST.NEXT_STEP.ICONS.CHECKMARK]: Expensicons.Checkmark,
26-
[CONST.NEXT_STEP.ICONS.STOPWATCH]: Expensicons.Stopwatch,
27-
};
2823

2924
function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps) {
3025
const styles = useThemeStyles();
3126
const theme = useTheme();
27+
const icons = useMemoizedLazyExpensifyIcons(['Hourglass', 'Checkmark', 'Stopwatch'] as const);
28+
const iconMap: IconMap = useMemo(
29+
() => ({
30+
[CONST.NEXT_STEP.ICONS.HOURGLASS]: icons.Hourglass,
31+
[CONST.NEXT_STEP.ICONS.CHECKMARK]: icons.Checkmark,
32+
[CONST.NEXT_STEP.ICONS.STOPWATCH]: icons.Stopwatch,
33+
}),
34+
[icons],
35+
);
3236
const currentUserPersonalDetails = useCurrentUserPersonalDetails();
3337
const currentUserEmail = currentUserPersonalDetails.login ?? '';
3438
const messageContent = useMemo(() => {
@@ -40,7 +44,7 @@ function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps)
4044
<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100, styles.headerStatusBarContainer]}>
4145
<View style={[styles.mr3]}>
4246
<Icon
43-
src={(nextStep?.icon && iconMap?.[nextStep.icon]) ?? Expensicons.Hourglass}
47+
src={(nextStep?.icon && iconMap?.[nextStep.icon]) ?? icons.Hourglass}
4448
height={variables.iconSizeSmall}
4549
width={variables.iconSizeSmall}
4650
fill={theme.icon}

0 commit comments

Comments
 (0)