byGalax
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import type { MessageReaction } from '@chat-app/shared/chat';
|
|
import { useMemo } from 'react';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { colors } from '../theme/colors';
|
|
|
|
interface Props {
|
|
reactions: MessageReaction[];
|
|
myUserId: string | null;
|
|
onToggle: (emoji: string) => void;
|
|
}
|
|
|
|
// Renders the per-message reaction badges underneath a bubble. Pills
|
|
// the current user has reacted to get a tinted background so they know
|
|
// which ones to tap to un-react.
|
|
export function ReactionPills({ reactions, myUserId, onToggle }: Props) {
|
|
const grouped = useMemo(() => groupByEmoji(reactions, myUserId), [reactions, myUserId]);
|
|
if (grouped.length === 0) return null;
|
|
return (
|
|
<View style={styles.row}>
|
|
{grouped.map((g) => (
|
|
<Pressable
|
|
key={g.emoji}
|
|
onPress={() => onToggle(g.emoji)}
|
|
style={[styles.pill, g.mine && styles.pillMine]}
|
|
>
|
|
<Text style={styles.emoji}>{g.emoji}</Text>
|
|
<Text style={[styles.count, g.mine && styles.countMine]}>{g.count}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function groupByEmoji(
|
|
rows: MessageReaction[],
|
|
myUserId: string | null,
|
|
): Array<{ emoji: string; count: number; mine: boolean }> {
|
|
const m = new Map<string, { count: number; mine: boolean }>();
|
|
for (const r of rows) {
|
|
const prev = m.get(r.emoji) ?? { count: 0, mine: false };
|
|
m.set(r.emoji, {
|
|
count: prev.count + 1,
|
|
mine: prev.mine || (myUserId !== null && r.userId === myUserId),
|
|
});
|
|
}
|
|
return Array.from(m.entries()).map(([emoji, v]) => ({ emoji, ...v }));
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
row: { flexDirection: 'row', flexWrap: 'wrap', gap: 4, marginTop: 4 },
|
|
pill: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.surface,
|
|
borderColor: colors.border,
|
|
borderWidth: 1,
|
|
gap: 4,
|
|
},
|
|
pillMine: { backgroundColor: colors.accentMuted, borderColor: colors.accent },
|
|
emoji: { fontSize: 13 },
|
|
count: { color: colors.textMuted, fontSize: 12, fontWeight: '600' },
|
|
countMine: { color: colors.accent },
|
|
});
|