-
Notifications
You must be signed in to change notification settings - Fork 0
/
LoadingModal.js
108 lines (102 loc) · 2.4 KB
/
LoadingModal.js
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
import React, { Component } from "react";
import { Modal, View, ActivityIndicator, Text, StyleSheet } from "react-native";
import ModalViewsBG from "./ModalViewsBG";
class LoadingModal extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
text: "",
subText: "",
cancelable: true,
spinnerColor: "#098",
spinnerSize: "large",
textColor: "#000",
subTextColor: "#000"
};
}
showModal() {
this.setState({ showModal: true });
}
hideModal() {
this.setState({ showModal: false });
}
setNewState(newState) {
this.setState(newState);
}
setToOldState() {
this.setState({
showModal: false,
text: "",
subText: "",
cancelable: true,
spinnerColor: "#098",
spinnerSize: "large",
textColor: "#000",
subTextColor: "#000"
});
}
render() {
const { visible, text } = this.props;
return (
<Modal
animationType="fade"
transparent={true}
visible={this.state.showModal}
onRequestClose={() => {}}
>
<ModalViewsBG
closeModal={() => {
if (this.state.cancelable) {
this.setState({ showModal: false });
}
}}
>
<View style={styles.loadingView}>
<ActivityIndicator
size={this.state.spinnerSize}
color={this.state.spinnerColor}
/>
<View>
<Text
numberOfLines={1}
style={[styles.loadingText, { color: this.state.textColor }]}
>
{this.state.text ? this.state.text : "Loading..."}
</Text>
<Text
style={[
styles.loadingSubText,
{ color: this.state.subTextColor }
]}
numberOfLines={1}
>
{this.state.subText}
</Text>
</View>
</View>
</ModalViewsBG>
</Modal>
);
}
}
const styles = StyleSheet.create({
loadingView: {
padding: 30,
backgroundColor: "#FFF",
flexDirection: "row",
alignItems: "center"
},
loadingText: {
fontWeight: "bold",
fontSize: 18,
marginLeft: 10,
marginRight: 10
},
loadingSubText: {
fontSize: 15,
marginLeft: 10,
marginRight: 10
}
});
export default LoadingModal;