feat: redesign input komentar gaya messaging app dan tampilan file lampiran
- Input komentar: tombol + di kiri, pill input flex-1, tombol send lingkaran di kanan - Tampilan file di komentar: semua tipe file sebagai card (tidak ada preview inline) - Grid 2 kolom untuk file, chip '+N lainnya' jika lebih dari 2 - Modal full screen saat klik '+N lainnya' dengan grid 2 kolom - Preview gambar via ImageViewing (dalam modal dan di luar modal) - File non-gambar dibuka via native viewer (download + intent/share)
This commit is contained in:
171
components/discussion_general/discussionCommentInput.tsx
Normal file
171
components/discussion_general/discussionCommentInput.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import Text from "@/components/Text";
|
||||
import { regexOnlySpacesOrEnter } from "@/constants/OnlySpaceOrEnter";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
|
||||
import * as DocumentPicker from "expo-document-picker";
|
||||
import { Platform, Pressable, ScrollView, TextInput, View } from "react-native";
|
||||
import Toast from "react-native-toast-message";
|
||||
|
||||
type Props = {
|
||||
mode: 'new' | 'edit' | 'locked'
|
||||
lockedReason?: string
|
||||
value: string
|
||||
onChange: (val: string) => void
|
||||
loading: boolean
|
||||
onSend: () => void
|
||||
onCancelEdit?: () => void
|
||||
files?: { uri: string; name: string }[]
|
||||
onAddFile?: (files: { uri: string; name: string }[]) => void
|
||||
onRemoveFile?: (index: number) => void
|
||||
existingFiles?: { id: string; name: string; extension: string }[]
|
||||
onRemoveExistingFile?: (id: string) => void
|
||||
canSend: boolean
|
||||
}
|
||||
|
||||
export default function DiscussionCommentInput({
|
||||
mode, lockedReason, value, onChange, loading, onSend,
|
||||
onCancelEdit, files = [], onAddFile, onRemoveFile,
|
||||
existingFiles = [], onRemoveExistingFile, canSend
|
||||
}: Props) {
|
||||
const { colors } = useTheme()
|
||||
|
||||
async function pickFiles() {
|
||||
const result = await DocumentPicker.getDocumentAsync({ type: ['*/*'], multiple: true })
|
||||
if (!result.canceled && onAddFile) {
|
||||
let skipped = 0
|
||||
const newFiles: { uri: string; name: string }[] = []
|
||||
for (const asset of result.assets) {
|
||||
if (!asset.uri) continue
|
||||
if (files.some(f => f.name === asset.name)) { skipped++; continue }
|
||||
newFiles.push({ uri: asset.uri, name: asset.name })
|
||||
}
|
||||
if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
|
||||
if (newFiles.length > 0) onAddFile(newFiles)
|
||||
}
|
||||
}
|
||||
|
||||
if (mode === 'locked') {
|
||||
return (
|
||||
<View style={[Styles.pv20, Styles.itemsCenter]}>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{lockedReason}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const sendDisabled = loading || value.trim() === '' || regexOnlySpacesOrEnter.test(value) || !canSend
|
||||
|
||||
return (
|
||||
<View style={{ backgroundColor: colors.background, borderTopWidth: mode === 'edit' ? 1 : 0, borderTopColor: colors.icon + '20' }}>
|
||||
{mode === 'edit' && (
|
||||
<View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<Feather name="edit-3" color={colors.text} size={20} style={Styles.mh05} />
|
||||
<Text style={Styles.textMediumSemiBold}>Edit Komentar</Text>
|
||||
</View>
|
||||
<Pressable onPress={onCancelEdit}>
|
||||
<MaterialIcons name="close" color={colors.text} size={20} />
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{(existingFiles.length > 0 || files.length > 0) && (
|
||||
<ScrollView horizontal style={[Styles.ph15, Styles.pv05]} showsHorizontalScrollIndicator={false}>
|
||||
{existingFiles.map((f) => (
|
||||
<Pressable
|
||||
key={f.id}
|
||||
onPress={() => onRemoveExistingFile?.(f.id)}
|
||||
style={{
|
||||
flexDirection: 'row', alignItems: 'center', gap: 6,
|
||||
paddingHorizontal: 10, paddingVertical: 6,
|
||||
borderRadius: 20, borderWidth: 1,
|
||||
backgroundColor: colors.card, borderColor: colors.icon + '18',
|
||||
marginRight: 8
|
||||
}}
|
||||
>
|
||||
<MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
|
||||
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, maxWidth: 100 }]} numberOfLines={1}>
|
||||
{f.name}.{f.extension}
|
||||
</Text>
|
||||
<MaterialIcons name="close" size={14} color='#F03E3E' />
|
||||
</Pressable>
|
||||
))}
|
||||
{files.map((f, idx) => (
|
||||
<Pressable
|
||||
key={idx}
|
||||
onPress={() => onRemoveFile?.(idx)}
|
||||
style={{
|
||||
flexDirection: 'row', alignItems: 'center', gap: 6,
|
||||
paddingHorizontal: 10, paddingVertical: 6,
|
||||
borderRadius: 20, borderWidth: 1,
|
||||
backgroundColor: colors.card, borderColor: colors.icon + '18',
|
||||
marginRight: 8
|
||||
}}
|
||||
>
|
||||
<MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
|
||||
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, maxWidth: 100 }]} numberOfLines={1}>
|
||||
{f.name}
|
||||
</Text>
|
||||
<MaterialIcons name="close" size={14} color={colors.dimmed} />
|
||||
</Pressable>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
<View style={{
|
||||
flexDirection: 'row', alignItems: 'flex-end',
|
||||
paddingHorizontal: 12,
|
||||
paddingBottom: Platform.OS === 'ios' ? 10 : 6,
|
||||
paddingTop: 6,
|
||||
gap: 8
|
||||
}}>
|
||||
{mode === 'new' && (
|
||||
<Pressable
|
||||
onPress={pickFiles}
|
||||
style={{ marginBottom: 6 }}
|
||||
>
|
||||
<MaterialIcons
|
||||
name="add"
|
||||
size={28}
|
||||
color={files.length > 0 ? colors.tabActive : colors.dimmed}
|
||||
/>
|
||||
</Pressable>
|
||||
)}
|
||||
|
||||
<View style={{
|
||||
flex: 1,
|
||||
backgroundColor: colors.input,
|
||||
borderRadius: 30, borderWidth: 1, borderColor: colors.icon + '20',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
}}>
|
||||
<TextInput
|
||||
style={{
|
||||
color: colors.text,
|
||||
maxHeight: 100,
|
||||
paddingVertical: Platform.OS === 'android' ? 4 : 0,
|
||||
textAlignVertical: 'bottom',
|
||||
}}
|
||||
placeholder="Kirim Komentar"
|
||||
placeholderTextColor={colors.dimmed}
|
||||
value={value}
|
||||
onChangeText={onChange}
|
||||
multiline
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
onPress={() => !sendDisabled && onSend()}
|
||||
style={{
|
||||
width: 40, height: 40, borderRadius: 20,
|
||||
backgroundColor: sendDisabled ? colors.dimmed + '40' : colors.tint,
|
||||
justifyContent: 'center', alignItems: 'center',
|
||||
marginBottom: 0
|
||||
}}
|
||||
>
|
||||
<Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : '#fff'} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user