Differential D7187 Diff 24186 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 RemoteImage from '../media/remote-image.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 onRemoteImageLoad = React.useCallback(() => {
		ginsuAuthorUnsubmitted Done Inline Actions Been thinking/trying to figure this out for a while now, and I would appreciate some guidance with the following here... Hopefully, the comment below makes sense and explains my thinking, but lmk if not ginsu: Been thinking/trying to figure this out for a while now, and I would appreciate some guidance…
return null;		// TODO:
		// Either make onLoad prop optional for RemoteImage or figure out
		ginsuAuthorUnsubmitted Done Inline Actions It seems like, based on this line in RemoteImage making `onLoad` optional should be totally possible ginsu: It seems like, based on [[ https://github.com/CommE2E/comm/blob/master/native/media/remote…
		// what we need to consider when an image is loaded.
		//
		// From what I understand about the RemoteImage component, the Avatar
		// component shouldn't need a departingURI state (from the Mutlimedia
		ginsuAuthorUnsubmitted Done Inline Actions https://github.com/CommE2E/comm/blob/master/native/media/multimedia.react.js ginsu: https://github.com/CommE2E/comm/blob/master/native/media/multimedia.react.js
		// component) or similar logic since there is no transition between
		// multiple avatars. When the avatar image changes, the component will
		// just rerender with a loading state while the image uploads, and then
		// then the Avatar component will rerender again with the new uploaded
		// image.
		}, []);

		const avatar = React.useMemo(() => {
		if (avatarInfo.type === 'image') {
		return (
		<RemoteImage
		uri={avatarInfo.uri}
		onLoad={onRemoteImageLoad}
		spinnerColor="black"
		style={containerSizeStyle}
		invisibleLoad={true}
		key={avatarInfo.uri}
		/>
		);
}		}

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

		if (!shouldRenderAvatars) {
		return null;
		}

		return <React.Fragment>{avatar}</React.Fragment>;
}		}

const styles = StyleSheet.create({		const styles = StyleSheet.create({
emojiContainer: {		emojiContainer: {
alignItems: 'center',		alignItems: 'center',
justifyContent: 'center',		justifyContent: 'center',
},		},
emojiLarge: {		emojiLarge: {
Show All 38 Lines