john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Start adding API selection modal and supporting code

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-08 20:53:01 -07:00
parent 7891bb71c9
commit d674f5e7eb
6 changed files with 171 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
mobile/src/Modal/MessageModal.js
View File

@@ -1,9 +1,9 @@
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 autobind from 'autobind-decorator'
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 autobind from "autobind-decorator"
export class MessageModal extends Component {
static propTypes = {
@@ -11,7 +11,7 @@ export class MessageModal extends Component {
icon: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
detail: PropTypes.string,
onDismiss: PropTypes.func
onDismiss: PropTypes.func,
}
@autobind
@@ -23,40 +23,48 @@ export class MessageModal extends Component {
}
}
constructor(props) {
super(props)
this.state = {
}
}
render() {
const { open, icon, message, detail } = this.props
return (
<Modal isVisible={open}>
<View style={{ flexDirection: 'row', width: '100%', padding: 5, backgroundColor: '#FFFFFF' }}>
<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}}>
<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}
<TouchableOpacity
onPress={this.handleButtonPress}
style={{
alignSelf: 'flex-end',
backgroundColor: 'blue',
alignSelf: "flex-end",
backgroundColor: "blue",
marginTop: 20,
marginBottom: 10,
justifyContent: 'center',
justifyContent: "center",
paddingHorizontal: 10,
height: 40,
width: 100,
backgroundColor: '#3BB0FD'
backgroundColor: "#3BB0FD",
}}>
<Text style={{ alignSelf: 'center', color: 'black' }}>OK</Text>
<Text style={{ alignSelf: "center", color: "black" }}>OK</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
)
}
}
}