- Linting... Prettier...
This commit is contained in:
@@ -1,13 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
Text,
|
||||
Image,
|
||||
View
|
||||
} from 'react-native';
|
||||
import { StyleSheet, TouchableOpacity, Text, Image, View } from 'react-native';
|
||||
|
||||
import GallerySwiper from 'react-native-gallery-swiper';
|
||||
|
||||
@@ -18,173 +12,173 @@ import { ITEM_TYPES } from '../../constants/constants.js';
|
||||
import { formatPrice, getAuctionTime } from '../../library/helpers.js';
|
||||
|
||||
export default class AuctionListItem 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: PropTypes.string.isRequired,
|
||||
startingPrice: PropTypes.number.isRequired,
|
||||
subtitle: PropTypes.string,
|
||||
title: PropTypes.string.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
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: PropTypes.string.isRequired,
|
||||
startingPrice: PropTypes.number.isRequired,
|
||||
subtitle: PropTypes.string,
|
||||
title: PropTypes.string.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
static get defaultProps() {
|
||||
return {
|
||||
description: null,
|
||||
donor: null,
|
||||
images: null,
|
||||
subtitle: null,
|
||||
};
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
_getBidTime = () => {
|
||||
const { end, start } = this.props;
|
||||
return getAuctionTime({ end, start });
|
||||
};
|
||||
}
|
||||
|
||||
static get defaultProps() {
|
||||
return {
|
||||
description: null,
|
||||
donor: null,
|
||||
images: null,
|
||||
subtitle: null,
|
||||
_viewItemDetail = () => {
|
||||
const { _id: id } = this.props.details;
|
||||
this.props.navigation.navigate('Item', { id });
|
||||
};
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
description,
|
||||
donor,
|
||||
end,
|
||||
id,
|
||||
images,
|
||||
start,
|
||||
startingPrice,
|
||||
subtitle,
|
||||
title,
|
||||
type,
|
||||
} = this.props;
|
||||
|
||||
_getBidTime = () => {
|
||||
const { end, start } = this.props;
|
||||
return getAuctionTime({ end, start });
|
||||
}
|
||||
|
||||
_viewItemDetail = () => {
|
||||
const { _id: id } = this.props.details;
|
||||
this.props.navigation.navigate('Item', { id });
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
description,
|
||||
donor,
|
||||
end,
|
||||
id,
|
||||
images,
|
||||
start,
|
||||
startingPrice,
|
||||
subtitle,
|
||||
title,
|
||||
type,
|
||||
} = this.props;
|
||||
|
||||
return(
|
||||
<TouchableOpacity onPress={this._viewItemDetail}>
|
||||
<View style={styles.rowContainer}>
|
||||
{images !== null && images.length > 0 && (
|
||||
<GallerySwiper
|
||||
enableScale={false}
|
||||
images={images}
|
||||
initialNumToRender={2}
|
||||
resizeMode="cover"
|
||||
sensitiveScroll={false}
|
||||
style={{height: 280}}
|
||||
/>
|
||||
)}
|
||||
<View style={styles.rowText}>
|
||||
{type === ITEM_TYPES.AUCTION && <BidStatus itemId={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 itemId={id} />
|
||||
) : (
|
||||
<Text style={styles.price} numberOfLines={1} ellipsizeMode={'tail'}>
|
||||
{formatPrice(startingPrice)}
|
||||
</Text>
|
||||
)}
|
||||
<Text style={styles.timeline} numberOfLines={1}>
|
||||
{this._getBidTime()}
|
||||
</Text>
|
||||
<Text style={styles.description} numberOfLines={3} ellipsizeMode={'tail'}>
|
||||
{description}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity onPress={this._viewItemDetail}>
|
||||
<View style={styles.rowContainer}>
|
||||
{images !== null && images.length > 0 && (
|
||||
<GallerySwiper
|
||||
enableScale={false}
|
||||
images={images}
|
||||
initialNumToRender={2}
|
||||
resizeMode="cover"
|
||||
sensitiveScroll={false}
|
||||
style={{ height: 280 }}
|
||||
/>
|
||||
)}
|
||||
<View style={styles.rowText}>
|
||||
{type === ITEM_TYPES.AUCTION && <BidStatus itemId={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 itemId={id} />
|
||||
) : (
|
||||
<Text style={styles.price} numberOfLines={1} ellipsizeMode={'tail'}>
|
||||
{formatPrice(startingPrice)}
|
||||
</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,
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
marginRight: 10,
|
||||
marginLeft: 10,
|
||||
marginTop: 10,
|
||||
padding: 10,
|
||||
shadowColor: '#CCC',
|
||||
shadowOffset: {
|
||||
width: 1,
|
||||
height: 1
|
||||
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,
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
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,
|
||||
},
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -3,29 +3,26 @@ import PropTypes from 'prop-types';
|
||||
|
||||
import { formatPrice } from '../../library/helpers.js';
|
||||
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
} from 'react-native';
|
||||
import { StyleSheet, Text } from 'react-native';
|
||||
|
||||
const AuctionPriceAndBidCount = ({ bidCount, currentPrice }) => {
|
||||
return (
|
||||
<Text style={styles.currentPriceAndBidCount} numberOfLines={1}>
|
||||
{`${formatPrice(currentPrice)} (${bidCount} bids)`}
|
||||
</Text>
|
||||
);
|
||||
return (
|
||||
<Text style={styles.currentPriceAndBidCount} numberOfLines={1}>
|
||||
{`${formatPrice(currentPrice)} (${bidCount} bids)`}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
AuctionPriceAndBidCount.propTypes = {
|
||||
itemId: PropTypes.string.isRequired,
|
||||
bidCount: PropTypes.number.isRequired,
|
||||
currentPrice: PropTypes.number.isRequired,
|
||||
itemId: PropTypes.string.isRequired,
|
||||
bidCount: PropTypes.number.isRequired,
|
||||
currentPrice: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
currentPriceAndBidCount: {
|
||||
color: '#000',
|
||||
},
|
||||
currentPriceAndBidCount: {
|
||||
color: '#000',
|
||||
},
|
||||
});
|
||||
|
||||
export default AuctionPriceAndBidCount;
|
||||
|
||||
@@ -1,44 +1,41 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
} from 'react-native';
|
||||
import { StyleSheet, Text } from 'react-native';
|
||||
|
||||
const BidStatus = ({ isBidding, isWinning }) => {
|
||||
if (!isBidding) {
|
||||
return null;
|
||||
}
|
||||
if (!isBidding) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const statusBarStyle = isWinning
|
||||
? [ styles.bidStatus, styes.isWinning ]
|
||||
: [ styles.bidStatus, styles.isOutbid ];
|
||||
const statusBarStyle = isWinning
|
||||
? [styles.bidStatus, styes.isWinning]
|
||||
: [styles.bidStatus, styles.isOutbid];
|
||||
|
||||
return (
|
||||
<Text style={statusBarStyle} numberOfLines={1}>
|
||||
{isWinning && `Oh no! You have been outbid!`}
|
||||
{!isWinning && isBidding && `You have the winning bid! (for now...)`}
|
||||
</Text>
|
||||
);
|
||||
return (
|
||||
<Text style={statusBarStyle} numberOfLines={1}>
|
||||
{isWinning && 'Oh no! You have been outbid!'}
|
||||
{!isWinning && isBidding && 'You have the winning bid! (for now...)'}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
BidStatus.propTypes = {
|
||||
isBidding: PropTypes.bool.isRequired,
|
||||
isWinning: PropTypes.bool.isRequired,
|
||||
itemId: PropTypes.string.isRequired,
|
||||
isBidding: PropTypes.bool.isRequired,
|
||||
isWinning: PropTypes.bool.isRequired,
|
||||
itemId: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
bidStatus: {
|
||||
color: '#fff',
|
||||
},
|
||||
isWinning: {
|
||||
backgroundColor: '#F00',
|
||||
},
|
||||
isOutbid: {
|
||||
backgroundColor: '#0F0',
|
||||
},
|
||||
bidStatus: {
|
||||
color: '#fff',
|
||||
},
|
||||
isWinning: {
|
||||
backgroundColor: '#F00',
|
||||
},
|
||||
isOutbid: {
|
||||
backgroundColor: '#0F0',
|
||||
},
|
||||
});
|
||||
|
||||
export default BidStatus;
|
||||
|
||||
@@ -1,42 +1,38 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
const FilterBar = ({ changeFilterer, changeViewMode, filterMode, viewMode }) => (
|
||||
<View style={styles.filterBar}>
|
||||
<Text style={styles.filter}>Filter</Text>
|
||||
<Text style={styles.view}>View</Text>
|
||||
<Text style={styles.filter}>Filter</Text>
|
||||
<Text style={styles.view}>View</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
FilterBar.propTypes = {
|
||||
changeFilterer: PropTypes.func.isRequired,
|
||||
changeViewMode: PropTypes.func.isRequired,
|
||||
filterMode: PropTypes.string,
|
||||
viewMode: PropTypes.string,
|
||||
changeFilterer: PropTypes.func.isRequired,
|
||||
changeViewMode: PropTypes.func.isRequired,
|
||||
filterMode: PropTypes.string,
|
||||
viewMode: PropTypes.string,
|
||||
};
|
||||
|
||||
FilterBar.defaultProps = {
|
||||
filterMode: null,
|
||||
viewMode: null,
|
||||
filterMode: null,
|
||||
viewMode: null,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
filterBar: {
|
||||
backgroundColor: '#0F0',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
filter: {
|
||||
flex: 2,
|
||||
},
|
||||
view: {
|
||||
flex: 2,
|
||||
},
|
||||
filterBar: {
|
||||
backgroundColor: '#0F0',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
filter: {
|
||||
flex: 2,
|
||||
},
|
||||
view: {
|
||||
flex: 2,
|
||||
},
|
||||
});
|
||||
|
||||
export default FilterBar;
|
||||
|
||||
Reference in New Issue
Block a user