SnackBar.js 2.98 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
  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}}>
Giang Tran committed
41 42 43 44
          <Text numberOfLines={1} style={styles.txtTitle}>
            {title}
          </Text>
          <Text numberOfLines={3} style={styles.txt}>
Giang Tran committed
45 46
            {content}
          </Text>
Giang Tran committed
47
        </View>
Giang Tran committed
48 49 50 51
        <View style={styles.row}>
          <TouchableOpacity
            onPress={() => props.hideNotification()}
            style={styles.btn}>
Giang Tran committed
52
            <AppText i18nKey={'Close'} style={styles.txtBtn} />
Giang Tran committed
53 54 55 56 57 58 59
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              props.hideNotification();
              navigate.navigate(screen, {id: id_record});
            }}
            style={[styles.btn, {marginLeft: 20}]}>
Giang Tran committed
60
            <AppText i18nKey={'Detail'} style={styles.txtBtn} />
Giang Tran committed
61
          </TouchableOpacity>
Giang Tran committed
62
        </View>
Giang Tran committed
63 64 65
      </View>
      <TouchableWithoutFeedback onPress={() => props.hideNotification()}>
        <View style={{flex: 1}}></View>
Giang Tran committed
66 67
      </TouchableWithoutFeedback>
    </Modal>
Giang Tran committed
68 69
  );
};
Giang Tran committed
70

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

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

Giang Tran committed
81 82 83 84 85 86 87 88 89
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
90 91 92 93 94 95 96 97 98
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 3,
  },
Giang Tran committed
99 100 101
  row: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
Giang Tran committed
102
  },
Giang Tran committed
103 104
  txt: {
    color: R.colors.black,
Giang Tran committed
105
  },
Giang Tran committed
106 107 108 109
  txtBtn: {
    fontSize: getFontXD(42),
    color: R.colors.txtMain,
    fontWeight: 'bold',
Giang Tran committed
110
  },
Giang Tran committed
111 112
  txtTitle: {
    fontSize: getFontXD(42),
Giang Tran committed
113
    color: R.colors.black,
Giang Tran committed
114 115 116
    fontWeight: 'bold',
  },
});