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

feat: redesign dokumen terkini dan samakan perilaku buka file dengan diskusi umum

Browse Source
This commit is contained in:
amaliadwiy
2026-06-10 14:59:51 +08:00
parent 21ff57366c
commit 38eff16c3a
1 changed files with 127 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
components/division/fileDivisionDetail.tsx
View File

@@ -1,17 +1,18 @@
import { ConstEnv } from "@/constants/ConstEnv";
import { isImageFile } from "@/constants/FileExtensions";
import Styles from "@/constants/Styles";
import { apiGetDivisionOneFeature } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { Feather } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as FileSystem from 'expo-file-system';
import { startActivityAsync } from 'expo-intent-launcher';
import { useLocalSearchParams } from "expo-router";
import * as Sharing from 'expo-sharing';
import React, { useEffect, useState } from "react";
import { Alert, Dimensions, Platform, Pressable, View } from "react-native";
import { useEffect, useState } from "react";
import { Platform, Pressable, ScrollView, View } from "react-native";
import ImageViewing from "react-native-image-viewing";
import * as mime from 'react-native-mime-types';
import { ICarouselInstance } from "react-native-reanimated-carousel";
import ModalLoading from "../modalLoading";
import Toast from "react-native-toast-message";
import Skeleton from "../skeleton";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text";
@@ -25,15 +26,36 @@ type Props = {
idStorage: string
}
function getFileIconColor(ext: string): string {
const e = ext.toLowerCase()
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(e)) return '#339AF0'
if (e === 'pdf') return '#F03E3E'
if (['doc', 'docx'].includes(e)) return '#1C7ED6'
if (['xls', 'xlsx', 'csv'].includes(e)) return '#2F9E44'
if (['ppt', 'pptx'].includes(e)) return '#F97316'
if (['zip', 'rar', '7z'].includes(e)) return '#E8590C'
return '#868E96'
}
function getFileIcon(ext: string): string {
const e = ext.toLowerCase()
if (isImageFile(e)) return 'image-outline'
if (e === 'pdf') return 'file-pdf-box'
if (['doc', 'docx'].includes(e)) return 'file-word-outline'
if (['xls', 'xlsx', 'csv'].includes(e)) return 'file-excel-outline'
if (['ppt', 'pptx'].includes(e)) return 'file-powerpoint-outline'
if (['zip', 'rar', '7z'].includes(e)) return 'folder-zip-outline'
return 'file-document-outline'
}
export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const ref = React.useRef<ICarouselInstance>(null);
const width = Dimensions.get("window").width;
const [data, setData] = useState<Props[]>([])
const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [loadingOpen, setLoadingOpen] = useState(false)
const [previewFile, setPreviewFile] = useState<Props | null>(null)
async function handleLoad(loading: boolean) {
try {
@@ -49,113 +71,116 @@ export default function FileDivisionDetail({ refreshing }: { refreshing: boolean
}
useEffect(() => {
if (refreshing)
handleLoad(false)
if (refreshing) handleLoad(false)
}, [refreshing])
useEffect(() => {
handleLoad(true)
}, [])
const openFile = (item: Props) => {
if (Platform.OS == 'android') setLoadingOpen(true)
let remoteUrl = ConstEnv.url_storage + '/files/' + item.idStorage;
const fileName = item.name + '.' + item.extension;
let localPath = `${FileSystem.documentDirectory}/${fileName}`;
const mimeType = mime.lookup(fileName)
FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
const contentURL = await FileSystem.getContentUriAsync(uri);
setLoadingOpen(false)
try {
if (Platform.OS == 'android') {
// open with android intent
await startActivityAsync(
'android.intent.action.VIEW',
{
data: contentURL,
flags: 1,
type: mimeType as string,
}
);
// or
// Sharing.shareAsync(localPath);
} else if (Platform.OS == 'ios') {
Sharing.shareAsync(localPath);
}
} catch (error) {
Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
} finally {
if (Platform.OS == 'android') setLoadingOpen(false)
async function openExternal(item: Props) {
try {
setLoadingOpen(true)
const remoteUrl = `${ConstEnv.url_storage}/files/${item.idStorage}`
const fileName = `${item.name}.${item.extension}`
const localPath = `${FileSystem.documentDirectory}/${fileName}`
const dl = await FileSystem.downloadAsync(remoteUrl, localPath)
if (dl.status !== 200) throw new Error('Download failed')
const contentURL = await FileSystem.getContentUriAsync(dl.uri)
const mimeType = mime.lookup(fileName) as string
if (Platform.OS === 'android') {
await startActivityAsync('android.intent.action.VIEW', { data: contentURL, flags: 1, type: mimeType })
} else {
await Sharing.shareAsync(localPath)
}
});
};
} catch {
Toast.show({ type: 'error', text1: 'Gagal membuka file' })
} finally {
setLoadingOpen(false)
}
}
function handleFilePress(item: Props) {
if (isImageFile(item.extension.toLowerCase())) {
setPreviewFile(item)
} else {
openExternal(item)
}
}
return (
<View style={[Styles.mb15]}>
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
{
loading ?
<View style={[Styles.rowSpaceBetween]}>
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
</View>
:
data.length > 0 ?
<View style={[Styles.rowItemsCenter]}>
{
data.map((item, index) => (
<Pressable style={[Styles.mr05, { width: '24%' }]} key={index} onPress={() => openFile(item)}>
<View style={{ alignItems: 'center' }}>
<View style={[Styles.wrapPaper, { alignItems: 'center', backgroundColor: colors.card, borderWidth: 1, borderColor: colors.icon + '20' }]}>
<Feather name="file-text" size={50} color={colors.text} style={Styles.mr05} />
</View>
</View>
<View style={[Styles.contentItemCenter]}>
<Text style={[Styles.textMediumNormal, Styles.w90, { textAlign: 'center' }]} numberOfLines={1}>{item.name}.{item.extension}</Text>
</View>
</Pressable>
))
}
</View>
// <Carousel
// ref={ref}
// width={width * 1.1}
// height={115}
// data={data}
// loop={true}
// autoPlay={false}
// autoPlayReverse={false}
// pagingEnabled={true}
// snapEnabled={true}
// vertical={false}
// mode="parallax"
// modeConfig={{
// parallaxScrollingScale: 1,
// parallaxScrollingOffset: 310,
// parallaxAdjacentItemScale: 1,
// }}
// style={{ width:'100%' }}
// renderItem={({ index }) => (
// <View style={{ width: '27%' }}>
// <View style={{ alignItems: 'center' }}>
// <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
// <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
// </View>
// </View>
// <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
// </View>
{loading ? (
<View style={{ flexDirection: 'row', gap: 8 }}>
<Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
<Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
<Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
</View>
) : data.length > 0 ? (
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
{data.map((item, index) => {
const iconColor = getFileIconColor(item.extension)
const iconName = getFileIcon(item.extension)
return (
<Pressable
key={index}
onPress={() => handleFilePress(item)}
style={({ pressed }) => ({
flexDirection: 'row', alignItems: 'center', gap: 10,
paddingHorizontal: 12, paddingVertical: 10,
borderRadius: 8, borderWidth: 1,
backgroundColor: pressed ? colors.icon + '08' : colors.card,
borderColor: colors.icon + '20',
width: 160,
})}
>
<View style={{
width: 40, height: 40, borderRadius: 8,
backgroundColor: iconColor + '20',
alignItems: 'center', justifyContent: 'center',
flexShrink: 0,
}}>
<MaterialCommunityIcons name={iconName as any} size={22} color={iconColor} />
</View>
<View style={{ flexShrink: 1 }}>
<Text style={[Styles.textSmallSemiBold, { color: colors.text }]} numberOfLines={1}>
{item.name}
</Text>
<Text style={[Styles.textInformation, { color: colors.dimmed, marginTop: 2 }]}>
{item.extension.toUpperCase()}
</Text>
</View>
</Pressable>
)
})}
</ScrollView>
) : (
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada file</Text>
)}
// )}
// />
:
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada file</Text>
}
<ImageViewing
images={[{ uri: `${ConstEnv.url_storage}/files/${previewFile?.idStorage}` }]}
imageIndex={0}
visible={previewFile !== null}
onRequestClose={() => setPreviewFile(null)}
doubleTapToZoomEnabled
HeaderComponent={() => (
<View style={Styles.headerModalViewImg}>
<Pressable onPress={() => setPreviewFile(null)}>
<Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
</Pressable>
<Pressable onPress={() => previewFile && openExternal(previewFile)} disabled={loadingOpen}>
<Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}>⋯</Text>
</Pressable>
</View>
)}
FooterComponent={() => (
<View style={{ paddingBottom: 20, paddingHorizontal: 16, alignItems: 'center' }}>
<Text style={{ color: 'white', fontSize: 16 }}>{previewFile?.name}.{previewFile?.extension}</Text>
</View>
)}
/>
</View>
)
}
}