Added progress bar, progress modal and bubble loader

2018-05-11 13:51:14 -07:00
parent d087da2ce7
commit dadad6434f
11 changed files with 281 additions and 11 deletions
--- a/mobile/src/Modal/ProgressModal.js
+++ b/mobile/src/Modal/ProgressModal.js
@@ -0,0 +1,56 @@
+import React, { Component } from "react"
+import Modal from "react-native-modal"
+import PropTypes from "prop-types"
+import { View, Text, ActivityIndicator, TouchableOpacity } from "react-native"
+import { ProgressBar } from "../ui"
+import autobind from "autobind-decorator"
+
+export class ProgressModal extends Component {
+  static propTypes = {
+    open: PropTypes.bool,
+    message: PropTypes.string.isRequired,
+    percent: PropTypes.number,
+    onCancel: PropTypes.func,
+  }
+
+  render() {
+    const { open, message, percent } = this.props
+
+    return (
+      <Modal isVisible={open}>
+        <View
+          style={{
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "transparent",
+          }}>
+          <ProgressBar height={30} value={percent} />
+          <Text
+            style={{
+              marginTop: 20,
+              fontSize: 18,
+              alignSelf: "center",
+              color: "#FFFFFF",
+            }}>
+            {message}
+          </Text>
+          <TouchableOpacity
+            onPress={this.props.onCancel}
+            style={{
+              alignSelf: "center",
+              marginTop: 30,
+              marginBottom: 10,
+              justifyContent: "center",
+              paddingHorizontal: 10,
+              height: 40,
+              width: 100,
+              backgroundColor: "#3BB0FD",
+            }}>
+            <Text style={{ alignSelf: "center", color: "black" }}>Cancel</Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+    )
+  }
+}