Differential D7187 Diff 24353 native/components/avatar.react.js

Changeset 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,
		]);

		if (!shouldRenderAvatars) {
		return null;
		}

		return avatar;
		atulUnsubmitted Not Done Inline Actions Could maybe do `return shouldRenderAvatars ? avatar : null;` but up to you. atul: Could maybe do `return shouldRenderAvatars ? avatar : null;` but up to you.
}		}

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