165 lines
3.8 KiB
JavaScript
165 lines
3.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
Text,
|
|
Image,
|
|
View
|
|
} from 'react-native';
|
|
|
|
import AuctionPriceAndBidCount from '../../containers/Auction/AuctionPriceAndBidCount.js';
|
|
import BidStatus from '../../containers/Auction/BidStatus.js';
|
|
|
|
import { ITEM_TYPES } from '../../constants/constants.js';
|
|
import { formatPrice, getAuctionTime } from '../../library/helpers.js';
|
|
|
|
export default class ItemRow extends Component {
|
|
static get propTypes() {
|
|
return {
|
|
description: PropTypes.string,
|
|
donor: PropTypes.string,
|
|
end: PropTypes.string.isRequired,
|
|
id: PropTypes.string.isRequired,
|
|
images: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
url: PropTypes.string,
|
|
}),
|
|
),
|
|
start: PropTytpes.string.isRequired,
|
|
startPrice: PropTypes.number,
|
|
subtitle: PropTypes.string,
|
|
title: PropTypes.string.isRequired,
|
|
type: PropTypes.string.isRequired,
|
|
};
|
|
}
|
|
|
|
_getBidTime = () => {
|
|
const { end, start } = this.props;
|
|
return getAuctionTime({ end, start });
|
|
}
|
|
|
|
_viewItemDetail = () => {
|
|
const { id } = this.props.details;
|
|
this.props.navigation.navigate('Item', { id });
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
description,
|
|
donor,
|
|
end,
|
|
images,
|
|
start,
|
|
startPrice,
|
|
subtitle,
|
|
title,
|
|
type,
|
|
} = this.props;
|
|
|
|
return(
|
|
<TouchableOpacity onPress={this._viewItemDetail}>
|
|
<View style={styles.rowContainer}>
|
|
<Image
|
|
source={{uri: images[0].url}}
|
|
style={styles.image}
|
|
resizeMode="contain"
|
|
/>
|
|
<View style={styles.rowText}>
|
|
{type === ITEM_TYPES.AUCTION && <BidStatus id={item.id} />}
|
|
<Text style={styles.title} numberOfLines={2} ellipsizeMode={'tail'}>
|
|
{title}
|
|
</Text>
|
|
<Text style={styles.subtitle} numberOfLines={1} ellipsizeMode={'tail'}>
|
|
{subtitle}
|
|
</Text>
|
|
{donor && (
|
|
<Text style={styles.donor} numberOfLines={1} ellipsizeMode={'tail'}>
|
|
{donor}
|
|
</Text>
|
|
)}
|
|
{type === ITEM_TYPES.AUCTION ? (
|
|
<AuctionPriceAndBidCount id={item.id} />
|
|
) : (
|
|
<Text style={styles.price} numberOfLines={1} ellipsizeMode={'tail'}>
|
|
{formatPrice(startPrice)}
|
|
</Text>
|
|
)}
|
|
<Text style={styles.timeline} numberOfLines={1}>
|
|
{this._getBidTime()}
|
|
</Text>
|
|
<Text style={styles.description} numberOfLines={3} ellipsizeMode={'tail'}>
|
|
{description}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
description: {
|
|
color: '#777',
|
|
fontSize: 14,
|
|
marginTop: 5,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
},
|
|
donor: {
|
|
color: '#777',
|
|
fontSize: 14,
|
|
marginTop: 5,
|
|
paddingLeft: 10,
|
|
},
|
|
image: {
|
|
flex: 1,
|
|
height: undefined,
|
|
width: undefined,
|
|
},
|
|
price: {
|
|
color: '#777',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
paddingLeft: 10,
|
|
paddingTop: 5,
|
|
},
|
|
rowContainer: {
|
|
backgroundColor: '#FFF',
|
|
borderRadius: 4,
|
|
flexDirection: 'row',
|
|
height: 100,
|
|
marginRight: 10,
|
|
marginLeft: 10,
|
|
marginTop: 10,
|
|
padding: 10,
|
|
shadowColor: '#CCC',
|
|
shadowOffset:{ width: 1, height: 1, },
|
|
shadowOpacity: 1.0,
|
|
shadowRadius: 1,
|
|
},
|
|
rowText: {
|
|
flex: 4,
|
|
flexDirection: 'column',
|
|
},
|
|
subtitle: {
|
|
color: '#777',
|
|
fontSize: 14,
|
|
marginTop: 5,
|
|
paddingLeft: 10,
|
|
},
|
|
timeline: {
|
|
color: '#777',
|
|
fontSize: 14,
|
|
marginTop: 5,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
},
|
|
title: {
|
|
color: '#777',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
paddingLeft: 10,
|
|
paddingTop: 5,
|
|
},
|
|
});
|