Changeset View
Changeset View
Standalone 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(() => { | ||||
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 ActionsIt 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 Actionsginsu: 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 |
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