109 lines
2.5 KiB
JavaScript
109 lines
2.5 KiB
JavaScript
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 (
|
|
<TouchableOpacity
|
|
key={assetId || "blank" + index.toString()}
|
|
disabled={readOnly}
|
|
style={{
|
|
width: photoSize.width,
|
|
height: photoSize.height,
|
|
borderWidth: 2,
|
|
borderColor: "gray",
|
|
borderRadius: 4,
|
|
justifyContent: "center",
|
|
}}
|
|
onPress={() => onPhotoPress(index)}>
|
|
{!assetId && (
|
|
<Icon
|
|
name={!readOnly ? "add" : "blank"}
|
|
size={24}
|
|
style={{ alignSelf: "center" }}
|
|
/>
|
|
)}
|
|
{assetId && (
|
|
<Image
|
|
source={{ uri: api.makeImageUrl(assetId) }}
|
|
style={{ width: "100%", height: "100%" }}
|
|
resizeMode="contain"
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<View onLayout={this.handleLayout}>
|
|
{photoSize && (
|
|
<View style={styles.photoRow}>
|
|
{renderPhoto(0)}
|
|
{renderPhoto(1)}
|
|
</View>
|
|
)}
|
|
{photoSize && (
|
|
<View style={styles.photoRow}>
|
|
{renderPhoto(2)}
|
|
{renderPhoto(3)}
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
photoRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
paddingTop: 5,
|
|
paddingBottom: 5,
|
|
},
|
|
})
|