You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.3 KiB
41 lines
1.3 KiB
import type { ReactNode } from 'react';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
|
|
interface Props {
|
|
visible: boolean;
|
|
onClose?: () => void;
|
|
title?: string;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
}
|
|
|
|
/** 浅色底圆角卡片弹窗 + 半透明遮罩 */
|
|
export function Modal({ visible, onClose, title, children, footer }: Props) {
|
|
if (!visible) return null;
|
|
return (
|
|
<View style={styles.overlay}>
|
|
<Pressable style={styles.scrim} onPress={onClose} />
|
|
<View style={styles.card}>
|
|
{title ? <Text style={styles.title}>{title}</Text> : null}
|
|
<View style={styles.body}>{children}</View>
|
|
{footer ? <View style={styles.footer}>{footer}</View> : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: { ...StyleSheet.absoluteFill, justifyContent: 'center', alignItems: 'center', zIndex: 100 },
|
|
scrim: { ...StyleSheet.absoluteFill, backgroundColor: colors.scrim },
|
|
card: {
|
|
width: '84%',
|
|
backgroundColor: colors.white,
|
|
borderRadius: 20,
|
|
padding: 22,
|
|
maxHeight: '80%',
|
|
},
|
|
title: { fontSize: 18, fontWeight: '800', color: colors.textPrimary, marginBottom: 12, textAlign: 'center' },
|
|
body: { gap: 10 },
|
|
footer: { marginTop: 18, gap: 10 },
|
|
});
|
|
|