Merge pull request #17 from bipproduction/amalia/20-mar-25

Amalia/20 mar 25

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

@@ -45,7 +45,7 @@ export default function DocumentDivision() {
             </View>
          </ScrollView>
          {
-            isChecked && <MenuBottomSelectDocument />
+            isChecked && <MenuBottomSelectDocument onDone={() => { setIsChecked(false) }} />
          }
       </SafeAreaView>
    )

components/document/menuBottomSelectDocument.tsx

@@ -2,16 +2,27 @@ 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 { Pressable, ScrollView, Text, ToastAndroid, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
+import AlertKonfirmasi from "../alertKonfirmasi";
 import DrawerBottom from "../drawerBottom";
+import { InputForm } from "../inputForm";
 import ItemAccordion from "../itemAccordion";
 import ItemDetailMember from "../itemDetailMember";
 import MenuItemRow from "../menuItemRow";
+import ModalFloat from "../modalFloat";
+import ModalSelectMultiple from "../modalSelectMultiple";
 
-export default function MenuBottomSelectDocument() {
+
+type Props = {
+   onDone: () => void
+}
+
+export default function MenuBottomSelectDocument({ onDone }: Props) {
    const [isModal, setModal] = useState(false)
    const [isInformasi, setInformasi] = useState(false)
+   const [isRename, setRename] = useState(false)
+   const [isShare, setShare] = useState(false)
    const open = useSharedValue(false)
 
    const onPress = () => {
@@ -33,21 +44,31 @@ export default function MenuBottomSelectDocument() {
                <MenuItemRow
                   icon={<MaterialCommunityIcons name="trash-can-outline" color="white" size={25} />}
                   title="Hapus"
-                  onPress={() => { }}
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin menghapus data?',
+
+                        onPress: () => {
+                           onDone()
+                           ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
+                        }
+                     })
+                  }}
                   column="many"
                   color="white"
                />
                <MenuItemRow
                   icon={<MaterialCommunityIcons name="pencil-outline" color="white" size={25} />}
                   title="Ganti Nama"
-                  onPress={() => { }}
+                  onPress={() => { setRename(true) }}
                   column="many"
                   color="white"
                />
                <MenuItemRow
                   icon={<MaterialCommunityIcons name="share-variant-outline" color="white" size={25} />}
                   title="Bagikan"
-                  onPress={() => { }}
+                  onPress={() => { setShare(true) }}
                   column="many"
                   color="white"
                />
@@ -61,6 +82,16 @@ export default function MenuBottomSelectDocument() {
             </View>
          </View>
 
+         <ModalFloat title="Ganti Nama Dokumen" isVisible={isRename} setVisible={setRename}
+            onSubmit={() => {
+               onDone()
+               ToastAndroid.show('Berhasil mengganti nama dokumen', ToastAndroid.SHORT)
+            }}>
+            <View>
+               <InputForm type="default" placeholder="Nama File" required label="Nama File" />
+            </View>
+         </ModalFloat>
+
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
@@ -161,6 +192,12 @@ export default function MenuBottomSelectDocument() {
                </ItemAccordion>
             </View>
          </DrawerBottom>
+
+         <ModalSelectMultiple choose="dinas" title="Bagikan" category="share-division" open={isShare} close={setShare}
+            onSelect={() => {
+               ToastAndroid.show('Success', ToastAndroid.SHORT)
+               setShare(false)
+            }} />
       </>
    )
 }

components/modalFloat.tsx

@@ -0,0 +1,40 @@
+import Styles from '@/constants/Styles';
+import { Pressable, Text, View } from 'react-native';
+import Modal from 'react-native-modal';
+
+type Props = {
+   isVisible: boolean
+   setVisible: (value: boolean) => void
+   title?: string
+   children: React.ReactNode
+   onSubmit: () => void
+}
+
+export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit }: Props) {
+   return (
+      <Modal
+         animationIn={"fadeIn"}
+         animationOut={"fadeOut"}
+         isVisible={isVisible}
+         hideModalContentWhileAnimating={true}
+         onBackdropPress={() => { setVisible(false) }}
+      >
+         <View style={[Styles.modalFloatContent]}>
+            <View style={[Styles.titleContainerModalFloat]}>
+               <Text style={Styles.textDefaultSemiBold}>{title}</Text>
+            </View>
+            <View style={[Styles.mb10]}>
+               {children}
+            </View>
+            <View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
+               <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
+                  <Text style={[Styles.textDefault]}>Batal</Text>
+               </Pressable>
+               <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit}>
+                  <Text style={[Styles.textDefault]}>Simpan</Text>
+               </Pressable>
+            </View>
+         </View>
+      </Modal>
+   )
+}

components/modalSelectMultiple.tsx

@@ -0,0 +1,50 @@
+import Styles from "@/constants/Styles"
+import { AntDesign } from "@expo/vector-icons"
+import { useState } from "react"
+import { Pressable, Text, View } from "react-native"
+import { ButtonForm } from "./buttonForm"
+import DrawerBottom from "./drawerBottom"
+
+type Props = {
+   open: boolean
+   close: (value: boolean) => void
+   title: string
+   category: 'share-division' | 'status-task'
+   choose: string
+   onSelect: (value: { val: string, label: string }[]) => void
+}
+
+export default function ModalSelectMultiple({ open, close, title, category, choose, onSelect }: Props) {
+   const [isChoose, setChoose] = useState(choose)
+
+   return (
+      <DrawerBottom animation="slide" isVisible={open} setVisible={close} title={title} height={75}>
+         <View>
+            {
+               category == 'share-division' ?
+                  <>
+                     <Pressable style={[Styles.itemSelectModal]} onPress={() => {
+                        setChoose('dinas')
+                        close(false)
+                     }}>
+                        <Text style={[Styles.textDefaultSemiBold]}>Sosial Kemasyarakatan</Text>
+                        <AntDesign name="check" size={20} />
+                     </Pressable>
+                     <Pressable style={[Styles.itemSelectModal]}>
+                        <Text>Kaur Pemerintahan</Text>
+                     </Pressable>
+                     <Pressable style={[Styles.itemSelectModal]}>
+                        <Text>Kasi Kemasyarakatan</Text>
+                     </Pressable>
+                     <Pressable style={[Styles.itemSelectModal]}>
+                        <Text>PKK</Text>
+                     </Pressable>
+                  </>
+                  :
+                  <></>
+            }
+         </View>
+         <ButtonForm text="Simpan" onPress={() => { onSelect([{ val: 'dinas', label: 'Dinas' }]) }} />
+      </DrawerBottom>
+   )
+}

constants/Styles.ts

@@ -137,6 +137,9 @@ const Styles = StyleSheet.create({
    ph15: {
       paddingHorizontal: 15,
    },
+   pv05: {
+      paddingVertical: 5
+   },
    pv10: {
       paddingVertical: 10
    },
@@ -427,6 +430,19 @@ const Styles = StyleSheet.create({
       justifyContent: 'space-between',
       paddingVertical: 10,
    },
+   modalFloatContent: {
+      backgroundColor: 'white',
+      borderRadius: 18,
+      paddingTop: 5,
+      paddingBottom: 10,
+      paddingHorizontal: 20
+   },
+   titleContainerModalFloat: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 10,
+   },
    wrapBtnTab: {
       justifyContent: 'space-between',
       flexDirection: 'row',