diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx index b9c52ad397ec..ee61beda74ae 100644 --- a/src/components/FloatingActionButton.tsx +++ b/src/components/FloatingActionButton.tsx @@ -1,8 +1,8 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useEffect, useRef} from 'react'; // eslint-disable-next-line no-restricted-imports -import type {GestureResponderEvent, Role, Text} from 'react-native'; -import {Platform, View} from 'react-native'; +import type {GestureResponderEvent, Role, Text, View} from 'react-native'; +import {Platform} from 'react-native'; import Animated, {createAnimatedPropAdapter, Easing, interpolateColor, processColor, useAnimatedProps, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import Svg, {Path} from 'react-native-svg'; import useLocalize from '@hooks/useLocalize'; @@ -10,15 +10,11 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import {PressableWithoutFeedback} from './Pressable'; -import PressableWithFeedback from './Pressable/PressableWithFeedback'; import Tooltip from './Tooltip/PopoverAnchorTooltip'; const AnimatedPath = Animated.createAnimatedComponent(Path); AnimatedPath.displayName = 'AnimatedPath'; -const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); -AnimatedPressable.displayName = 'AnimatedPressable'; - type AdapterPropsRecord = { type: number; payload?: number | null; @@ -104,41 +100,34 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo }; return ( - - - - { - fabPressable.current = el ?? null; - if (buttonRef && 'current' in buttonRef) { - buttonRef.current = el ?? null; - } - }} - accessibilityLabel={accessibilityLabel} - role={role} - pressDimmingValue={1} - onPress={toggleFabAction} - onLongPress={() => {}} - shouldUseHapticsOnLongPress={false} - style={[styles.floatingActionButton, animatedStyle]} + + { + fabPressable.current = el ?? null; + if (buttonRef && 'current' in buttonRef) { + buttonRef.current = el ?? null; + } + }} + style={[styles.h100, styles.bottomTabBarItem]} + accessibilityLabel={accessibilityLabel} + onPress={toggleFabAction} + onLongPress={() => {}} + role={role} + shouldUseHapticsOnLongPress={false} + > + + - - - - - - - + + + + + ); } diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx index 3a59e42bcca1..6d20361b75f5 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx @@ -61,16 +61,16 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps return ( - { - Navigation.navigate(ROUTES.HOME); - }} - role={CONST.ROLE.BUTTON} - accessibilityLabel={translate('common.chats')} - wrapperStyle={styles.flex1} - style={styles.bottomTabBarItem} - > - + + { + Navigation.navigate(ROUTES.HOME); + }} + role={CONST.ROLE.BUTTON} + accessibilityLabel={translate('common.chats')} + wrapperStyle={styles.flex1} + style={styles.bottomTabBarItem} + > )} - - + + - - - + ); } diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.js b/src/pages/home/sidebar/AvatarWithOptionalStatus.js index 942d5c1da1f2..039a3c78503a 100644 --- a/src/pages/home/sidebar/AvatarWithOptionalStatus.js +++ b/src/pages/home/sidebar/AvatarWithOptionalStatus.js @@ -2,12 +2,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; -import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; -import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import CONST from '@src/CONST'; -import PressableAvatarWithIndicator from './PressableAvatarWithIndicator'; +import ProfileAvatarWithIndicator from './ProfileAvatarWithIndicator'; const propTypes = { /** Emoji status */ @@ -15,40 +12,27 @@ const propTypes = { /** Whether the avatar is selected */ isSelected: PropTypes.bool, - - /** Callback called when the avatar or status icon is pressed */ - onPress: PropTypes.func, }; const defaultProps = { emojiStatus: '', isSelected: false, - onPress: () => {}, }; -function AvatarWithOptionalStatus({emojiStatus, isSelected, onPress}) { +function AvatarWithOptionalStatus({emojiStatus, isSelected}) { const styles = useThemeStyles(); - const {translate} = useLocalize(); return ( - - + + {emojiStatus} - + ); } diff --git a/src/pages/home/sidebar/BottomTabAvatar.tsx b/src/pages/home/sidebar/BottomTabAvatar.tsx index 15134b762161..63abcf063b5f 100644 --- a/src/pages/home/sidebar/BottomTabAvatar.tsx +++ b/src/pages/home/sidebar/BottomTabAvatar.tsx @@ -1,11 +1,16 @@ /* eslint-disable rulesdir/onyx-props-must-have-default */ import React, {useCallback} from 'react'; +import {PressableWithFeedback} from '@components/Pressable'; +import Tooltip from '@components/Tooltip'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import interceptAnonymousUser from '@libs/interceptAnonymousUser'; import Navigation from '@libs/Navigation/Navigation'; +import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import AvatarWithOptionalStatus from './AvatarWithOptionalStatus'; -import PressableAvatarWithIndicator from './PressableAvatarWithIndicator'; +import ProfileAvatarWithIndicator from './ProfileAvatarWithIndicator'; type BottomTabAvatarProps = { /** Whether the create menu is open or not */ @@ -16,6 +21,8 @@ type BottomTabAvatarProps = { }; function BottomTabAvatar({isCreateMenuOpen = false, isSelected = false}: BottomTabAvatarProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const emojiStatus = currentUserPersonalDetails?.status?.emojiCode ?? ''; @@ -28,20 +35,31 @@ function BottomTabAvatar({isCreateMenuOpen = false, isSelected = false}: BottomT interceptAnonymousUser(() => Navigation.navigate(ROUTES.SETTINGS)); }, [isCreateMenuOpen]); + let children; + if (emojiStatus) { - return ( + children = ( ); + } else { + children = ; } + return ( - + + + {children} + + ); } diff --git a/src/pages/home/sidebar/PressableAvatarWithIndicator.js b/src/pages/home/sidebar/PressableAvatarWithIndicator.js deleted file mode 100644 index a7345ff6c14a..000000000000 --- a/src/pages/home/sidebar/PressableAvatarWithIndicator.js +++ /dev/null @@ -1,78 +0,0 @@ -/* eslint-disable rulesdir/onyx-props-must-have-default */ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; -import React from 'react'; -import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import AvatarWithIndicator from '@components/AvatarWithIndicator'; -import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; -import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; -import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; -import * as UserUtils from '@libs/UserUtils'; -import personalDetailsPropType from '@pages/personalDetailsPropType'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; - -const propTypes = { - /** The personal details of the person who is logged in */ - currentUserPersonalDetails: personalDetailsPropType, - - /** Indicates whether the app is loading initial data */ - isLoading: PropTypes.bool, - - /** Whether the avatar is selected */ - isSelected: PropTypes.bool, - - /** Callback called when the avatar is pressed */ - onPress: PropTypes.func, -}; - -const defaultProps = { - currentUserPersonalDetails: { - pendingFields: {avatar: ''}, - accountID: '', - avatar: '', - }, - isLoading: true, - isSelected: false, - onPress: () => {}, -}; - -function PressableAvatarWithIndicator({currentUserPersonalDetails, isLoading, isSelected, onPress}) { - const {translate} = useLocalize(); - const styles = useThemeStyles(); - - return ( - - - - - - - - ); -} - -PressableAvatarWithIndicator.propTypes = propTypes; -PressableAvatarWithIndicator.defaultProps = defaultProps; -PressableAvatarWithIndicator.displayName = 'PressableAvatarWithIndicator'; -export default compose( - withCurrentUserPersonalDetails, - withOnyx({ - isLoading: { - key: ONYXKEYS.IS_LOADING_APP, - }, - }), -)(PressableAvatarWithIndicator); diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.js b/src/pages/home/sidebar/ProfileAvatarWithIndicator.js new file mode 100644 index 000000000000..bd9c01aba001 --- /dev/null +++ b/src/pages/home/sidebar/ProfileAvatarWithIndicator.js @@ -0,0 +1,63 @@ +/* eslint-disable rulesdir/onyx-props-must-have-default */ +import lodashGet from 'lodash/get'; +import PropTypes from 'prop-types'; +import React from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import AvatarWithIndicator from '@components/AvatarWithIndicator'; +import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; +import useThemeStyles from '@hooks/useThemeStyles'; +import compose from '@libs/compose'; +import * as UserUtils from '@libs/UserUtils'; +import personalDetailsPropType from '@pages/personalDetailsPropType'; +import ONYXKEYS from '@src/ONYXKEYS'; + +const propTypes = { + /** The personal details of the person who is logged in */ + currentUserPersonalDetails: personalDetailsPropType, + + /** Indicates whether the app is loading initial data */ + isLoading: PropTypes.bool, + + /** Whether the avatar is selected */ + isSelected: PropTypes.bool, +}; + +const defaultProps = { + currentUserPersonalDetails: { + pendingFields: {avatar: ''}, + accountID: '', + avatar: '', + }, + isLoading: true, + isSelected: false, +}; + +function ProfileAvatarWithIndicator({currentUserPersonalDetails, isLoading, isSelected}) { + const styles = useThemeStyles(); + + return ( + + + + + + ); +} + +ProfileAvatarWithIndicator.propTypes = propTypes; +ProfileAvatarWithIndicator.defaultProps = defaultProps; +ProfileAvatarWithIndicator.displayName = 'ProfileAvatarWithIndicator'; +export default compose( + withCurrentUserPersonalDetails, + withOnyx({ + isLoading: { + key: ONYXKEYS.IS_LOADING_APP, + }, + }), +)(ProfileAvatarWithIndicator);