diff --git a/mobile/src/Activity/Activity.js b/mobile/src/Activity/Activity.js
index 172698c..6b360ca 100644
--- a/mobile/src/Activity/Activity.js
+++ b/mobile/src/Activity/Activity.js
@@ -31,7 +31,7 @@ import { formatLatLng, workItemTypeEnum } from "../util"
import moment from "moment"
import "url-search-params-polyfill"
import { config } from "../config"
-import { FormStaticOptionStrip } from "../ui/FormStaticOptionStrip"
+import { FormStaticOptionStrip, FormStaticPhotoPanel } from "../ui"
const styles = StyleSheet.create({
container: {
@@ -127,6 +127,7 @@ export class Activity extends React.Component {
dateTime: moment().format(),
details: workItem.details,
workItemType: workItem.workItemType,
+ workItemPhotos: workItem.photos,
})
this.region = {
@@ -294,6 +295,7 @@ export class Activity extends React.Component {
details,
workItemType,
uploadPercent,
+ workItemPhotos,
} = this.state
return (
@@ -347,6 +349,10 @@ export class Activity extends React.Component {
value={workItemType}
/>
+
- {/* */}
+
- {/* */}
-
+
diff --git a/mobile/src/ui/BoundPhotoPanel.js b/mobile/src/ui/BoundPhotoPanel.js
index b0247c6..689a885 100644
--- a/mobile/src/ui/BoundPhotoPanel.js
+++ b/mobile/src/ui/BoundPhotoPanel.js
@@ -14,17 +14,7 @@ import ImagePicker from "react-native-image-picker"
import ImageResizer from "react-native-image-resizer"
import { reactAutoBind } from "auto-bind2"
import { api } from "../API"
-
-const getScreenPortraitDimensions = () => {
- const { width, height } = Dimensions.get("window")
-
- return {
- screenWidth: Math.min(width, height),
- screenHeight: Math.max(width, height),
- }
-}
-
-const photoSpacing = 10
+import { PhotoPanel } from "."
export class BoundPhotoPanel extends Component {
static propTypes = {
@@ -95,56 +85,15 @@ export class BoundPhotoPanel extends Component {
)
}
- handleLayout(e) {
- if (!this.state.photoSize) {
- const { layout } = e.nativeEvent
- const ratio = 3 / 4
- const width = (layout.width - photoSpacing) / 2
- const height = width / ratio
-
- this.setState({ photoSize: { width, height } })
- }
- }
-
render() {
- const { photoSize, value: assetIds } = this.state
-
- const renderPhoto = (index) => {
- const assetId = assetIds[index]
-
- return (
- this.handlePhotoPress(index)}>
- {!assetId && (
-
- )}
- {assetId && (
-
- )}
-
- )
- }
+ const { photoSize, value } = this.state
return (
+ }}>
Pictures:
- {photoSize && (
-
- {renderPhoto(0)}
- {renderPhoto(1)}
-
- )}
- {photoSize && (
-
- {renderPhoto(2)}
- {renderPhoto(3)}
-
- )}
+
)
}
diff --git a/mobile/src/ui/FormStaticPhotoPanel.js b/mobile/src/ui/FormStaticPhotoPanel.js
new file mode 100644
index 0000000..fb286c6
--- /dev/null
+++ b/mobile/src/ui/FormStaticPhotoPanel.js
@@ -0,0 +1,30 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Text, View, Platform } from "react-native"
+import { PhotoPanel } from "."
+
+export class FormStaticPhotoPanel extends React.Component {
+ static propTypes = {
+ label: PropTypes.string,
+ value: PropTypes.arrayOf(PropTypes.string),
+ }
+
+ render() {
+ const { label, value, options } = this.props
+
+ return (
+
+
+ {label}
+
+
+
+
+ )
+ }
+}
diff --git a/mobile/src/ui/PhotoPanel.js b/mobile/src/ui/PhotoPanel.js
new file mode 100644
index 0000000..9e8ce81
--- /dev/null
+++ b/mobile/src/ui/PhotoPanel.js
@@ -0,0 +1,108 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import {
+ StyleSheet,
+ Text,
+ View,
+ Image,
+ TouchableOpacity,
+ Dimensions,
+ ActivityIndicator,
+} from "react-native"
+import { Icon } from "."
+import { reactAutoBind } from "auto-bind2"
+import { api } from "../API"
+
+const photoSpacing = 10
+
+export class PhotoPanel extends Component {
+ static propTypes = {
+ onPhotoPress: PropTypes.func,
+ readOnly: PropTypes.bool,
+ value: PropTypes.arrayOf(PropTypes.string),
+ }
+
+ constructor(props) {
+ super(props)
+ reactAutoBind(this)
+ this.state = {
+ photoSize: null,
+ }
+ }
+
+ handleLayout(e) {
+ if (!this.state.photoSize) {
+ const { layout } = e.nativeEvent
+ const ratio = 3 / 4
+ const width = (layout.width - photoSpacing) / 2
+ const height = width / ratio
+
+ this.setState({ photoSize: { width, height } })
+ }
+ }
+
+ render() {
+ const { photoSize } = this.state
+ const { value: assetIds, readOnly, onPhotoPress } = this.props
+ const renderPhoto = (index) => {
+ const assetId = assetIds && assetIds[index]
+
+ return (
+ onPhotoPress(index)}>
+ {!assetId && (
+
+ )}
+ {assetId && (
+
+ )}
+
+ )
+ }
+
+ return (
+
+ {photoSize && (
+
+ {renderPhoto(0)}
+ {renderPhoto(1)}
+
+ )}
+ {photoSize && (
+
+ {renderPhoto(2)}
+ {renderPhoto(3)}
+
+ )}
+
+ )
+ }
+}
+
+const styles = StyleSheet.create({
+ photoRow: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ width: "100%",
+ paddingTop: 5,
+ paddingBottom: 5,
+ },
+})
diff --git a/mobile/src/ui/index.js b/mobile/src/ui/index.js
index 792a347..3cc5836 100644
--- a/mobile/src/ui/index.js
+++ b/mobile/src/ui/index.js
@@ -3,10 +3,12 @@ export { Header } from "./Header"
export { OptionStrip } from "./OptionStrip"
export { BubbleLoader } from "./BubbleLoader"
export { ProgressBar } from "./ProgressBar"
+export { PhotoPanel } from "./PhotoPanel"
export { Geolocation } from "./Geolocation"
export { BoundSwitch } from "./BoundSwitch"
export { BoundInput } from "./BoundInput"
export { FormStaticInput } from "./FormStaticInput"
+export { FormStaticPhotoPanel } from "./FormStaticPhotoPanel"
export { FormStaticOptionStrip } from "./FormStaticOptionStrip"
export { BoundButton } from "./BoundButton"
export { BoundOptionStrip } from "./BoundOptionStrip"