Differential D7099 Diff 23944 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 { 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 {
const { avatarInfo, size } = props;		const { avatarInfo, size } = props;

		const shouldRenderAvatars = useShouldRenderAvatars();

const containerSizeStyle = React.useMemo(() => {		const containerSizeStyle = React.useMemo(() => {
if (size === 'profile') {		if (size === 'profile') {
return styles.profile;		return styles.profile;
} else if (size === 'small') {		} else if (size === 'small') {
return styles.small;		return styles.small;
} else if (size === 'micro') {		} else if (size === 'micro') {
return styles.micro;		return styles.micro;
}		}
Show All 16 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) {
		return null;
		}

return (		return (
<View style={emojiContainerStyle}>		<View style={emojiContainerStyle}>
<Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>		<Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
</View>		</View>
);		);
}		}

const styles = StyleSheet.create({		const styles = StyleSheet.create({
▲ Show 20 Lines • Show All 43 Lines • Show Last 20 Lines