Differential D7265 Diff 24518 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 { ResolvedClientAvatar } from 'lib/types/avatar-types.js';

	import Multimedia from '../media/multimedia.react.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: ResolvedClientAvatar,
	+size?: 'large' \| 'small' \| 'profile' \| 'micro',			+size: 'micro' \| 'small' \| 'large' \| 'profile',
	};			};

	function Avatar(props: Props): React.Node {			function Avatar(props: Props): React.Node {
	const { avatarInfo, size } = props;			const { avatarInfo, size } = props;

	const shouldRenderAvatars = useShouldRenderAvatars();			const shouldRenderAvatars = useShouldRenderAvatars();

	const containerSizeStyle = React.useMemo(() => {			const containerSizeStyle = React.useMemo(() => {
	if (size === 'profile') {			if (size === 'micro') {
	return styles.profile;			return styles.micro;
	} else if (size === 'small') {			} else if (size === 'small') {
	return styles.small;			return styles.small;
	} else if (size === 'micro') {			} else if (size === 'large') {
	return styles.micro;
	}
	return styles.large;			return styles.large;
				}
				return styles.profile;
	}, [size]);			}, [size]);

	const emojiContainerStyle = React.useMemo(() => {			const emojiContainerStyle = React.useMemo(() => {
	const containerStyles = [styles.emojiContainer, containerSizeStyle];			const containerStyles = [styles.emojiContainer, containerSizeStyle];
	if (avatarInfo.type === 'emoji') {			if (avatarInfo.type === 'emoji') {
	const backgroundColor = { backgroundColor: `#${avatarInfo.color}` };			const backgroundColor = { backgroundColor: `#${avatarInfo.color}` };
	containerStyles.push(backgroundColor);			containerStyles.push(backgroundColor);
	}			}

	return containerStyles;			return containerStyles;
	}, [avatarInfo, containerSizeStyle]);			}, [avatarInfo, containerSizeStyle]);

	const emojiSizeStyle = React.useMemo(() => {			const emojiSizeStyle = React.useMemo(() => {
	if (size === 'profile') {			if (size === 'micro') {
	return styles.emojiProfile;			return styles.emojiMicro;
	} else if (size === 'small') {			} else if (size === 'small') {
	return styles.emojiSmall;			return styles.emojiSmall;
	} else if (size === 'micro') {			} else if (size === 'large') {
	return styles.emojiMicro;
	}
	return styles.emojiLarge;			return styles.emojiLarge;
				}
				return styles.emojiProfile;
	}, [size]);			}, [size]);

	const avatar = React.useMemo(() => {			const avatar = React.useMemo(() => {
	if (avatarInfo.type === 'image') {			if (avatarInfo.type === 'image') {
	const avatarMediaInfo = {			const avatarMediaInfo = {
	type: 'photo',			type: 'photo',
	uri: avatarInfo.uri,			uri: avatarInfo.uri,
	};			};
	▲ Show 20 Lines • Show All 72 Lines • Show Last 20 Lines