Changeset View
Changeset View
Standalone View
Standalone View
native/chat/message-reactions-modal.react.js
Show All 9 Lines | |||||
import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; | import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; | ||||
import { useMessageReactionsList } from 'lib/shared/reaction-utils.js'; | import { useMessageReactionsList } from 'lib/shared/reaction-utils.js'; | ||||
import Avatar from '../components/avatar.react.js'; | import Avatar from '../components/avatar.react.js'; | ||||
import Modal from '../components/modal.react.js'; | import Modal from '../components/modal.react.js'; | ||||
import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; | import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; | ||||
import type { NavigationRoute } from '../navigation/route-names.js'; | import type { NavigationRoute } from '../navigation/route-names.js'; | ||||
import { useColors, useStyles } from '../themes/colors.js'; | import { useColors, useStyles } from '../themes/colors.js'; | ||||
import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | |||||
export type MessageReactionsModalParams = { | export type MessageReactionsModalParams = { | ||||
+reactions: ReactionInfo, | +reactions: ReactionInfo, | ||||
}; | }; | ||||
type Props = { | type Props = { | ||||
+navigation: RootNavigationProp<'MessageReactionsModal'>, | +navigation: RootNavigationProp<'MessageReactionsModal'>, | ||||
+route: NavigationRoute<'MessageReactionsModal'>, | +route: NavigationRoute<'MessageReactionsModal'>, | ||||
}; | }; | ||||
function MessageReactionsModal(props: Props): React.Node { | function MessageReactionsModal(props: Props): React.Node { | ||||
const { reactions } = props.route.params; | const { reactions } = props.route.params; | ||||
const styles = useStyles(unboundStyles); | const styles = useStyles(unboundStyles); | ||||
const colors = useColors(); | const colors = useColors(); | ||||
const navigation = useNavigation(); | const navigation = useNavigation(); | ||||
const modalSafeAreaEdges = React.useMemo(() => ['top'], []); | const modalSafeAreaEdges = React.useMemo(() => ['top'], []); | ||||
const modalContainerSafeAreaEdges = React.useMemo(() => ['bottom'], []); | const modalContainerSafeAreaEdges = React.useMemo(() => ['bottom'], []); | ||||
const close = React.useCallback(() => navigation.goBack(), [navigation]); | const close = React.useCallback(() => navigation.goBack(), [navigation]); | ||||
const reactionsListData = useMessageReactionsList(reactions); | const reactionsListData = useMessageReactionsList(reactions); | ||||
const shouldRenderAvatars = useShouldRenderAvatars(); | |||||
const marginLeftStyle = React.useMemo( | |||||
() => ({ | |||||
marginLeft: shouldRenderAvatars ? 8 : 0, | |||||
}), | |||||
[shouldRenderAvatars], | |||||
); | |||||
const renderItem = React.useCallback( | const renderItem = React.useCallback( | ||||
({ item }) => { | ({ item }) => { | ||||
const avatarInfo = getAvatarForUser(item); | const avatarInfo = getAvatarForUser(item); | ||||
return ( | return ( | ||||
<View key={item.id} style={styles.reactionsListRowContainer}> | <View key={item.id} style={styles.reactionsListRowContainer}> | ||||
<View style={styles.reactionsListUserInfoContainer}> | <View style={styles.reactionsListUserInfoContainer}> | ||||
<Avatar size="small" avatarInfo={avatarInfo} /> | <Avatar size="small" avatarInfo={avatarInfo} /> | ||||
<Text style={styles.reactionsListUsernameText}> | <Text style={[styles.reactionsListUsernameText, marginLeftStyle]}> | ||||
{item.username} | {item.username} | ||||
</Text> | </Text> | ||||
</View> | </View> | ||||
<Text style={styles.reactionsListReactionText}>{item.reaction}</Text> | <Text style={styles.reactionsListReactionText}>{item.reaction}</Text> | ||||
</View> | </View> | ||||
); | ); | ||||
}, | }, | ||||
[ | [ | ||||
marginLeftStyle, | |||||
styles.reactionsListReactionText, | styles.reactionsListReactionText, | ||||
styles.reactionsListRowContainer, | styles.reactionsListRowContainer, | ||||
styles.reactionsListUserInfoContainer, | styles.reactionsListUserInfoContainer, | ||||
styles.reactionsListUsernameText, | styles.reactionsListUsernameText, | ||||
], | ], | ||||
); | ); | ||||
const itemSeperator = React.useCallback(() => { | const itemSeperator = React.useCallback(() => { | ||||
▲ Show 20 Lines • Show All 65 Lines • ▼ Show 20 Lines | const unboundStyles = { | ||||
reactionsListUserInfoContainer: { | reactionsListUserInfoContainer: { | ||||
flex: 1, | flex: 1, | ||||
flexDirection: 'row', | flexDirection: 'row', | ||||
alignItems: 'center', | alignItems: 'center', | ||||
}, | }, | ||||
reactionsListUsernameText: { | reactionsListUsernameText: { | ||||
color: 'modalForegroundLabel', | color: 'modalForegroundLabel', | ||||
fontSize: 18, | fontSize: 18, | ||||
marginLeft: 8, | |||||
}, | }, | ||||
reactionsListReactionText: { | reactionsListReactionText: { | ||||
fontSize: 18, | fontSize: 18, | ||||
}, | }, | ||||
reactionsListItemSeperator: { | reactionsListItemSeperator: { | ||||
height: 16, | height: 16, | ||||
}, | }, | ||||
closeButton: { | closeButton: { | ||||
Show All 11 Lines |