Files
mobile-darmasaba/components/division/fileDivisionDetail.tsx
amal a66dbdddca upd: tampilan
Deskripsi:
- update tampilan file pada index detail divisi

No Issues
2025-07-21 16:51:07 +08:00

107 lines
4.4 KiB
TypeScript

import Styles from "@/constants/Styles";
import { apiGetDivisionOneFeature } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { Feather } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react";
import { Dimensions, Text, View } from "react-native";
import { ICarouselInstance } from "react-native-reanimated-carousel";
import Skeleton from "../skeleton";
type Props = {
id: string
name: string
extension: string
path: string
share: boolean
}
export default function FileDivisionDetail() {
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)
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'new-file' })
setData(response.data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad()
}, [])
return (
<View style={[Styles.mb15]}>
<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) => (
<View style={[Styles.mr05, { width: '24%' }]} key={index}>
<View style={{ alignItems: 'center' }}>
<View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
<Feather name="file-text" size={50} color="black" 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>
</View>
))
}
</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>
// )}
// />
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
}
</View>
)
}