media-cell.js

'use strict';
import React, { Component } from 'react';
import {
    Image,
    StyleSheet,
    Text,
    TouchableHighlight,
    View } from 'react-native';

const styles = StyleSheet.create({
  cellContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 4
  },

  cellImage: {
    height: 80,
    width: 60,
    marginRight: 8,
    resizeMode: 'contain',
    /* resizes the image inside of any container its in */
  },

  cellTextContainer: {
    flex: 1
  },

  mediaName: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4
  },

  mediaDescription: {
    fontSize: 12,
    color: '#777',
    flex: 1
  },

  mediaYear: {
    fontWeight: 'bold'
    },

});


//class MediaCell extends React.Component {
var MediaCell = React.createClass({

  render: function () {

    return (
          <View>
            <TouchableHighlight
              //onPress = { this.props.onSelect }
              onShowUnderlay = { this.props.onHighlight }
              onHideUnderlay = { this.props.onDeHighlight }
            >
              <View style = { styles.cellContainer } >

                  <Image
                    source =  {{ uri: this.props.media.artworkUrl100 }}
                    style = { styles.cellImage }
                  />

                  <View style = { styles.cellTextContainer } >
                      <Text style = { styles.mediaName } numberOfLines = { 1 } >
                        { this.props.media.trackName || this.props.media.collectionName }
                      </Text>
                      <Text style = { styles.mediaDescription } numberOfLines = { 2 } >
                          <Text style = { styles.mediaYear } >
                            { parseInt(this.props.media.releaseDate) }
                          </Text>
                          {" "}-{" "}
                          { this.props.media.longDescription || this.props.media.artistName }
                      </Text>
                  </View>
              </View>
            </TouchableHighlight>
          </View>
      );
   }
});


/******notes*******/
//onShowUnderlay and onHideUnderlay will call on functions that we pass from the ListView
//onPress = { this.props.onSelect }
//this.props.media.artworkUrl100 - could be a data object or a hash with a URI property like a java hashmap
//mediaName = movie title; restricted to one line
//output trackName or if that's not available the name of the collection

module.exports = MediaCell;