Files
mobile-darmasaba/components/document/itemFile.tsx
2026-02-12 17:52:19 +08:00

69 lines
2.8 KiB
TypeScript

import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import Text from "../Text";
type Props = {
title: string
category: 'folder' | 'folder-shared' | 'file' | 'file-shared'
dateTime: string
checked?: boolean
onChecked?: () => void
onPress?: () => void
canChecked?: boolean
}
export default function ItemFile({ category, checked, dateTime, title, onChecked, onPress, canChecked }: Props) {
const { colors } = useTheme();
return (
<View style={[Styles.wrapItemBorderBottom, { borderColor: colors.background }]}>
<View style={[Styles.rowItemsCenter]}>
<Pressable onPress={onPress}>
{
category == 'folder-shared'
?
<>
<Ionicons name="folder-open-sharp" color={'#f9cc40'} size={40} />
<MaterialCommunityIcons name="share" color={colors.tint} size={25} style={[Styles.absoluteIcon]} />
</>
: category == 'file-shared'
?
<>
<Ionicons name="document-text-sharp" color={'#9fcff8'} size={40} />
<MaterialCommunityIcons name="share" color={colors.tint} size={25} style={[Styles.absoluteIcon]} />
</>
:
category == 'folder'
?
<Ionicons name="folder-open-sharp" color={'#f9cc40'} size={40} />
:
<Ionicons name="document-text-sharp" color={'#9fcff8'} size={40} />
}
</Pressable>
<View style={[Styles.rowSpaceBetween, { flex: 1, alignItems: 'center' }]}>
<Pressable style={[Styles.ml10, { flex: 1 },]} onPress={onPress}>
<Text style={[Styles.textDefault, { color: colors.text }]} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{dateTime}</Text>
</Pressable>
{
!canChecked ? <></>
:
<Pressable onPress={onChecked}>
{
checked
? <MaterialCommunityIcons name="checkbox-marked-circle" size={25} color={colors.text} />
: <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={25} color={colors.icon} />
}
</Pressable>
}
</View>
</View>
</View>
)
}