Changeset View
Changeset View
Standalone View
Standalone View
native/components/avatar.react.js
| // @flow | // @flow | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { View, Text, StyleSheet } from 'react-native'; | import { View, Text, StyleSheet } from 'react-native'; | ||||
| import type { ClientAvatar } from 'lib/types/avatar-types.js'; | import type { ClientAvatar } from 'lib/types/avatar-types.js'; | ||||
| import Multimedia from '../media/multimedia.react.js'; | |||||
| import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | ||||
| type Props = { | type Props = { | ||||
| +avatarInfo: ClientAvatar, | +avatarInfo: ClientAvatar, | ||||
| +size?: 'large' | 'small' | 'profile' | 'micro', | +size?: 'large' | 'small' | 'profile' | 'micro', | ||||
| }; | }; | ||||
| function Avatar(props: Props): React.Node { | function Avatar(props: Props): React.Node { | ||||
| Show All 28 Lines | const emojiSizeStyle = React.useMemo(() => { | ||||
| } else if (size === 'small') { | } else if (size === 'small') { | ||||
| return styles.emojiSmall; | return styles.emojiSmall; | ||||
| } else if (size === 'micro') { | } else if (size === 'micro') { | ||||
| return styles.emojiMicro; | return styles.emojiMicro; | ||||
| } | } | ||||
| return styles.emojiLarge; | return styles.emojiLarge; | ||||
| }, [size]); | }, [size]); | ||||
| if (!shouldRenderAvatars) { | const avatar = React.useMemo(() => { | ||||
| return null; | if (avatarInfo.type === 'image') { | ||||
| const avatarMediaInfo = { | |||||
| type: 'photo', | |||||
| uri: avatarInfo.uri, | |||||
| }; | |||||
| return ( | |||||
| <View style={[containerSizeStyle, styles.imageContainer]}> | |||||
| <Multimedia mediaInfo={avatarMediaInfo} spinnerColor="white" /> | |||||
| </View> | |||||
| ); | |||||
| } | } | ||||
| return ( | return ( | ||||
| <View style={emojiContainerStyle}> | <View style={emojiContainerStyle}> | ||||
| <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text> | <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text> | ||||
| </View> | </View> | ||||
| ); | ); | ||||
| }, [ | |||||
| avatarInfo.emoji, | |||||
| avatarInfo.type, | |||||
| avatarInfo.uri, | |||||
| containerSizeStyle, | |||||
| emojiContainerStyle, | |||||
| emojiSizeStyle, | |||||
| ]); | |||||
| return shouldRenderAvatars ? avatar : null; | |||||
| } | } | ||||
| const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||||
| emojiContainer: { | emojiContainer: { | ||||
| alignItems: 'center', | alignItems: 'center', | ||||
| justifyContent: 'center', | justifyContent: 'center', | ||||
| }, | }, | ||||
| emojiLarge: { | emojiLarge: { | ||||
| fontSize: 28, | fontSize: 28, | ||||
| textAlign: 'center', | textAlign: 'center', | ||||
| }, | }, | ||||
| emojiMicro: { | emojiMicro: { | ||||
| fontSize: 9, | fontSize: 9, | ||||
| textAlign: 'center', | textAlign: 'center', | ||||
| }, | }, | ||||
| emojiProfile: { | emojiProfile: { | ||||
| fontSize: 80, | fontSize: 80, | ||||
| textAlign: 'center', | textAlign: 'center', | ||||
| }, | }, | ||||
| emojiSmall: { | emojiSmall: { | ||||
| fontSize: 14, | fontSize: 14, | ||||
| textAlign: 'center', | textAlign: 'center', | ||||
| }, | }, | ||||
| imageContainer: { | |||||
| overflow: 'hidden', | |||||
| }, | |||||
| large: { | large: { | ||||
| borderRadius: 20, | borderRadius: 20, | ||||
| height: 40, | height: 40, | ||||
| width: 40, | width: 40, | ||||
| }, | }, | ||||
| micro: { | micro: { | ||||
| borderRadius: 8, | borderRadius: 8, | ||||
| height: 16, | height: 16, | ||||
| Show All 15 Lines | |||||