upd: dokumen divisi

- rename file dokumen divisi
- modal float

No Issues

components/document/menuBottomSelectDocument.tsx

@@ -6,9 +6,11 @@ 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";
 
 
 type Props = {
@@ -18,6 +20,7 @@ type Props = {
 export default function MenuBottomSelectDocument({ onDone }: Props) {
    const [isModal, setModal] = useState(false)
    const [isInformasi, setInformasi] = useState(false)
+   const [isRename, setRename] = useState(false)
    const open = useSharedValue(false)
 
    const onPress = () => {
@@ -56,7 +59,7 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
                <MenuItemRow
                   icon={<MaterialCommunityIcons name="pencil-outline" color="white" size={25} />}
                   title="Ganti Nama"
-                  onPress={() => { }}
+                  onPress={() => { setRename(true) }}
                   column="many"
                   color="white"
                />
@@ -77,6 +80,16 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
             </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

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

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