wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tambah loading state, perbaiki posisi button close, dan label mengirim pada input komentar

Browse Source
This commit is contained in:
amaliadwiy
2026-06-10 14:28:56 +08:00
parent 1c495541b5
commit 589ac54c5d
1 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/discussion_general/discussionCommentInput.tsx
View File

@@ -4,7 +4,7 @@ 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 { ActivityIndicator, Platform, Pressable, ScrollView, TextInput, View } from "react-native";
import Toast from "react-native-toast-message";
type Props = {
@@ -58,29 +58,39 @@ export default function DiscussionCommentInput({
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.rowSpaceBetween, Styles.pv05, { paddingHorizontal: 12 }]}>
<View style={Styles.rowItemsCenter}>
<Feather name="edit-3" color={colors.text} size={20} style={Styles.mh05} />
<Text style={Styles.textMediumSemiBold}>Edit Komentar</Text>
{loading && (
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginLeft: 6 }]}>Mengirim...</Text>
)}
</View>
<Pressable onPress={onCancelEdit}>
<MaterialIcons name="close" color={colors.text} size={20} />
<Pressable onPress={onCancelEdit} disabled={loading}>
<MaterialIcons name="close" color={loading ? colors.dimmed : colors.text} size={20} />
</Pressable>
</View>
)}
{loading && mode === 'new' && (files.length > 0 || existingFiles.length > 0) && (
<View style={{ paddingHorizontal: 15, paddingTop: 6 }}>
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>Mengirim...</Text>
</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)}
onPress={() => !loading && 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
marginRight: 8,
opacity: loading ? 0.5 : 1
}}
>
<MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
@@ -93,13 +103,14 @@ export default function DiscussionCommentInput({
{files.map((f, idx) => (
<Pressable
key={idx}
onPress={() => onRemoveFile?.(idx)}
onPress={() => !loading && 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
marginRight: 8,
opacity: loading ? 0.5 : 1
}}
>
<MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
@@ -122,12 +133,13 @@ export default function DiscussionCommentInput({
{mode === 'new' && (
<Pressable
onPress={pickFiles}
disabled={loading}
style={{ marginBottom: 6 }}
>
<MaterialIcons
name="add"
size={28}
color={files.length > 0 ? colors.tabActive : colors.dimmed}
color={loading ? colors.dimmed + '60' : files.length > 0 ? colors.tabActive : colors.dimmed}
/>
</Pressable>
)}
@@ -138,6 +150,7 @@ export default function DiscussionCommentInput({
borderRadius: 30, borderWidth: 1, borderColor: colors.icon + '20',
paddingHorizontal: 14,
paddingVertical: 10,
opacity: loading ? 0.6 : 1
}}>
<TextInput
style={{
@@ -151,6 +164,7 @@ export default function DiscussionCommentInput({
value={value}
onChangeText={onChange}
multiline
editable={!loading}
/>
</View>
@@ -160,10 +174,12 @@ export default function DiscussionCommentInput({
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'} />
{loading
? <ActivityIndicator size={18} color={sendDisabled ? colors.dimmed : '#fff'} />
: <Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : '#fff'} />
}
</Pressable>
</View>
</View>