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 SnackReducer from "../reducers/SnackReducer"; import {connect} from 'react-redux' import {showNotificaton,hideNotification} from '../actions/SnackBarAction' import {useNavigation} from '@react-navigation/native'; const SnackBar=(props)=>{ const navigation = 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 style={styles.txtTitle}>{title}</Text> <Text numberOfLines={2} style={styles.txt} >{content}</Text> </View> <View style={styles.row}> <TouchableOpacity onPress={ ()=>props.hideNotification()} style={styles.btn} > <Text style={styles.txtBtn}>Đóng</Text> </TouchableOpacity> <TouchableOpacity onPress={()=>{ props.hideNotification() navigation.navigate(screen,{id:id_record}) } } style={[styles.btn,{marginLeft:20}]}> <Text style={styles.txtBtn} >Chi tiết</Text> </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' } })