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

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

Giang Tran committed
31 32 33 34 35 36 37 38 39 40 41
  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
42 43 44 45
          <Text numberOfLines={1} style={styles.txtTitle}>
            {title}
          </Text>
          <Text numberOfLines={3} style={styles.txt}>
Giang Tran committed
46 47
            {content}
          </Text>
Giang Tran committed
48
        </View>
Giang Tran committed
49 50 51 52
        <View style={styles.row}>
          <TouchableOpacity
            onPress={() => props.hideNotification()}
            style={styles.btn}>
Giang Tran committed
53
            <AppText i18nKey={'Close'} style={styles.txtBtn} />
Giang Tran committed
54 55 56
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
Giang Tran committed
57 58 59 60 61 62
              if (link != null) {
                Linking.openURL(link);
              } else {
                props.hideNotification();
                navigate.navigate(screen, {id: id_record});
              }
Giang Tran committed
63 64
            }}
            style={[styles.btn, {marginLeft: 20}]}>
Giang Tran committed
65
            <AppText i18nKey={'Detail'} style={styles.txtBtn} />
Giang Tran committed
66
          </TouchableOpacity>
Giang Tran committed
67
        </View>
Giang Tran committed
68 69 70
      </View>
      <TouchableWithoutFeedback onPress={() => props.hideNotification()}>
        <View style={{flex: 1}}></View>
Giang Tran committed
71 72
      </TouchableWithoutFeedback>
    </Modal>
Giang Tran committed
73 74
  );
};
Giang Tran committed
75

Giang Tran committed
76
const mapStateToProps = (state) => {
Giang Tran committed
77 78 79 80 81
  return {
    snackReducer: state.SnackReducer,
  };
};

Giang Tran committed
82 83 84
export default connect(mapStateToProps, {showNotificaton, hideNotification})(
  SnackBar,
);
Giang Tran committed
85

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