50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import Styles from '@/constants/Styles';
|
|
import { useTheme } from '@/providers/ThemeProvider';
|
|
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) {
|
|
const { colors } = useTheme();
|
|
|
|
return (
|
|
<Modal
|
|
animationIn={"fadeIn"}
|
|
animationOut={"fadeOut"}
|
|
isVisible={isVisible}
|
|
hideModalContentWhileAnimating={true}
|
|
onBackdropPress={() => { setVisible(false) }}
|
|
>
|
|
<View style={[Styles.modalFloatContent, { backgroundColor: colors.card, borderColor: colors.icon }]}>
|
|
<View style={[Styles.titleContainerModalFloat, { borderBottomColor: colors.icon }]}>
|
|
<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.round05, Styles.mr10]} onPress={() => { setVisible(false) }}>
|
|
<Text style={[Styles.textDefaultSemiBold]}>Batal</Text>
|
|
</Pressable>
|
|
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round05]} onPress={onSubmit} disabled={disableSubmit}>
|
|
<Text style={[Styles.textDefaultSemiBold, disableSubmit && Styles.cGray]}>Simpan</Text>
|
|
</Pressable>
|
|
</View>
|
|
)
|
|
}
|
|
</View>
|
|
</Modal>
|
|
)
|
|
} |