Start adding API selection modal and supporting code

2018-04-08 20:53:01 -07:00
parent 7891bb71c9
commit d674f5e7eb
6 changed files with 171 additions and 41 deletions
--- a/mobile/src/Modal/ApiModal.js
+++ b/mobile/src/Modal/ApiModal.js
@@ -0,0 +1,77 @@
+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, OptionStrip } from "../ui"
+import autobind from "autobind-decorator"
+
+export class ApiModal extends Component {
+  static propTypes = {
+    open: PropTypes.bool,
+    onDismiss: PropTypes.func,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: null,
+    }
+  }
+
+  @autobind
+  handleButtonPress() {
+    const { onDismiss } = this.props
+
+    if (onDismiss) {
+      onDismiss()
+    }
+  }
+
+  @autobind
+  handleValueChanged(newValue) {
+    this.setState({ value: newValue })
+  }
+
+  render() {
+    const { open, icon, message, detail } = this.props
+    const { value } = this.state
+
+    return (
+      <Modal isVisible={open}>
+        <View
+          style={{
+            flexDirection: "column",
+            justifyContent: "center",
+            width: "100%",
+            backgroundColor: "#FFFFFF",
+            padding: 10,
+          }}>
+          <OptionStrip
+            options={[
+              { value: "normal", text: "Normal" },
+              { value: "test", text: "Test" },
+              { value: "local", text: "Local" },
+            ]}
+            value={value}
+            onValueChanged={this.handleValueChanged}
+          />
+          <TouchableOpacity
+            onPress={this.handleButtonPress}
+            style={{
+              alignSelf: "center",
+              backgroundColor: "blue",
+              marginTop: 30,
+              marginBottom: 10,
+              justifyContent: "center",
+              paddingHorizontal: 10,
+              height: 40,
+              width: 100,
+              backgroundColor: "#3BB0FD",
+            }}>
+            <Text style={{ alignSelf: "center", color: "black" }}>OK</Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+    )
+  }
+}