diff --git a/app/(application)/division/[id]/(fitur-division)/document/index.tsx b/app/(application)/division/[id]/(fitur-division)/document/index.tsx
index ad76329..b9b9687 100644
--- a/app/(application)/division/[id]/(fitur-division)/document/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/document/index.tsx
@@ -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 (
{ router.back() }} />,
- headerTitle: 'Dokumen Divisi',
+ headerLeft: () =>
+ isChecked
+ ? } onPress={() => { setIsChecked(false) }} />
+ : { router.back() }} />,
+ headerTitle: isChecked ? '1 item terpilih' : 'Dokumen Divisi',
headerTitleAlign: 'center',
- headerRight: () =>
+ headerRight: () =>
+ isChecked
+ ? } onPress={() => { }} />
+ :
}}
/>
-
+
home
@@ -27,13 +37,16 @@ export default function DocumentDivision() {
folder 1
-
+ { setIsChecked(!isChecked) }} checked={isChecked} />
+ {
+ isChecked &&
+ }
)
}
\ No newline at end of file
diff --git a/app/(application)/home.tsx b/app/(application)/home.tsx
index d8f710e..f0dc820 100644
--- a/app/(application)/home.tsx
+++ b/app/(application)/home.tsx
@@ -19,7 +19,8 @@ export default function Home() {
title: 'Home',
headerLeft: () => <>,
headerTitle: 'Darmasaba',
- headerRight: () =>
+ headerRight: () => ,
+ headerTitleAlign: 'left',
}}
/>
diff --git a/app/verification.tsx b/app/verification.tsx
index 72d8243..66150a4 100644
--- a/app/verification.tsx
+++ b/app/verification.tsx
@@ -2,7 +2,7 @@ import { ButtonForm } from "@/components/buttonForm";
import Styles from "@/constants/Styles";
import { router } from "expo-router";
import React, { useState } from "react";
-import { Image, SafeAreaView, Text, View } from "react-native";
+import { Image, Text, View } from "react-native";
import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell, } from 'react-native-confirmation-code-field';
export default function Index() {
@@ -15,7 +15,7 @@ export default function Index() {
return (
-
+
Tidak Menerima kode verifikasi? Kirim Ulang
-
+
);
}
diff --git a/components/document/menuBottomSelectDocument.tsx b/components/document/menuBottomSelectDocument.tsx
new file mode 100644
index 0000000..dd07267
--- /dev/null
+++ b/components/document/menuBottomSelectDocument.tsx
@@ -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 (
+ <>
+
+
+ }
+ title="Unduh"
+ onPress={() => { }}
+ column="many"
+ color="white"
+ />
+ }
+ title="Hapus"
+ onPress={() => { }}
+ column="many"
+ color="white"
+ />
+ }
+ title="Ganti Nama"
+ onPress={() => { }}
+ column="many"
+ color="white"
+ />
+ }
+ title="Bagikan"
+ onPress={() => { }}
+ column="many"
+ color="white"
+ />
+ }
+ title="Lainnya"
+ onPress={() => { setModal(true) }}
+ column="many"
+ color="white"
+ />
+
+
+
+
+
+ }
+ title="Pindah"
+ onPress={() => { }}
+ />
+ }
+ title="Salin"
+ onPress={() => { }}
+ />
+ }
+ title="Informasi"
+ onPress={() => { setModal(false); setInformasi(true) }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Telah dibagikan ke divisi
+
+
+
+
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+ Keamanan Masyarakat
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/itemAccordion.tsx b/components/itemAccordion.tsx
new file mode 100644
index 0000000..7d2662f
--- /dev/null
+++ b/components/itemAccordion.tsx
@@ -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 (
+
+ {
+ height.value = e.nativeEvent.layout.height;
+ }}
+ style={Styles.wrapperAccordion}>
+ {children}
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/itemDetailMember.tsx b/components/itemDetailMember.tsx
index cb1fece..2069fc7 100644
--- a/components/itemDetailMember.tsx
+++ b/components/itemDetailMember.tsx
@@ -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:
},
+ dokumen: {
+ label: 'Nama Dokumen',
+ icon:
+ },
+ type: {
+ label: 'Tipe',
+ icon:
+ },
+ location: {
+ label: 'Lokasi',
+ icon:
+ },
+ owner: {
+ label: 'Pemilik',
+ icon:
+ },
+ calendar: {
+ label: 'Tanggal',
+ icon:
+ },
+ share: {
+ label: 'Bagikan',
+ icon:
+ }
}
-export default function ItemDetailMember({ category, value }: Props) {
+export default function ItemDetailMember({ category, value, border }: Props) {
return (
-
+
{data[category].icon}
{data[category].label}
- {value}
+ {value}
)
}
\ No newline at end of file
diff --git a/components/menuItemRow.tsx b/components/menuItemRow.tsx
index ade8110..2d9ee6a 100644
--- a/components/menuItemRow.tsx
+++ b/components/menuItemRow.tsx
@@ -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 (
- { onPress() }} style={[Styles.btnMenuRow]}>
+ { onPress() }} style={[column == 'many' ? Styles.btnMenuRowMany : Styles.btnMenuRow]}>
{icon}
- {title}
+ {title}
)
diff --git a/constants/Styles.ts b/constants/Styles.ts
index 9f219f4..e9cb9b4 100644
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -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',
@@ -430,9 +452,25 @@ const Styles = StyleSheet.create({
backgroundColor: '#238be6',
borderRadius: 5
},
- selectRangeDate:{
+ 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;
\ No newline at end of file