Eventment/app/components/Item/List.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import {
    StyleSheet,
    TouchableOpacity,
    Text,
    Image,
    View
} from 'react-native';

import GallerySwiper from 'react-native-gallery-swiper';

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: 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 });
  }

  _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>
    );
  }
}

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
    },
    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,
  },
});