73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import React, { Component } from "react"
|
|
import Modal from "react-native-modal"
|
|
import PropTypes from "prop-types"
|
|
import { View, Text, TouchableOpacity } from "react-native"
|
|
import { Icon } from "../ui"
|
|
import { reactAutoBind } from "auto-bind2"
|
|
|
|
export class MessageModal extends Component {
|
|
static propTypes = {
|
|
open: PropTypes.bool,
|
|
icon: PropTypes.string.isRequired,
|
|
message: PropTypes.string.isRequired,
|
|
detail: PropTypes.string,
|
|
onDismiss: PropTypes.func,
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
reactAutoBind(this)
|
|
}
|
|
|
|
handleButtonPress() {
|
|
if (this.props.onDismiss) {
|
|
this.props.onDismiss()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { open, icon, message, detail } = this.props
|
|
|
|
return (
|
|
<Modal isVisible={open}>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
width: "100%",
|
|
padding: 5,
|
|
backgroundColor: "#FFFFFF",
|
|
}}>
|
|
<Icon name={icon} size={100} margin={3} />
|
|
<View
|
|
style={{
|
|
flexGrow: 1,
|
|
flexBasis: 0,
|
|
flexDirection: "column",
|
|
flexWrap: "wrap",
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
}}>
|
|
<Text style={{ marginTop: 5, fontSize: 18 }}>{message}</Text>
|
|
<Text style={{ marginTop: 20 }}>{detail}</Text>
|
|
<TouchableOpacity
|
|
onPress={this.handleButtonPress}
|
|
style={{
|
|
alignSelf: "flex-end",
|
|
backgroundColor: "blue",
|
|
marginTop: 20,
|
|
marginBottom: 10,
|
|
justifyContent: "center",
|
|
paddingHorizontal: 10,
|
|
height: 40,
|
|
width: 100,
|
|
backgroundColor: "#3BB0FD",
|
|
}}>
|
|
<Text style={{ alignSelf: "center", color: "black" }}>OK</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|