leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix - comments bottom sheet

Browse Source
This commit is contained in:
Victor
2025-09-17 14:21:33 +02:00
parent 12f87f0c92
commit 5872e47f18
1 changed files with 139 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/bottomsheets/CommentsBottomSheet.js
+139 -128
View File
@@ -3,6 +3,7 @@ import {
BottomSheetBackdrop, BottomSheetBackdrop,
BottomSheetModal, BottomSheetModal,
BottomSheetScrollView, BottomSheetScrollView,
BottomSheetTextInput,
} from '@gorhom/bottom-sheet'; } from '@gorhom/bottom-sheet';
import { BlurView } from 'expo-blur'; import { BlurView } from 'expo-blur';
import { Image as ExpoImage } from 'expo-image'; import { Image as ExpoImage } from 'expo-image';
@@ -18,7 +19,6 @@ import {
Platform, Platform,
Pressable, Pressable,
Text, Text,
TextInput,
View, View,
KeyboardAvoidingView, KeyboardAvoidingView,
} from 'react-native'; } from 'react-native';
@@ -86,6 +86,13 @@ const CommentsBottomSheet = () => {
const snapPoints = useMemo(() => ['90%'], []); const snapPoints = useMemo(() => ['90%'], []);
const INPUT_HEIGHT = 54;
const INPUT_MARGIN_VERTICAL = 12;
const bottomPadding = useMemo(
() => INPUT_HEIGHT + INPUT_MARGIN_VERTICAL + (insets?.bottom || 0) + 12,
[insets?.bottom]
);
const commentsRef = useMemo(() => { const commentsRef = useMemo(() => {
try { try {
return projectId return projectId
@@ -237,148 +244,152 @@ const CommentsBottomSheet = () => {
Commentaires Commentaires
</Text> </Text>
</View> </View>
<View style={{ flex: 1 }}>
<BottomSheetScrollView <BottomSheetScrollView
ref={scrollRef} ref={scrollRef}
keyboardShouldPersistTaps='handled' keyboardShouldPersistTaps='handled'
onContentSizeChange={() => { keyboardDismissMode='interactive'
if (typing) { onContentSizeChange={() => {
try { if (typing) {
scrollRef.current?.scrollToEnd?.({ animated: true }); try {
} catch {} scrollRef.current?.scrollToEnd?.({ animated: true });
} } catch {}
}} }
onScroll={handleScroll} }}
scrollEventThrottle={100} onScroll={handleScroll}
contentContainerStyle={{ scrollEventThrottle={100}
paddingHorizontal: 14, contentContainerStyle={{
paddingBottom: (insets?.bottom || 0) + 40, paddingHorizontal: 14,
}} paddingBottom: bottomPadding,
showsVerticalScrollIndicator> }}
{Array.isArray(comments) && comments.length > 0 ? ( showsVerticalScrollIndicator>
comments.map((c) => ( {Array.isArray(comments) && comments.length > 0 ? (
<View comments.map((c) => (
key={c.id} <View
style={{ flexDirection: 'row', gap: 12, marginBottom: 14 }}> key={c.id}
{c?.profilePicture ? ( style={{ flexDirection: 'row', gap: 12, marginBottom: 14 }}>
<ExpoImage {c?.profilePicture ? (
source={{ uri: c.profilePicture }} <ExpoImage
cachePolicy='memory-disk' source={{ uri: c.profilePicture }}
priority='high' cachePolicy='memory-disk'
contentFit='cover' priority='high'
transition={100} contentFit='cover'
style={{ ...size({ size: 42 }), borderRadius: 100 }} transition={100}
/> style={{ ...size({ size: 42 }), borderRadius: 100 }}
) : ( />
<View ) : (
style={{ <View
...size({ size: 42 }),
borderRadius: 100,
backgroundColor: '#FFFFFF22',
}}
/>
)}
<View style={{ flex: 1 }}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 6,
}}>
<Text
style={{ style={{
fontSize: 12, ...size({ size: 42 }),
color: Palette.white, borderRadius: 100,
fontFamily: FONT_FAMILY.InterMedium, backgroundColor: '#FFFFFF22',
}}
/>
)}
<View style={{ flex: 1 }}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 6,
}}> }}>
{c?.userId === currentUID ? 'vous' : c?.userName || ''} <Text
</Text> style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
}}>
{c?.userId === currentUID
? 'vous'
: c?.userName || ''}
</Text>
<Text
style={{
fontSize: 12,
color: Palette.white,
opacity: 0.75,
fontFamily: FONT_FAMILY.InterRegular,
}}>
• {formatRelativeTime(c?.createdAt)}
</Text>
</View>
<Text <Text
style={{ style={{
fontSize: 12, fontSize: 14,
color: Palette.white, color: Palette.white,
opacity: 0.75,
fontFamily: FONT_FAMILY.InterRegular, fontFamily: FONT_FAMILY.InterRegular,
}}> }}>
• {formatRelativeTime(c?.createdAt)} {c?.text}
</Text> </Text>
</View> </View>
<Text
style={{
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}>
{c?.text}
</Text>
</View> </View>
</View> ))
)) ) : (
) : ( <Text
<Text style={{
style={{ fontSize: 14,
fontSize: 14, color: Palette.white,
color: Palette.white, opacity: 0.8,
opacity: 0.8, fontFamily: FONT_FAMILY.InterRegular,
fontFamily: FONT_FAMILY.InterRegular, textAlign: 'center',
textAlign: 'center', marginTop: 6,
marginTop: 6, }}>
}}> Aucun commentaire pour le moment
Aucun commentaire pour le moment </Text>
</Text> )}
)} </BottomSheetScrollView>
{/* INPUT en bas du contenu */} <View
<View style={{ height: 12 }} />
<BlurView
intensity={Platform.OS !== 'ios' ? 10 : 20}
style={{ style={{
flexDirection: 'row', position: 'absolute',
alignItems: 'center', left: 14,
gap: 10, right: 14,
paddingHorizontal: 16, bottom: (insets?.bottom || 0) + INPUT_MARGIN_VERTICAL,
backgroundColor: Palette.glass, }}>
overflow: 'hidden', <BlurView
height: 54, intensity={Platform.OS !== 'ios' ? 10 : 20}
borderRadius: 16,
}}
// experimentalBlurMethod={
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
>
<TextInput
placeholder='Ajouter un commentaire'
placeholderTextColor='#FFFFFFAA'
value={text}
onChangeText={(t) => {
setText(t);
}}
onFocus={() => {
setTyping(true);
setTimeout(() => {
try {
scrollRef.current?.scrollToEnd?.({ animated: true });
} catch {}
}, 50);
}}
onBlur={() => setTyping(false)}
style={{ style={{
flex: 1, flexDirection: 'row',
color: Palette.white, alignItems: 'center',
fontSize: 14, gap: 10,
fontFamily: FONT_FAMILY.InterRegular, paddingHorizontal: 16,
backgroundColor: Palette.glass,
overflow: 'hidden',
height: INPUT_HEIGHT,
borderRadius: 16,
}} }}
/> // experimentalBlurMethod={
<Pressable onPress={onSend}> // Platform.OS !== "ios" ? "dimezisBlurView" : "none"
<Image // }
source={icons.send} >
style={{ width: 24, height: 24, tintColor: Palette.white }} <BottomSheetTextInput
resizeMode='contain' placeholder='Ajouter un commentaire'
placeholderTextColor='#FFFFFFAA'
value={text}
onChangeText={(t) => {
setText(t);
}}
onFocus={() => {
setTyping(true);
}}
onBlur={() => setTyping(false)}
style={{
flex: 1,
color: Palette.white,
fontSize: 14,
fontFamily: FONT_FAMILY.InterRegular,
}}
/> />
</Pressable> <Pressable onPress={onSend}>
</BlurView> <Image
<View style={{ height: (insets?.bottom || 0) + 24 }} /> source={icons.send}
</BottomSheetScrollView> style={{ width: 24, height: 24, tintColor: Palette.white }}
resizeMode='contain'
/>
</Pressable>
</BlurView>
</View>
</View>
</KeyboardAvoidingView> </KeyboardAvoidingView>
</BlurView> </BlurView>
</BottomSheetModal> </BottomSheetModal>