From 5f7f138d631aaadb13ab108ce5b7dec212f08147 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Mon, 2 May 2022 13:23:50 +0530 Subject: [PATCH 1/7] Added a fallback icon when getting error on loading image --- assets/images/avatars/fallback-avatar.svg | 25 +++++++++++++++++++++++ src/components/Avatar.js | 25 ++++++++++++++++++----- src/components/Icon/Expensicons.js | 2 ++ 3 files changed, 47 insertions(+), 5 deletions(-) create mode 100644 assets/images/avatars/fallback-avatar.svg diff --git a/assets/images/avatars/fallback-avatar.svg b/assets/images/avatars/fallback-avatar.svg new file mode 100644 index 000000000000..dc1a1497cfe5 --- /dev/null +++ b/assets/images/avatars/fallback-avatar.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 71ecd130ed9d..6e51400230e1 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -7,6 +7,7 @@ import Icon from './Icon'; import themeColors from '../styles/themes/default'; import CONST from '../CONST'; import * as StyleUtils from '../styles/StyleUtils'; +import * as Expensicons from './Icon/Expensicons'; const propTypes = { /** Source for the avatar. Can be a URL or an icon. */ @@ -34,6 +35,13 @@ const defaultProps = { }; class Avatar extends PureComponent { + constructor(props) { + super(props); + this.state = { + isErrorFetchingImage: false, + }; + } + render() { if (!this.props.source) { return null; @@ -47,11 +55,18 @@ class Avatar extends PureComponent { const iconSize = StyleUtils.getAvatarSize(this.props.size); return ( - { - _.isFunction(this.props.source) - ? - : - } + {_.isFunction(this.props.source) || this.state.isErrorFetchingImage + ? ( + + ) + : ( + this.setState({isErrorFetchingImage: true})} /> + )} ); } diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 4d98f1146930..34a38b209a69 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -74,6 +74,7 @@ import ActiveRoomAvatar from '../../../assets/images/avatars/room.svg'; import DeletedRoomAvatar from '../../../assets/images/avatars/deleted-room.svg'; import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg'; import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg'; +import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg'; import Connect from '../../../assets/images/connect.svg'; export { @@ -81,6 +82,7 @@ export { AdminRoomAvatar, Android, AnnounceRoomAvatar, + FallbackAvatar, Apple, ArrowRight, BackArrow, From b78ecd25aba025da3c2e0ddd9671b1d717de27a6 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Mon, 2 May 2022 23:25:30 +0530 Subject: [PATCH 2/7] changed alphabetic order for import and added default background color to avatar --- src/components/Avatar.js | 10 +++++----- src/components/Icon/Expensicons.js | 14 +++++++------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 6e51400230e1..8d47ef043507 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -38,7 +38,7 @@ class Avatar extends PureComponent { constructor(props) { super(props); this.state = { - isErrorFetchingImage: false, + imageError: false, }; } @@ -55,17 +55,17 @@ class Avatar extends PureComponent { const iconSize = StyleUtils.getAvatarSize(this.props.size); return ( - {_.isFunction(this.props.source) || this.state.isErrorFetchingImage + {_.isFunction(this.props.source) || this.state.imageError ? ( ) : ( - this.setState({isErrorFetchingImage: true})} /> + this.setState({imageError: true})} /> )} ); diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 34a38b209a69..dcb9107525dd 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -1,3 +1,6 @@ +import ActiveRoomAvatar from '../../../assets/images/avatars/room.svg'; +import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg'; +import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg'; import Android from '../../../assets/images/android.svg'; import Apple from '../../../assets/images/apple.svg'; import ArrowRight from '../../../assets/images/arrow-right.svg'; @@ -17,7 +20,9 @@ import Clipboard from '../../../assets/images/clipboard.svg'; import Close from '../../../assets/images/close.svg'; import ClosedSign from '../../../assets/images/closed-sign.svg'; import Concierge from '../../../assets/images/concierge.svg'; +import Connect from '../../../assets/images/connect.svg'; import CreditCard from '../../../assets/images/creditcard.svg'; +import DeletedRoomAvatar from '../../../assets/images/avatars/deleted-room.svg'; import DownArrow from '../../../assets/images/down.svg'; import Download from '../../../assets/images/download.svg'; import Emoji from '../../../assets/images/emoji.svg'; @@ -26,6 +31,7 @@ import Exit from '../../../assets/images/exit.svg'; import Eye from '../../../assets/images/eye.svg'; import EyeDisabled from '../../../assets/images/eye-disabled.svg'; import ExpensifyCard from '../../../assets/images/expensifycard.svg'; +import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg'; import Gallery from '../../../assets/images/gallery.svg'; import Gear from '../../../assets/images/gear.svg'; import Hashtag from '../../../assets/images/hashtag.svg'; @@ -70,19 +76,12 @@ import Users from '../../../assets/images/users.svg'; import Venmo from '../../../assets/images/venmo.svg'; import Wallet from '../../../assets/images/wallet.svg'; import Workspace from '../../../assets/images/workspace-default-avatar.svg'; -import ActiveRoomAvatar from '../../../assets/images/avatars/room.svg'; -import DeletedRoomAvatar from '../../../assets/images/avatars/deleted-room.svg'; -import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg'; -import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg'; -import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg'; -import Connect from '../../../assets/images/connect.svg'; export { ActiveRoomAvatar, AdminRoomAvatar, Android, AnnounceRoomAvatar, - FallbackAvatar, Apple, ArrowRight, BackArrow, @@ -112,6 +111,7 @@ export { Eye, EyeDisabled, ExpensifyCard, + FallbackAvatar, Gallery, Gear, Hashtag, From 126598b531501bad90bc8dd9d62c46552b5e57b7 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 3 May 2022 19:29:25 +0530 Subject: [PATCH 3/7] added conditional fill --- src/components/Avatar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 8d47ef043507..706d4cddf637 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -59,7 +59,8 @@ class Avatar extends PureComponent { ? ( From 3e87eea6884f5e1ba417800d5b2062a5a27594c9 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Wed, 4 May 2022 19:46:41 +0530 Subject: [PATCH 4/7] added condition for height and width in avatar, added different fallback icon for workspace --- .../avatars/fallback-workspace-avatar.svg | 15 +++++++++++++++ src/components/Avatar.js | 19 +++++++++++++------ src/components/AvatarWithImagePicker.js | 5 +++++ src/components/Icon/Expensicons.js | 2 ++ src/components/MenuItem.js | 2 ++ src/components/menuItemPropTypes.js | 3 +++ src/pages/settings/InitialSettingsPage.js | 2 ++ src/pages/workspace/WorkspaceInitialPage.js | 2 ++ src/pages/workspace/WorkspaceSettingsPage.js | 1 + src/styles/StyleUtils.js | 1 + 10 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 assets/images/avatars/fallback-workspace-avatar.svg diff --git a/assets/images/avatars/fallback-workspace-avatar.svg b/assets/images/avatars/fallback-workspace-avatar.svg new file mode 100644 index 000000000000..ac2f58122a0f --- /dev/null +++ b/assets/images/avatars/fallback-workspace-avatar.svg @@ -0,0 +1,15 @@ + + + + + + + diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 706d4cddf637..e59b0cff0320 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -24,6 +24,9 @@ const propTypes = { /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue' */ fill: PropTypes.string, + + /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ + isWorkSpace: PropTypes.bool, }; const defaultProps = { @@ -32,6 +35,7 @@ const defaultProps = { containerStyles: [], size: CONST.AVATAR_SIZE.DEFAULT, fill: themeColors.icon, + isWorkSpace: false, }; class Avatar extends PureComponent { @@ -53,20 +57,23 @@ class Avatar extends PureComponent { ]; const iconSize = StyleUtils.getAvatarSize(this.props.size); + const isHeightDefine = _.find(this.props.imageStyles, 'height'); + const isWidthDefine = _.find(this.props.imageStyles, 'width'); + const fallbackAvatar = this.props.isWorkSpace ? Expensicons.FallbackWorkspaceAvatar : Expensicons.FallbackAvatar; + return ( {_.isFunction(this.props.source) || this.state.imageError ? ( ) : ( - this.setState({imageError: true})} /> + this.setState({imageError: true})} /> )} ); diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 7ac5303b02b8..a75b7a016fd7 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -53,6 +53,9 @@ const propTypes = { /** Size of Indicator */ size: PropTypes.oneOf([CONST.AVATAR_SIZE.LARGE, CONST.AVATAR_SIZE.DEFAULT]), + /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ + isWorkSpace: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -65,6 +68,7 @@ const defaultProps = { isUsingDefaultAvatar: false, isUploading: false, size: CONST.AVATAR_SIZE.DEFAULT, + isWorkSpace: false, }; class AvatarWithImagePicker extends React.Component { @@ -181,6 +185,7 @@ class AvatarWithImagePicker extends React.Component { containerStyles={styles.avatarLarge} imageStyles={[styles.avatarLarge, styles.alignSelfCenter]} source={this.props.avatarURL} + isWorkSpace={this.props.isWorkSpace} /> ) : ( diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index dcb9107525dd..a1cf6ff17ca8 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -32,6 +32,7 @@ import Eye from '../../../assets/images/eye.svg'; import EyeDisabled from '../../../assets/images/eye-disabled.svg'; import ExpensifyCard from '../../../assets/images/expensifycard.svg'; import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg'; +import FallbackWorkspaceAvatar from '../../../assets/images/avatars/fallback-workspace-avatar.svg'; import Gallery from '../../../assets/images/gallery.svg'; import Gear from '../../../assets/images/gear.svg'; import Hashtag from '../../../assets/images/hashtag.svg'; @@ -112,6 +113,7 @@ export { EyeDisabled, ExpensifyCard, FallbackAvatar, + FallbackWorkspaceAvatar, Gallery, Gear, Hashtag, diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 6c5c20eb008e..c20a346dd538 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -39,6 +39,7 @@ const defaultProps = { iconType: 'icon', onPress: () => {}, interactive: true, + isWorkSpace: false, }; const MenuItem = props => ( @@ -87,6 +88,7 @@ const MenuItem = props => ( )} diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 0ad5a43498af..5906634c4dff 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -63,6 +63,9 @@ const propTypes = { /** Whether the menu item should be interactive at all */ interactive: PropTypes.bool, + + /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ + isWorkSpace: PropTypes.bool, }; export default propTypes; diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index 2bb4544fabb2..d5190b7aacec 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -141,6 +141,7 @@ const InitialSettingsPage = (props) => { action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)), iconStyles: [styles.popoverMenuIconEmphasized], iconFill: themeColors.iconReversed, + isWorkSpace: true, })) .value(); menuItems.push(...defaultMenuItems); @@ -195,6 +196,7 @@ const InitialSettingsPage = (props) => { iconFill={item.iconFill} shouldShowRightIcon badgeText={(isPaymentItem && Permissions.canUseWallet(props.betas)) ? walletBalance : undefined} + isWorkSpace={item.isWorkSpace} /> ); })} diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 3e43faf56c14..9d165944e30d 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -156,6 +156,7 @@ class WorkspaceInitialPage extends React.Component { containerStyles={styles.avatarLarge} imageStyles={[styles.avatarLarge, styles.alignSelfCenter]} source={this.props.policy.avatarURL} + isWorkSpace /> ) : ( @@ -200,6 +201,7 @@ class WorkspaceInitialPage extends React.Component { iconRight={item.iconRight} onPress={() => item.action()} shouldShowRightIcon + isWorkSpace /> ))} diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index a0bb45fcbe6b..33c12ee75e81 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -149,6 +149,7 @@ class WorkspaceSettingsPage extends React.Component { fill={defaultTheme.iconSuccessFill} /> )} + isWorkSpace style={[styles.mb3]} anchorPosition={{top: 172, right: 18}} isUsingDefaultAvatar={!this.state.previewAvatarURL} diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 7b1ced1f7ec6..4da69f75d427 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -36,6 +36,7 @@ function getAvatarStyle(size) { height: avatarSize, width: avatarSize, borderRadius: avatarSize, + backgroundColor: themeColors.offline, }; } From fdf2fe46b3fbaf79bf170a2704f20fe0f35e83c6 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Wed, 4 May 2022 23:56:51 +0530 Subject: [PATCH 5/7] added size and fallbackIcon props where avatar component used --- src/components/Avatar.js | 13 +++++-------- src/components/AvatarWithImagePicker.js | 7 ++++--- src/components/AvatarWithIndicator.js | 1 + src/components/MenuItem.js | 4 ++-- src/components/menuItemPropTypes.js | 2 +- src/pages/DetailsPage.js | 1 + src/pages/settings/InitialSettingsPage.js | 4 ++-- src/pages/workspace/WorkspaceInitialPage.js | 5 +++-- src/pages/workspace/WorkspaceSettingsPage.js | 2 +- 9 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index e59b0cff0320..e961080bdd49 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -26,7 +26,7 @@ const propTypes = { fill: PropTypes.string, /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ - isWorkSpace: PropTypes.bool, + fallbackIcon: PropTypes.string, }; const defaultProps = { @@ -35,7 +35,7 @@ const defaultProps = { containerStyles: [], size: CONST.AVATAR_SIZE.DEFAULT, fill: themeColors.icon, - isWorkSpace: false, + fallbackIcon: Expensicons.FallbackAvatar, }; class Avatar extends PureComponent { @@ -57,18 +57,15 @@ class Avatar extends PureComponent { ]; const iconSize = StyleUtils.getAvatarSize(this.props.size); - const isHeightDefine = _.find(this.props.imageStyles, 'height'); - const isWidthDefine = _.find(this.props.imageStyles, 'width'); - const fallbackAvatar = this.props.isWorkSpace ? Expensicons.FallbackWorkspaceAvatar : Expensicons.FallbackAvatar; return ( {_.isFunction(this.props.source) || this.state.imageError ? ( ) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index a75b7a016fd7..30bd5bf95dcd 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -54,7 +54,7 @@ const propTypes = { size: PropTypes.oneOf([CONST.AVATAR_SIZE.LARGE, CONST.AVATAR_SIZE.DEFAULT]), /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ - isWorkSpace: PropTypes.bool, + fallbackIcon: PropTypes.string, ...withLocalizePropTypes, }; @@ -68,7 +68,7 @@ const defaultProps = { isUsingDefaultAvatar: false, isUploading: false, size: CONST.AVATAR_SIZE.DEFAULT, - isWorkSpace: false, + fallbackIcon: Expensicons.FallbackAvatar, }; class AvatarWithImagePicker extends React.Component { @@ -185,7 +185,8 @@ class AvatarWithImagePicker extends React.Component { containerStyles={styles.avatarLarge} imageStyles={[styles.avatarLarge, styles.alignSelfCenter]} source={this.props.avatarURL} - isWorkSpace={this.props.isWorkSpace} + fallbackIcon={this.props.fallbackIcon} + size={this.props.size} /> ) : ( diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 0db3ff1253ef..aa37769156e3 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -101,6 +101,7 @@ class AvatarWithIndicator extends PureComponent { diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index c20a346dd538..cb488b29fb20 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -39,7 +39,7 @@ const defaultProps = { iconType: 'icon', onPress: () => {}, interactive: true, - isWorkSpace: false, + fallbackIcon: Expensicons.FallbackAvatar, }; const MenuItem = props => ( @@ -88,7 +88,7 @@ const MenuItem = props => ( )} diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 5906634c4dff..cb1edee344b2 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -65,7 +65,7 @@ const propTypes = { interactive: PropTypes.bool, /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ - isWorkSpace: PropTypes.bool, + fallbackIcon: PropTypes.string, }; export default propTypes; diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 35b81314e72d..7faab14ef8ed 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -114,6 +114,7 @@ const DetailsPage = (props) => { containerStyles={[styles.avatarLarge, styles.mb3]} imageStyles={[styles.avatarLarge]} source={details.avatar} + size={CONST.AVATAR_SIZE.LARGE} /> )} diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index d5190b7aacec..e9374be7f609 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -141,7 +141,7 @@ const InitialSettingsPage = (props) => { action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)), iconStyles: [styles.popoverMenuIconEmphasized], iconFill: themeColors.iconReversed, - isWorkSpace: true, + fallbackIcon: Expensicons.FallbackWorkspaceAvatar, })) .value(); menuItems.push(...defaultMenuItems); @@ -196,7 +196,7 @@ const InitialSettingsPage = (props) => { iconFill={item.iconFill} shouldShowRightIcon badgeText={(isPaymentItem && Permissions.canUseWallet(props.betas)) ? walletBalance : undefined} - isWorkSpace={item.isWorkSpace} + fallbackIcon={item.fallbackIcon} /> ); })} diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 9d165944e30d..bda5f7c97a2c 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -156,7 +156,8 @@ class WorkspaceInitialPage extends React.Component { containerStyles={styles.avatarLarge} imageStyles={[styles.avatarLarge, styles.alignSelfCenter]} source={this.props.policy.avatarURL} - isWorkSpace + fallbackIcon={Expensicons.FallbackWorkspaceAvatar} + size={CONST.AVATAR_SIZE.LARGE} /> ) : ( @@ -201,7 +202,7 @@ class WorkspaceInitialPage extends React.Component { iconRight={item.iconRight} onPress={() => item.action()} shouldShowRightIcon - isWorkSpace + fallbackIcon={Expensicons.FallbackWorkspaceAvatar} /> ))} diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index 33c12ee75e81..f38665ee9dfe 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -149,7 +149,7 @@ class WorkspaceSettingsPage extends React.Component { fill={defaultTheme.iconSuccessFill} /> )} - isWorkSpace + fallbackIcon={Expensicons.FallbackWorkspaceAvatar} style={[styles.mb3]} anchorPosition={{top: 172, right: 18}} isUsingDefaultAvatar={!this.state.previewAvatarURL} From d87227e87bf7830cc749f4ea0c8c11579047dc0d Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Thu, 5 May 2022 10:49:23 +0530 Subject: [PATCH 6/7] changed prop type for fallbackIcon and removed a unnecessary fallbackIcon assignment --- src/components/Avatar.js | 4 ++-- src/components/AvatarWithImagePicker.js | 4 ++-- src/components/menuItemPropTypes.js | 4 ++-- src/pages/workspace/WorkspaceInitialPage.js | 1 - 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index e961080bdd49..bc8bcc9b9e18 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -25,8 +25,8 @@ const propTypes = { /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue' */ fill: PropTypes.string, - /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ - fallbackIcon: PropTypes.string, + /** Function for using fallback avatar */ + fallbackIcon: PropTypes.func, }; const defaultProps = { diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 30bd5bf95dcd..56449d79afcc 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -53,8 +53,8 @@ const propTypes = { /** Size of Indicator */ size: PropTypes.oneOf([CONST.AVATAR_SIZE.LARGE, CONST.AVATAR_SIZE.DEFAULT]), - /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ - fallbackIcon: PropTypes.string, + /** Function for using fallback avatar */ + fallbackIcon: PropTypes.func, ...withLocalizePropTypes, }; diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index cb1edee344b2..4f3efd59c4c1 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -64,8 +64,8 @@ const propTypes = { /** Whether the menu item should be interactive at all */ interactive: PropTypes.bool, - /** Flag to check if avatar is from workspace, so that we can use fallback avatar accordingly */ - fallbackIcon: PropTypes.string, + /** Function for using fallback avatar */ + fallbackIcon: PropTypes.func, }; export default propTypes; diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index bda5f7c97a2c..9cb442edb586 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -202,7 +202,6 @@ class WorkspaceInitialPage extends React.Component { iconRight={item.iconRight} onPress={() => item.action()} shouldShowRightIcon - fallbackIcon={Expensicons.FallbackWorkspaceAvatar} /> ))} From e87646d2868849d0818a19ec6f0bb7f584ebba85 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 17 May 2022 21:00:13 +0530 Subject: [PATCH 7/7] updated fallbackIcon comment --- src/components/Avatar.js | 2 +- src/components/AvatarWithImagePicker.js | 2 +- src/components/menuItemPropTypes.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index bc8bcc9b9e18..ff51d2c427b8 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -25,7 +25,7 @@ const propTypes = { /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue' */ fill: PropTypes.string, - /** Function for using fallback avatar */ + /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ fallbackIcon: PropTypes.func, }; diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 66284c31eb54..2e0d4f3c8792 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -53,7 +53,7 @@ const propTypes = { /** Size of Indicator */ size: PropTypes.oneOf([CONST.AVATAR_SIZE.LARGE, CONST.AVATAR_SIZE.DEFAULT]), - /** Function for using fallback avatar */ + /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ fallbackIcon: PropTypes.func, ...withLocalizePropTypes, diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 4f3efd59c4c1..0dd6b954aa4f 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -64,7 +64,7 @@ const propTypes = { /** Whether the menu item should be interactive at all */ interactive: PropTypes.bool, - /** Function for using fallback avatar */ + /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ fallbackIcon: PropTypes.func, };