react-native/Examples/Movies/MovieCell.js

109 lines
3.0 KiB
JavaScript
Raw Normal View History

2015-01-30 01:10:49 +00:00
/**
2015-03-26 18:24:15 +00:00
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
2015-03-26 18:24:15 +00:00
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
2015-01-30 01:10:49 +00:00
* @flow
*/
'use strict';
var React = require('react-native');
var {
Image,
PixelRatio,
2015-08-28 10:57:51 +00:00
Platform,
2015-01-30 01:10:49 +00:00
StyleSheet,
Text,
TouchableHighlight,
2015-08-28 10:57:51 +00:00
TouchableNativeFeedback,
2015-01-30 01:10:49 +00:00
View
} = React;
var getStyleFromScore = require('./getStyleFromScore');
var getImageSource = require('./getImageSource');
var getTextFromScore = require('./getTextFromScore');
var MovieCell = React.createClass({
render: function() {
var criticsScore = this.props.movie.ratings.critics_score;
2015-08-28 10:57:51 +00:00
var TouchableElement = TouchableHighlight;
if (Platform.OS === 'android') {
TouchableElement = TouchableNativeFeedback;
}
2015-01-30 01:10:49 +00:00
return (
<View>
2015-08-28 10:57:51 +00:00
<TouchableElement
onPress={this.props.onSelect}
onShowUnderlay={this.props.onHighlight}
onHideUnderlay={this.props.onUnhighlight}>
2015-01-30 01:10:49 +00:00
<View style={styles.row}>
{/* $FlowIssue #7363964 - There's a bug in Flow where you cannot
* omit a property or set it to undefined if it's inside a shape,
* even if it isn't required */}
2015-01-30 01:10:49 +00:00
<Image
source={getImageSource(this.props.movie, 'det')}
style={styles.cellImage}
/>
<View style={styles.textContainer}>
<Text style={styles.movieTitle} numberOfLines={2}>
{this.props.movie.title}
</Text>
<Text style={styles.movieYear} numberOfLines={1}>
{this.props.movie.year}
{' '}&bull;{' '}
<Text style={getStyleFromScore(criticsScore)}>
Critics {getTextFromScore(criticsScore)}
</Text>
</Text>
</View>
</View>
2015-08-28 10:57:51 +00:00
</TouchableElement>
2015-01-30 01:10:49 +00:00
</View>
);
}
});
var styles = StyleSheet.create({
textContainer: {
flex: 1,
},
movieTitle: {
flex: 1,
fontSize: 16,
fontWeight: '500',
2015-01-30 01:10:49 +00:00
marginBottom: 2,
},
movieYear: {
color: '#999999',
fontSize: 12,
},
row: {
alignItems: 'center',
backgroundColor: 'white',
flexDirection: 'row',
padding: 5,
},
cellImage: {
backgroundColor: '#dddddd',
height: 93,
marginRight: 10,
width: 60,
},
cellBorder: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
// Trick to get the thinest line the device can display
height: 1 / PixelRatio.get(),
marginLeft: 4,
},
});
module.exports = MovieCell;