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

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