57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
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>
|
|
)
|
|
}
|
|
}
|