-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #36847 from kubabutkiewicz/ts-migration/Sidebar
[TS migration] Migrate 'Sidebar' page to TypeScript
- Loading branch information
Showing
16 changed files
with
223 additions
and
359 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 18 additions & 37 deletions
55
...e/sidebar/PressableAvatarWithIndicator.js → .../sidebar/PressableAvatarWithIndicator.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,59 @@ | ||
| /* 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 type {OnyxEntry} from 'react-native-onyx'; | ||
| 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 useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; | ||
| 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, | ||
|
|
||
| type PressableAvatarWithIndicatorOnyxProps = { | ||
| /** Indicates whether the app is loading initial data */ | ||
| isLoading: PropTypes.bool, | ||
| isLoading: OnyxEntry<boolean>; | ||
| }; | ||
|
|
||
| type PressableAvatarWithIndicatorProps = PressableAvatarWithIndicatorOnyxProps & { | ||
| /** Whether the avatar is selected */ | ||
| isSelected: PropTypes.bool, | ||
| isSelected: boolean; | ||
|
|
||
| /** Callback called when the avatar is pressed */ | ||
| onPress: PropTypes.func, | ||
| onPress?: () => void; | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| currentUserPersonalDetails: { | ||
| pendingFields: {avatar: ''}, | ||
| accountID: '', | ||
| avatar: '', | ||
| }, | ||
| isLoading: true, | ||
| isSelected: false, | ||
| onPress: () => {}, | ||
| }; | ||
|
|
||
| function PressableAvatarWithIndicator({currentUserPersonalDetails, isLoading, isSelected, onPress}) { | ||
| function PressableAvatarWithIndicator({isLoading = true, isSelected = false, onPress}: PressableAvatarWithIndicatorProps) { | ||
| const {translate} = useLocalize(); | ||
| const styles = useThemeStyles(); | ||
| const currentUserPersonalDetails = useCurrentUserPersonalDetails(); | ||
|
|
||
| return ( | ||
| <PressableWithoutFeedback | ||
| accessibilityLabel={translate('sidebarScreen.buttonMySettings')} | ||
| role={CONST.ROLE.BUTTON} | ||
| onPress={onPress} | ||
| > | ||
| <OfflineWithFeedback pendingAction={lodashGet(currentUserPersonalDetails, 'pendingFields.avatar', null)}> | ||
| <OfflineWithFeedback pendingAction={currentUserPersonalDetails.pendingFields?.avatar ?? null}> | ||
| <View style={[isSelected && styles.selectedAvatarBorder]}> | ||
| <AvatarWithIndicator | ||
| source={UserUtils.getAvatar(currentUserPersonalDetails.avatar, currentUserPersonalDetails.accountID)} | ||
| tooltipText={translate('profilePage.profile')} | ||
| fallbackIcon={currentUserPersonalDetails.fallbackIcon} | ||
| isLoading={isLoading && !currentUserPersonalDetails.avatar} | ||
| isLoading={!!isLoading && !currentUserPersonalDetails.avatar} | ||
| /> | ||
| </View> | ||
| </OfflineWithFeedback> | ||
| </PressableWithoutFeedback> | ||
| ); | ||
| } | ||
|
|
||
| PressableAvatarWithIndicator.propTypes = propTypes; | ||
| PressableAvatarWithIndicator.defaultProps = defaultProps; | ||
| PressableAvatarWithIndicator.displayName = 'PressableAvatarWithIndicator'; | ||
| export default compose( | ||
| withCurrentUserPersonalDetails, | ||
| withOnyx({ | ||
| isLoading: { | ||
| key: ONYXKEYS.IS_LOADING_APP, | ||
| }, | ||
| }), | ||
| )(PressableAvatarWithIndicator); | ||
|
|
||
| export default withOnyx<PressableAvatarWithIndicatorProps, PressableAvatarWithIndicatorOnyxProps>({ | ||
| isLoading: { | ||
| key: ONYXKEYS.IS_LOADING_APP, | ||
| }, | ||
| })(PressableAvatarWithIndicator); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.