SnackBar.js 2.94 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9 10 11 12 13
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';
Giang Tran committed
14
import Modal from 'react-native-modal';
Giang Tran committed
15 16
import {connect} from 'react-redux';
import {showNotificaton, hideNotification} from '../actions/SnackBarAction';
Giang Tran committed
17
import {useNavigation} from '@react-navigation/native';
Giang Tran committed
18
import AppText from '../components/AppText';
Giang Tran committed
19 20 21
const SnackBar = (props) => {
  const navigate = useNavigation();
  const {isOpen, title, content, screen, id_record} = props.snackReducer;
Giang Tran committed
22

Giang Tran committed
23 24 25 26 27 28
  useEffect(() => {
    if (isOpen)
      setTimeout(() => {
        props.hideNotification();
      }, 10000);
  }, [props.snackReducer]);
Giang Tran committed
29

Giang Tran committed
30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
  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>
Giang Tran committed
45
        </View>
Giang Tran committed
46 47 48 49
        <View style={styles.row}>
          <TouchableOpacity
            onPress={() => props.hideNotification()}
            style={styles.btn}>
Giang Tran committed
50
            <AppText i18nKey={'Close'} style={styles.txtBtn} />
Giang Tran committed
51 52 53 54 55 56 57
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              props.hideNotification();
              navigate.navigate(screen, {id: id_record});
            }}
            style={[styles.btn, {marginLeft: 20}]}>
Giang Tran committed
58
            <AppText i18nKey={'Detail'} style={styles.txtBtn} />
Giang Tran committed
59
          </TouchableOpacity>
Giang Tran committed
60
        </View>
Giang Tran committed
61 62 63
      </View>
      <TouchableWithoutFeedback onPress={() => props.hideNotification()}>
        <View style={{flex: 1}}></View>
Giang Tran committed
64 65
      </TouchableWithoutFeedback>
    </Modal>
Giang Tran committed
66 67
  );
};
Giang Tran committed
68

Giang Tran committed
69
const mapStateToProps = (state) => {
Giang Tran committed
70 71 72 73 74
  return {
    snackReducer: state.SnackReducer,
  };
};

Giang Tran committed
75 76 77
export default connect(mapStateToProps, {showNotificaton, hideNotification})(
  SnackBar,
);
Giang Tran committed
78

Giang Tran committed
79 80 81 82 83 84 85 86 87
const styles = StyleSheet.create({
  container: {
    marginTop: 10,
    height: HEIGHTXD(380),
    backgroundColor: R.colors.white,
    marginHorizontal: 10,
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 10,
Giang Tran committed
88 89 90 91 92 93 94 95 96
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 3,
  },
Giang Tran committed
97 98 99
  row: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
Giang Tran committed
100
  },
Giang Tran committed
101 102
  txt: {
    color: R.colors.black,
Giang Tran committed
103
  },
Giang Tran committed
104 105 106 107
  txtBtn: {
    fontSize: getFontXD(42),
    color: R.colors.txtMain,
    fontWeight: 'bold',
Giang Tran committed
108
  },
Giang Tran committed
109 110
  txtTitle: {
    fontSize: getFontXD(42),
Giang Tran committed
111
    color: R.colors.black,
Giang Tran committed
112 113 114
    fontWeight: 'bold',
  },
});