Changeset View
Changeset View
Standalone View
Standalone View
native/chat/message-tooltip-button-avatar.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { View, StyleSheet } from 'react-native'; | import { View, StyleSheet } from 'react-native'; | ||||
import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; | |||||
import { avatarOffset } from './chat-constants.js'; | import { avatarOffset } from './chat-constants.js'; | ||||
import Avatar from '../components/avatar.react.js'; | import UserAvatar from '../components/user-avatar.react.js'; | ||||
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; | import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; | ||||
import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | ||||
type Props = { | type Props = { | ||||
+item: ChatMessageInfoItemWithHeight, | +item: ChatMessageInfoItemWithHeight, | ||||
}; | }; | ||||
function MessageTooltipButtonAvatar(props: Props): React.Node { | function MessageTooltipButtonAvatar(props: Props): React.Node { | ||||
const { item } = props; | const { item } = props; | ||||
const avatarInfo = React.useMemo( | |||||
() => getAvatarForUser(item.messageInfo.creator), | |||||
[item.messageInfo.creator], | |||||
); | |||||
const shouldRenderAvatars = useShouldRenderAvatars(); | const shouldRenderAvatars = useShouldRenderAvatars(); | ||||
if (item.messageInfo.creator.isViewer || !shouldRenderAvatars) { | if (item.messageInfo.creator.isViewer || !shouldRenderAvatars) { | ||||
return null; | return null; | ||||
} | } | ||||
return ( | return ( | ||||
<View style={styles.avatarContainer}> | <View style={styles.avatarContainer}> | ||||
<Avatar size="small" avatarInfo={avatarInfo} /> | <UserAvatar size="small" userID={item.messageInfo.creator.id} /> | ||||
</View> | </View> | ||||
); | ); | ||||
} | } | ||||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||||
avatarContainer: { | avatarContainer: { | ||||
bottom: 0, | bottom: 0, | ||||
left: -avatarOffset, | left: -avatarOffset, | ||||
position: 'absolute', | position: 'absolute', | ||||
}, | }, | ||||
}); | }); | ||||
const MemoizedMessageTooltipButtonAvatar: React.ComponentType<Props> = | const MemoizedMessageTooltipButtonAvatar: React.ComponentType<Props> = | ||||
React.memo(MessageTooltipButtonAvatar); | React.memo(MessageTooltipButtonAvatar); | ||||
export default MemoizedMessageTooltipButtonAvatar; | export default MemoizedMessageTooltipButtonAvatar; |