Page MenuHomePhabricator
Files F3359884

D7055.diff
No OneTemporary
Actions

D7055.diff
View Options

diff --git a/native/components/avatar.react.js b/native/components/avatar.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/avatar.react.js
@@ -0,0 +1,98 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import type { ClientAvatar } from 'lib/types/avatar-types.js';
+
+type Props = {
+ +avatarInfo: ClientAvatar,
+ +size?: 'large' | 'small' | 'profile' | 'micro',
+};
+
+function Avatar(props: Props): React.Node {
+ const { avatarInfo, size } = props;
+
+ const containerSizeStyle = React.useMemo(() => {
+ if (size === 'profile') {
+ return styles.profile;
+ } else if (size === 'small') {
+ return styles.small;
+ } else if (size === 'micro') {
+ return styles.micro;
+ }
+ return styles.large;
+ }, [size]);
+
+ const emojiContainerStyle = React.useMemo(() => {
+ const containerStyles = [styles.emojiContainer, containerSizeStyle];
+ if (avatarInfo.type === 'emoji') {
+ const backgroundColor = { backgroundColor: `#${avatarInfo.color}` };
+ containerStyles.push(backgroundColor);
+ }
+
+ return containerStyles;
+ }, [avatarInfo, containerSizeStyle]);
+
+ const emojiSizeStyle = React.useMemo(() => {
+ if (size === 'profile') {
+ return styles.emojiProfile;
+ } else if (size === 'small') {
+ return styles.emojiSmall;
+ } else if (size === 'micro') {
+ return styles.emojiMicro;
+ }
+ return styles.emojiLarge;
+ }, [size]);
+
+ return (
+ <View style={emojiContainerStyle}>
+ <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ emojiContainer: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ emojiLarge: {
+ fontSize: 28,
+ textAlign: 'center',
+ },
+ emojiMicro: {
+ fontSize: 9,
+ textAlign: 'center',
+ },
+ emojiProfile: {
+ fontSize: 80,
+ textAlign: 'center',
+ },
+ emojiSmall: {
+ fontSize: 14,
+ textAlign: 'center',
+ },
+ large: {
+ borderRadius: 20,
+ height: 40,
+ width: 40,
+ },
+ micro: {
+ borderRadius: 8,
+ height: 16,
+ width: 16,
+ },
+ profile: {
+ borderRadius: 56,
+ height: 112,
+ width: 112,
+ },
+ small: {
+ borderRadius: 12,
+ height: 24,
+ width: 24,
+ },
+});
+
+export default Avatar;

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 11:33 AM (21 h, 58 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2579479
Default Alt Text
D7055.diff (2 KB)

Event Timeline