Work Item and Activity screens mostly complete

mobile/src/WorkItem/WorkItem.js

@@ -1,32 +1,113 @@
 import React from 'react'
-import { StyleSheet, View, TouchableOpacity, Image, ScrollView, Picker, Text } from 'react-native'
+import {
+  StyleSheet,
+  View,
+  Image,
+  ScrollView,
+  Text,
+  TextInput,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableOpacity
+} from 'react-native'
+import { Icon, Header, PhotoButton } from '../ui'
+import MapView, { Marker } from 'react-native-maps'
+import { FormBinder } from 'react-form-binder'
+import { BoundInput, BoundButton } from '../ui'
+import autobind from 'autobind-decorator'
+import { ifIphoneX, isIphoneX } from 'react-native-iphone-x-helper'
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: '#DDDDDD',
+  },
+  panel: {
+    width: '94%',
+    backgroundColor: 'white',
+    alignSelf: 'center',
+    marginTop: '3%',
+    shadowColor: 'gray',
+    shadowOffset: { width: 2, height: 2 },
+    shadowRadius: 2,
+    shadowOpacity: .5,
+    padding: 10,
+  },
+  label: {
+    fontSize: 14,
+    marginBottom: 4,
+  }
+})
 
 export class WorkItem extends React.Component {
-  static styles = StyleSheet.create({
-    container: {
-      height: '100%',
-      width: '100%',
-      backgroundColor: '#DDDDDD',
+  static bindings = {
+    location: {
+      isValid: true,
     },
-  })
+    details: {
+      isValid: true,
+    }
+  }
 
   constructor(props) {
     super(props)
+    this.state = {
+      binder: new FormBinder({}, WorkItem.bindings),
+      messageModal: null,
+    }
+  }
+
+  @autobind
+  handleBackPress() {
+    const { history } = this.props
+
+    if (history.length > 1) {
+      history.goBack()
+    } else {
+      history.replace('/home')
+    }
   }
 
   render() {
+    const { binder } = this.state
+
     return (
-      <ScrollView style={WorkItem.styles.container}>
-        <View style={{ width: '94%', backgroundColor: 'white', alignSelf: 'center', marginTop: '3%', shadowColor: 'gray', shadowOffset: { width: 2, height: 2 }, shadowRadius: 2, shadowOpacity: .5 }}>
-          <Text>Work Item</Text>
-          <Picker selectedValue={this.props.item.type}>
-            <Picker.Item label='Work Item' value='work' />
-            <Picker.Item label='Inspection' value='inspection' />
-            <Picker.Item label='Complaint' value='complaint' />
-          </Picker>
-        </View>
-        <View style={{ width: '94%', height: 300, backgroundColor: 'white', alignSelf: 'center', marginTop: '3%', shadowColor: 'gray', shadowOffset: { width: 2, height: 2 }, shadowRadius: 2, shadowOpacity: .5 }} />
-      </ScrollView>
-    );
+      <KeyboardAvoidingView
+        style={{ width: '100%', height: '100%' }}
+        behavior='padding'
+        keyboardVerticalOffset={Platform.select({ios: 0, android: -220})}>
+        <Header title='Work Item' leftButton={{ icon: 'back', onPress: this.handleBackPress }} rightButton={{ icon: 'done' }} />
+        <ScrollView style={styles.container}>
+          <View style={styles.panel}>
+            <MapView
+              style={{
+                width: '100%',
+                height: 400,
+                marginBottom: 10,
+              }}
+              zoomControlEnabled
+              initialRegion={{
+                latitude: 43.653908,
+                longitude: -79.384293,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+              }} />
+            <BoundInput binder={binder} name='location' label='Location:' />
+          </View>
+          <View style={styles.panel}>
+            <Text style={styles.label}>Pictures:</Text>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+              <PhotoButton />
+              <PhotoButton />
+              <PhotoButton />
+            </View>
+          </View>
+          <View style={styles.panel}>
+            <BoundInput binder={binder} name='details' label='Details:' message='You must supply details for the work item' />
+          </View>
+          { isIphoneX ? <View style={{ height: 30, width: '100%' }} /> : null }
+        </ScrollView>
+      </KeyboardAvoidingView>
+    )
   }
 }