From 38eff16c3a5b392ff9ba4a6e0824c8c95ca712c9 Mon Sep 17 00:00:00 2001 From: amaliadwiy Date: Wed, 10 Jun 2026 14:59:51 +0800 Subject: [PATCH] feat: redesign dokumen terkini dan samakan perilaku buka file dengan diskusi umum --- components/division/fileDivisionDetail.tsx | 229 ++++++++++++--------- 1 file changed, 127 insertions(+), 102 deletions(-) diff --git a/components/division/fileDivisionDetail.tsx b/components/division/fileDivisionDetail.tsx index 0717a10..44f041b 100644 --- a/components/division/fileDivisionDetail.tsx +++ b/components/division/fileDivisionDetail.tsx @@ -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(null); - const width = Dimensions.get("window").width; const [data, setData] = useState([]) const { token, decryptToken } = useAuthSession() const { id } = useLocalSearchParams<{ id: string }>() const [loading, setLoading] = useState(true) const [loadingOpen, setLoadingOpen] = useState(false) + const [previewFile, setPreviewFile] = useState(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 ( - Dokumen Terkini - { - loading ? - - - - - - : - data.length > 0 ? - - { - data.map((item, index) => ( - openFile(item)}> - - - - - - - {item.name}.{item.extension} - - - )) - } - - // ( - // - // - // - // - // - // - // {data[index].name}.{data[index].extension} - // + {loading ? ( + + + + + + ) : data.length > 0 ? ( + + {data.map((item, index) => { + const iconColor = getFileIconColor(item.extension) + const iconName = getFileIcon(item.extension) + return ( + 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, + })} + > + + + + + + {item.name} + + + {item.extension.toUpperCase()} + + + + ) + })} + + ) : ( + Tidak ada file + )} - // )} - // /> - : - Tidak ada file - } + setPreviewFile(null)} + doubleTapToZoomEnabled + HeaderComponent={() => ( + + setPreviewFile(null)}> + ✕ + + previewFile && openExternal(previewFile)} disabled={loadingOpen}> + ⋯ + + + )} + FooterComponent={() => ( + + {previewFile?.name}.{previewFile?.extension} + + )} + /> ) -} \ No newline at end of file +}