Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫
Something went wrong. Try again.
2.9 kB · 100 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101import {Pressable, View} from 'react-native'import Animated, { FadeIn, FadeOut, LinearTransition, useAnimatedStyle, useDerivedValue, withTiming,} from 'react-native-reanimated'import {type ChatBskyActorDefs} from '@atproto/api'import {plural} from '@lingui/core/macro'import {useLingui} from '@lingui/react/macro'
import {HITSLOP_10} from '#/lib/constants'import {type SystemMessageGroupItem} from '#/screens/Messages/components/groupSystemMessages'import {atoms as a, useTheme} from '#/alf'import {SystemMessageItem} from '#/components/dms/SystemMessageItem'import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'import {Text} from '#/components/Typography'
const ANIMATION_DURATION_MS = 200
export function SystemMessageGroup({ item, expanded, onToggle, relatedProfiles,}: { item: SystemMessageGroupItem expanded: boolean onToggle: (key: string) => void relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>}) { const t = useTheme() const {t: l} = useLingui() const count = item.items.length
const label = plural(count, { one: '# chat update', other: '# chat updates', })
const rotation = useDerivedValue(() => withTiming(expanded ? -180 : 0, {duration: ANIMATION_DURATION_MS}), ) const chevronStyle = useAnimatedStyle(() => ({ transform: [{rotate: `${rotation.get()}deg`}], }))
return ( <View> <Pressable testID="systemMessageGroupToggle" accessibilityRole="button" accessibilityLabel={label} accessibilityHint={ expanded ? l`Hide group chat updates` : l`Show group chat updates` } accessibilityState={{expanded}} hitSlop={HITSLOP_10} onPress={() => onToggle(item.key)} style={[ a.w_full, a.flex_row, a.align_center, a.justify_center, a.px_md, a.mt_md, ]}> <Text style={[ a.text_xs, a.text_center, t.atoms.text_contrast_medium, {includeFontPadding: false, textAlignVertical: 'center'}, ]}> {label} </Text> <Animated.View style={[a.ml_2xs, chevronStyle]}> <ChevronDown size="xs" style={t.atoms.text_contrast_medium} /> </Animated.View> </Pressable> <Animated.View layout={LinearTransition.duration(ANIMATION_DURATION_MS)}> {expanded ? item.items.map(child => ( <Animated.View key={child.key} entering={FadeIn.duration(ANIMATION_DURATION_MS)} exiting={FadeOut.duration(ANIMATION_DURATION_MS)}> <SystemMessageItem item={child} relatedProfiles={relatedProfiles} /> </Animated.View> )) : null} </Animated.View> </View> )}