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

upd: dokumen divisi

Browse Source 
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
2025-03-19 15:28:09 +08:00
parent 3f75d25905
commit f6ac399c06
6 changed files with 296 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/(application)/division/[id]/(fitur-division)/document/index.tsx
View File

@@ -1,25 +1,35 @@
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonHeader } from "@/components/buttonHeader"
import HeaderRightDocument from "@/components/document/headerDocument"
import ItemFile from "@/components/document/itemFile"
import MenuBottomSelectDocument from "@/components/document/menuBottomSelectDocument"
import Styles from "@/constants/Styles"
import { AntDesign, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import { AntDesign, MaterialIcons } from "@expo/vector-icons"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { useState } from "react"
import { SafeAreaView, ScrollView, Text, View } from "react-native"
export default function DocumentDivision() {
const { path } = useLocalSearchParams<{ path?: string }>()
const [isChecked, setIsChecked] = useState(false)
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Dokumen Divisi',
headerLeft: () =>
isChecked
? <ButtonHeader item={<MaterialIcons name="close" size={20} color="white" />} onPress={() => { setIsChecked(false) }} />
: <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: isChecked ? '1 item terpilih' : 'Dokumen Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDocument id={path} />
headerRight: () =>
isChecked
? <ButtonHeader item={<MaterialIcons name="checklist-rtl" size={20} color="white" />} onPress={() => { }} />
: <HeaderRightDocument id={path} />
}}
/>
<ScrollView>
<ScrollView style={{ height: '100%' }}>
<View style={[Styles.p15, Styles.mb100]}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text> home </Text>
@@ -27,13 +37,16 @@ export default function DocumentDivision() {
<Text> folder 1 </Text>
</View>
<View>
<ItemFile category="folder" title="Folder Pertama" dateTime="05-02-2025 07:54" />
<ItemFile category="folder" title="Folder Pertama" dateTime="05-02-2025 07:54" onChecked={() => { setIsChecked(!isChecked) }} checked={isChecked} />
<ItemFile category="file" title="Images.jpg" dateTime="05-11-2024 07:54" />
<ItemFile category="folder-shared" title="Folder shared" dateTime="05-11-2024 07:54" />
<ItemFile category="file-shared" title="images-shared.pdf" dateTime="05-11-2024 07:54" />
</View>
</View>
</ScrollView>
{
isChecked && <MenuBottomSelectDocument />
}
</SafeAreaView>
)
}

166
components/document/menuBottomSelectDocument.tsx Normal file
View 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>
</>
)
}

37
components/itemAccordion.tsx Normal file
View File

@@ -0,0 +1,37 @@
import Styles from "@/constants/Styles";
import { View } from "react-native";
import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
type Props = {
isExpanded: any,
children: React.ReactNode,
viewKey: string,
duration: number,
}
export default function ItemAccordion({ isExpanded, children, viewKey, duration = 500, }: Props) {
const height = useSharedValue(0);
const derivedHeight = useDerivedValue(() =>
withTiming(height.value * Number(isExpanded.value), {
duration,
})
);
const bodyStyle = useAnimatedStyle(() => ({
height: derivedHeight.value,
}));
return (
<Animated.View
key={`accordionItem_${viewKey}`}
style={[Styles.animatedView, bodyStyle]}>
<View
onLayout={(e) => {
height.value = e.nativeEvent.layout.height;
}}
style={Styles.wrapperAccordion}>
{children}
</View>
</Animated.View>
)
}

33
components/itemDetailMember.tsx
View File

@@ -3,8 +3,9 @@ import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-i
import { Text, View } from "react-native";
type Props = {
category: 'nik' | 'group' | 'position' | 'phone' | 'email' | 'gender'
category: 'nik' | 'group' | 'position' | 'phone' | 'email' | 'gender' | 'dokumen' | 'type' | 'location' | 'owner' | 'calendar' | 'share'
value: string
border?: boolean
}
@@ -33,17 +34,41 @@ const data = {
label: 'Jenis Kelamin',
icon: <MaterialCommunityIcons name="gender-male-female" size={22} color="black" style={[Styles.mr10]} />
},
dokumen: {
label: 'Nama Dokumen',
icon: <MaterialCommunityIcons name="file-document-outline" size={22} color="black" style={[Styles.mr10]} />
},
type: {
label: 'Tipe',
icon: <MaterialIcons name="category" size={22} color="black" style={[Styles.mr10]} />
},
location: {
label: 'Lokasi',
icon: <MaterialIcons name="location-pin" size={22} color="black" style={[Styles.mr10]} />
},
owner: {
label: 'Pemilik',
icon: <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
},
calendar: {
label: 'Tanggal',
icon: <MaterialCommunityIcons name="calendar-blank" size={22} color="black" style={[Styles.mr10]} />
},
share: {
label: 'Bagikan',
icon: <MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
}
}
export default function ItemDetailMember({ category, value }: Props) {
export default function ItemDetailMember({ category, value, border }: Props) {
return (
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, !border && Styles.mt10, border && Styles.wrapItemBorderBottom]}>
<View style={[Styles.rowItemsCenter]}>
{data[category].icon}
<Text style={[Styles.textDefault]}>{data[category].label}</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>{value}</Text>
<Text style={[Styles.textDefault]}>{value}</Text>
</View>
)
}

8
components/menuItemRow.tsx
View File

@@ -5,14 +5,16 @@ type Props = {
onPress: () => void
icon: React.ReactNode
title: string
column?: 'many' | 'three'
color?: string
}
export default function MenuItemRow({ onPress, icon, title }: Props) {
export default function MenuItemRow({ onPress, icon, title, column, color }: Props) {
return (
<Pressable onPress={() => { onPress() }} style={[Styles.btnMenuRow]}>
<Pressable onPress={() => { onPress() }} style={[column == 'many' ? Styles.btnMenuRowMany : Styles.btnMenuRow]}>
<View style={{ alignItems: 'center' }}>
{icon}
<Text style={[Styles.mt05, {textAlign: 'center'}]}>{title}</Text>
<Text style={[Styles.mt05, { textAlign: 'center' }, color && { color: color }]}>{title}</Text>
</View>
</Pressable>
)

40
constants/Styles.ts
View File

@@ -119,6 +119,15 @@ const Styles = StyleSheet.create({
ml10: {
marginLeft: 10
},
ml15: {
marginLeft: 15
},
ml20: {
marginLeft: 20
},
ml25: {
marginLeft: 25
},
ph05: {
paddingHorizontal: 5,
},
@@ -143,6 +152,12 @@ const Styles = StyleSheet.create({
round10: {
borderRadius: 10
},
w100: {
width: '100%'
},
w50: {
width: '50%'
},
round30: {
borderRadius: 30
},
@@ -162,6 +177,9 @@ const Styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center'
},
rowOnly: {
flexDirection: 'row'
},
btnIconHeader: {
backgroundColor: '#384288',
padding: 7,
@@ -193,6 +211,10 @@ const Styles = StyleSheet.create({
width: '33%',
alignItems: 'center'
},
btnMenuRowMany: {
alignItems: 'center',
marginHorizontal: 10
},
inputRoundForm: {
borderRadius: 10,
borderColor: '#d6d8f6',
@@ -432,7 +454,23 @@ const Styles = StyleSheet.create({
},
selectRangeDate: {
backgroundColor: '#228be61f',
}
},
bottomMenuSelectDocument: {
paddingVertical: 10,
position: 'absolute',
width: '100%',
bottom: 0
},
animatedView: {
width: '100%',
overflow: 'hidden',
},
wrapperAccordion: {
width: '100%',
position: 'absolute',
display: 'flex',
alignItems: 'center',
},
})
export default Styles;