upd: dokumen divisi
Deskripsi: - ui menu bottom dan header saat file dokumen sedang keselect - modal informasi - ui accordion - nb : scroll view di modal masih blm bisa No Issues
This commit is contained in:
amel
166
components/document/menuBottomSelectDocument.tsx
Normal file
166
components/document/menuBottomSelectDocument.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import { ColorsStatus } from "@/constants/ColorsStatus";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import { useState } from "react";
|
||||
import { Pressable, ScrollView, Text, View } from "react-native";
|
||||
import { useSharedValue } from "react-native-reanimated";
|
||||
import DrawerBottom from "../drawerBottom";
|
||||
import ItemAccordion from "../itemAccordion";
|
||||
import ItemDetailMember from "../itemDetailMember";
|
||||
import MenuItemRow from "../menuItemRow";
|
||||
|
||||
export default function MenuBottomSelectDocument() {
|
||||
const [isModal, setModal] = useState(false)
|
||||
const [isInformasi, setInformasi] = useState(false)
|
||||
const open = useSharedValue(false)
|
||||
|
||||
const onPress = () => {
|
||||
open.value = !open.value;
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={[ColorsStatus.primary, Styles.bottomMenuSelectDocument]}>
|
||||
<View style={[Styles.rowItemsCenter, { justifyContent: 'center' }]}>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="download-outline" color="white" size={25} />}
|
||||
title="Unduh"
|
||||
onPress={() => { }}
|
||||
column="many"
|
||||
color="white"
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="trash-can-outline" color="white" size={25} />}
|
||||
title="Hapus"
|
||||
onPress={() => { }}
|
||||
column="many"
|
||||
color="white"
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="pencil-outline" color="white" size={25} />}
|
||||
title="Ganti Nama"
|
||||
onPress={() => { }}
|
||||
column="many"
|
||||
color="white"
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="share-variant-outline" color="white" size={25} />}
|
||||
title="Bagikan"
|
||||
onPress={() => { }}
|
||||
column="many"
|
||||
color="white"
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="dots-vertical" color="white" size={25} />}
|
||||
title="Lainnya"
|
||||
onPress={() => { setModal(true) }}
|
||||
column="many"
|
||||
color="white"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="">
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="folder-move-outline" color="black" size={25} />}
|
||||
title="Pindah"
|
||||
onPress={() => { }}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="folder-multiple-outline" color="black" size={25} />}
|
||||
title="Salin"
|
||||
onPress={() => { }}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="information-variant" color="black" size={25} />}
|
||||
title="Informasi"
|
||||
onPress={() => { setModal(false); setInformasi(true) }}
|
||||
/>
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
<DrawerBottom animation="slide" isVisible={isInformasi} setVisible={setInformasi} title="Informasi Dokumen" height={80}>
|
||||
<View style={[Styles.contentItemCenter, Styles.mb10]}>
|
||||
<Ionicons name="document-text-sharp" color={'#9fcff8'} size={80} />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<ItemDetailMember category="dokumen" value="123456789" border />
|
||||
<ItemDetailMember category="type" value="file" border />
|
||||
<ItemDetailMember category="location" value="home" border />
|
||||
<ItemDetailMember category="owner" value="Sosial Kemasyarakatan" border />
|
||||
<ItemDetailMember category="calendar" value="12 Maret 2025" border />
|
||||
<Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom]} onPress={onPress}>
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
<MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Telah dibagikan ke divisi</Text>
|
||||
</View>
|
||||
<MaterialCommunityIcons name="chevron-down" size={22} color="black" />
|
||||
</Pressable>
|
||||
<ItemAccordion isExpanded={open} viewKey="Accordion" duration={500}>
|
||||
<ScrollView style={[Styles.w100, { height: 200 }]} >
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
||||
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
||||
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</ItemAccordion>
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user