fix - comments bottom sheet
This commit is contained in:
Victor
@@ -3,6 +3,7 @@ import {
|
||||
BottomSheetBackdrop,
|
||||
BottomSheetModal,
|
||||
BottomSheetScrollView,
|
||||
BottomSheetTextInput,
|
||||
} from '@gorhom/bottom-sheet';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { Image as ExpoImage } from 'expo-image';
|
||||
@@ -18,7 +19,6 @@ import {
|
||||
Platform,
|
||||
Pressable,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
KeyboardAvoidingView,
|
||||
} from 'react-native';
|
||||
@@ -86,6 +86,13 @@ const CommentsBottomSheet = () => {
|
||||
|
||||
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(() => {
|
||||
try {
|
||||
return projectId
|
||||
@@ -237,148 +244,152 @@ const CommentsBottomSheet = () => {
|
||||
Commentaires
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<BottomSheetScrollView
|
||||
ref={scrollRef}
|
||||
keyboardShouldPersistTaps='handled'
|
||||
onContentSizeChange={() => {
|
||||
if (typing) {
|
||||
try {
|
||||
scrollRef.current?.scrollToEnd?.({ animated: true });
|
||||
} catch {}
|
||||
}
|
||||
}}
|
||||
onScroll={handleScroll}
|
||||
scrollEventThrottle={100}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: 14,
|
||||
paddingBottom: (insets?.bottom || 0) + 40,
|
||||
}}
|
||||
showsVerticalScrollIndicator>
|
||||
{Array.isArray(comments) && comments.length > 0 ? (
|
||||
comments.map((c) => (
|
||||
<View
|
||||
key={c.id}
|
||||
style={{ flexDirection: 'row', gap: 12, marginBottom: 14 }}>
|
||||
{c?.profilePicture ? (
|
||||
<ExpoImage
|
||||
source={{ uri: c.profilePicture }}
|
||||
cachePolicy='memory-disk'
|
||||
priority='high'
|
||||
contentFit='cover'
|
||||
transition={100}
|
||||
style={{ ...size({ size: 42 }), borderRadius: 100 }}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 42 }),
|
||||
borderRadius: 100,
|
||||
backgroundColor: '#FFFFFF22',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<View style={{ flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
}}>
|
||||
<Text
|
||||
<View style={{ flex: 1 }}>
|
||||
<BottomSheetScrollView
|
||||
ref={scrollRef}
|
||||
keyboardShouldPersistTaps='handled'
|
||||
keyboardDismissMode='interactive'
|
||||
onContentSizeChange={() => {
|
||||
if (typing) {
|
||||
try {
|
||||
scrollRef.current?.scrollToEnd?.({ animated: true });
|
||||
} catch {}
|
||||
}
|
||||
}}
|
||||
onScroll={handleScroll}
|
||||
scrollEventThrottle={100}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: 14,
|
||||
paddingBottom: bottomPadding,
|
||||
}}
|
||||
showsVerticalScrollIndicator>
|
||||
{Array.isArray(comments) && comments.length > 0 ? (
|
||||
comments.map((c) => (
|
||||
<View
|
||||
key={c.id}
|
||||
style={{ flexDirection: 'row', gap: 12, marginBottom: 14 }}>
|
||||
{c?.profilePicture ? (
|
||||
<ExpoImage
|
||||
source={{ uri: c.profilePicture }}
|
||||
cachePolicy='memory-disk'
|
||||
priority='high'
|
||||
contentFit='cover'
|
||||
transition={100}
|
||||
style={{ ...size({ size: 42 }), borderRadius: 100 }}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
...size({ size: 42 }),
|
||||
borderRadius: 100,
|
||||
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
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
opacity: 0.75,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}>
|
||||
• {formatRelativeTime(c?.createdAt)}
|
||||
{c?.text}
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}>
|
||||
{c?.text}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
opacity: 0.8,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
textAlign: 'center',
|
||||
marginTop: 6,
|
||||
}}>
|
||||
Aucun commentaire pour le moment
|
||||
</Text>
|
||||
)}
|
||||
))
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
opacity: 0.8,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
textAlign: 'center',
|
||||
marginTop: 6,
|
||||
}}>
|
||||
Aucun commentaire pour le moment
|
||||
</Text>
|
||||
)}
|
||||
</BottomSheetScrollView>
|
||||
|
||||
{/* INPUT en bas du contenu */}
|
||||
<View style={{ height: 12 }} />
|
||||
<BlurView
|
||||
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Palette.glass,
|
||||
overflow: 'hidden',
|
||||
height: 54,
|
||||
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)}
|
||||
position: 'absolute',
|
||||
left: 14,
|
||||
right: 14,
|
||||
bottom: (insets?.bottom || 0) + INPUT_MARGIN_VERTICAL,
|
||||
}}>
|
||||
<BlurView
|
||||
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
||||
style={{
|
||||
flex: 1,
|
||||
color: Palette.white,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Palette.glass,
|
||||
overflow: 'hidden',
|
||||
height: INPUT_HEIGHT,
|
||||
borderRadius: 16,
|
||||
}}
|
||||
/>
|
||||
<Pressable onPress={onSend}>
|
||||
<Image
|
||||
source={icons.send}
|
||||
style={{ width: 24, height: 24, tintColor: Palette.white }}
|
||||
resizeMode='contain'
|
||||
// experimentalBlurMethod={
|
||||
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
// }
|
||||
>
|
||||
<BottomSheetTextInput
|
||||
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>
|
||||
</BlurView>
|
||||
<View style={{ height: (insets?.bottom || 0) + 24 }} />
|
||||
</BottomSheetScrollView>
|
||||
<Pressable onPress={onSend}>
|
||||
<Image
|
||||
source={icons.send}
|
||||
style={{ width: 24, height: 24, tintColor: Palette.white }}
|
||||
resizeMode='contain'
|
||||
/>
|
||||
</Pressable>
|
||||
</BlurView>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</BlurView>
|
||||
</BottomSheetModal>
|
||||
|
||||
Reference in New Issue
Block a user