mobile-darmasaba/components/modalFloat.tsx

import Styles from '@/constants/Styles';
import { Pressable, View } from 'react-native';
import Modal from 'react-native-modal';
import Text from './Text';

type Props = {
   isVisible: boolean
   setVisible: (value: boolean) => void
   title?: string
   children: React.ReactNode
   onSubmit?: () => void
   disableSubmit?: boolean
   buttonHide?: boolean
}

export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit, buttonHide }: 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>
            {
               !buttonHide && (
                  <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} disabled={disableSubmit}>
                        <Text style={[Styles.textDefault, disableSubmit && Styles.cGray]}>Simpan</Text>
                     </Pressable>
                  </View>
               )
            }
         </View>
      </Modal>
   )
}