1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React, {useState, useEffect} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
StatusBar,
TouchableWithoutFeedback,
} from 'react-native';
import R from '../assets/R';
import Block from './Block';
import {getFontXD, HEIGHTXD} from '../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import Modal from 'react-native-modal';
import {connect} from 'react-redux';
import {showNotificaton, hideNotification} from '../actions/SnackBarAction';
import {useNavigation} from '@react-navigation/native';
import AppText from '../components/AppText';
const SnackBar = (props) => {
const navigate = useNavigation();
const {isOpen, title, content, screen, id_record} = props.snackReducer;
useEffect(() => {
if (isOpen)
setTimeout(() => {
props.hideNotification();
}, 10000);
}, [props.snackReducer]);
return (
<Modal
style={{padding: 0, margin: 0}}
animationInTiming={1500}
animationOutTiming={800}
backdropOpacity={0}
animationIn={'slideInDown'}
animationOut={'slideOutUp'}
isVisible={isOpen}>
<View style={styles.container}>
<View style={{flex: 1}}>
<Text numberOfLines={1} style={styles.txtTitle}>
{title}
</Text>
<Text numberOfLines={3} style={styles.txt}>
{content}
</Text>
</View>
<View style={styles.row}>
<TouchableOpacity
onPress={() => props.hideNotification()}
style={styles.btn}>
<AppText i18nKey={'Close'} style={styles.txtBtn} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.hideNotification();
navigate.navigate(screen, {id: id_record});
}}
style={[styles.btn, {marginLeft: 20}]}>
<AppText i18nKey={'Detail'} style={styles.txtBtn} />
</TouchableOpacity>
</View>
</View>
<TouchableWithoutFeedback onPress={() => props.hideNotification()}>
<View style={{flex: 1}}></View>
</TouchableWithoutFeedback>
</Modal>
);
};
const mapStateToProps = (state) => {
return {
snackReducer: state.SnackReducer,
};
};
export default connect(mapStateToProps, {showNotificaton, hideNotification})(
SnackBar,
);
const styles = StyleSheet.create({
container: {
marginTop: 10,
height: HEIGHTXD(380),
backgroundColor: R.colors.white,
marginHorizontal: 10,
borderRadius: 10,
paddingVertical: 10,
paddingHorizontal: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 3,
},
row: {
flexDirection: 'row',
justifyContent: 'flex-end',
},
txt: {
color: R.colors.black,
},
txtBtn: {
fontSize: getFontXD(42),
color: R.colors.txtMain,
fontWeight: 'bold',
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: 'bold',
},
});