89 lines
1.8 KiB
TypeScript
89 lines
1.8 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { Snackbar, Portal, Checkbox } from "react-native-paper";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
import CheckBox from "@/assets/icons/check_circle.svg";
|
|
import CrossIcon from "@/assets/icons/cancel.svg";
|
|
|
|
interface CustomSnackbarProps {
|
|
message: string;
|
|
bgColor: string;
|
|
textColor: string;
|
|
borderColor: string;
|
|
icon: React.ReactNode;
|
|
duration: number;
|
|
visible: boolean;
|
|
onDismiss: () => void;
|
|
}
|
|
|
|
const CustomSnackbar: React.FC<CustomSnackbarProps> = ({
|
|
message,
|
|
bgColor,
|
|
textColor,
|
|
borderColor,
|
|
icon,
|
|
duration,
|
|
visible,
|
|
onDismiss,
|
|
}) => {
|
|
useEffect(() => {
|
|
if (visible) {
|
|
const timer = setTimeout(() => {
|
|
onDismiss();
|
|
}, duration * 1000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [visible, duration, onDismiss]);
|
|
|
|
return (
|
|
<Snackbar
|
|
visible={visible}
|
|
onDismiss={onDismiss}
|
|
style={[
|
|
styles.snackbar,
|
|
{
|
|
backgroundColor: bgColor,
|
|
borderColor,
|
|
zIndex: 999,
|
|
elevation: 999,
|
|
},
|
|
]}
|
|
duration={Snackbar.DURATION_SHORT}
|
|
>
|
|
<View style={styles.content}>
|
|
{icon}
|
|
<Text style={[styles.message, { color: textColor }]}>{message}</Text>
|
|
</View>
|
|
</Snackbar>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
content: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
paddingHorizontal: 8,
|
|
},
|
|
message: {
|
|
fontStyle: "normal",
|
|
fontWeight: "bold",
|
|
},
|
|
success: {
|
|
color: "#242C3B",
|
|
},
|
|
error: {
|
|
color: "#D51D10",
|
|
},
|
|
snackbar: {
|
|
borderRadius: 5,
|
|
marginBottom: 60,
|
|
color: "#242C3B",
|
|
borderWidth: 1,
|
|
borderColor: "#B6ECDD",
|
|
backgroundColor: "green",
|
|
},
|
|
});
|
|
|
|
export default CustomSnackbar;
|