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

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 (
       <SafeAreaView>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerLeft: () =>
-               headerTitle: 'Dokumen Divisi',
+                  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>
    )
 }

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 (
+      <>
+         <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>
+      </>
+   )
+}

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 (
+      <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>
+   )
+}

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: <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>
    )
 }

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 (
-      <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>
    )

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',
@@ -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;